Electron DevTools Extension
npm install --save-dev devtron
Then execute the following from the Console tab of your running Electron app's developer tools:
You should then see a
Devtron tab added.
If your application's
BrowserWindow was created with
false then you will need to expose some globals via a preload
script to allow Devtron access to Electron APIs:
window__devtron = require: require process: process
Then restart your application and Devtron should successfully load. You may
want to guard this assignment with a
if (process.env.NODE_ENV === 'development')
check to ensure these variables aren't exposed in production.
git clonecd devtronnpm installnpm start
This will start a process that watches and compiles the extension as files are modified.
Then open the Console tab of your Electron app and run the following with the path updated for the location that you've cloned devtron to:
Then a Devtron tab should appear and it will now be enabled for that application.
You can reload the extension by closing and reopening the dev tools.
To make developing and debugging the extension easier, you can run it in a Chrome tab that will talk remotely to a running Electron app over HTTP.
DEVTRON_DEBUG_PATH environment variable to the path of the cloned
Start your Electron application.
Click the Devtron tab.
You should then see the following messages logged to the Console tab:
Devtron server listening on http://localhost:3948
Open file:///Users/me/devtron/static/index.html to view
/Users/me/devtron/static/index.html in Chrome
The page there will talk remotely to the running Electron app so you'll be able to fully interact with each pane with real data.
Have an idea for something this extension could do to make debugging Electron apps easier? Please open an issue.
Pull requests are also welcome and appreciated. Run
npm test to run the