Add DevTools Extension

[Juani-Atix]

I'm using react in my meteor-desktop project and I would like to add the React Developer Tools from Chrome to help me debugging. Searching on the web I found this post on how to add the React Tools to an Electron project (https://schier.co/blog/2016/08/09/react-dev-tools-in-electron/).

But I don't know how to access the BrowserWindow with meteor-desktop. I tried to add some code to the desktop.js file that comes with the skeleton.

` eventsBus.on('windowCreated', (window) => {

        window.webContents.on('crashed', Desktop.windowCrashedHandler);

        window.on('unresponsive', Desktop.windowUnresponsiveHandler);

        window.addDevToolsExtension(myPath); // <-- Tried to add this line

    });

`

But I think that the window object I get from the event is not the BrowserWindow that I want. How can I access the BrowserWindow object and add a new developerTool?

[gerwinbrunner]

Having the react tools would be really cool.

+1

[wojtkowiak]

addDevToolsExtension is a static method from BrowserWindow -> https://electron.atom.io/docs/api/browser-window/#browserwindowadddevtoolsextensionpath

So you can use it in the desktop.js constructor with just:

import {BrowserWindow} from 'electron';
BrowserWindow.addDevToolsExtension(...

Let me know if you will have any other problems. I would be interested in putting that into a plugin.

[Juani-Atix]

Thank you!

That worked without a problem.

[jmarks-joshua]

@wojtkowiak In terms of a plugin it could be worth just looking at something like electron-devtools-installer which seems like a pretty nice way of getting dev tools into electron means you don't have to worry about paths.