Electron DevTools extension

To make debugging easier, Electron natively supports Chrome DevTools Extension.

For most DevTools extensions, you can download the source code directly and load them through BrowserWindow.addDevToolsExtension API. Electron remembers which extensions have been loaded, so you don't need BrowserWindow.addDevToolsExtension API every time you create a new window.

Note: React DevTools is not currently working directly, please note the https://github.com/electron/electron/issues/915

For example, to use React DevTools Extension, you first download his source code:

$ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git

Refer react-devtools/shells/chrome/Readme.md to compile this extension source code.

You can then load React DevTools in DevTools on any page, entering the following command from the console to load the extension:

const BrowserWindow = require('electron').remote.BrowserWindow;
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');

To uninstall an extension, you can call BrowserWindow.removeDevToolsExtension API (extension passed in as an argument) and the extension won't load the next time you open DevTools:

BrowserWindow.removeDevToolsExtension('React Developer Tools');

DevTools extended format

In theory, Electron can load all DevTools extensions written for chrome, but they must be stored in folders. Extensions published as crx cannot be loaded unless you unziw them into a folder.

Background pages

Electron does not currently support background pages in chrome extensions, so DevTools extensions that rely on this feature may not work properly in Electron.

chrome.* APIs

Some chrome chrome.* APIs, and these extensions require some extra code in Electron to use, so not all of these extensions have already been implemented in Electron.