2015-09-01 02:17:41 +00:00
# DevTools Extension
2014-08-28 08:33:27 +00:00
2015-09-01 02:17:41 +00:00
To make debugging easier, Electron has basic support for the
2014-08-28 08:33:27 +00:00
[Chrome DevTools Extension][devtools-extension].
2015-09-01 02:17:41 +00:00
For most DevTools extensions you can simply download the source code and use
the `BrowserWindow.addDevToolsExtension` API to load them. The loaded extensions
2014-08-28 08:33:27 +00:00
will be remembered so you don't need to call the API every time when creating
a window.
2015-09-01 02:17:41 +00:00
For example, to use the [React DevTools Extension ](https://github.com/facebook/react-devtools )
, first you need to download its source code:
2014-08-28 08:33:27 +00:00
```bash
$ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git
```
2015-10-11 13:18:27 +00:00
Follow the instructions in [`react-devtools/shells/chrome/Readme.md` ](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md ) to build the extension.
2015-09-01 02:17:41 +00:00
Then you can load the extension in Electron by opening DevTools in any window,
and running the following code in the DevTools console:
2014-08-28 08:33:27 +00:00
```javascript
2015-10-11 13:18:27 +00:00
require('remote').require('browser-window').addDevToolsExtension('/some-directory/react-devtools/shells/chrome');
2014-08-28 08:33:27 +00:00
```
2015-09-01 02:17:41 +00:00
To unload the extension, you can call the `BrowserWindow.removeDevToolsExtension`
API with its name and it will not load the next time you open the DevTools:
2014-08-28 08:33:27 +00:00
```javascript
2015-06-09 16:15:54 +00:00
require('remote').require('browser-window').removeDevToolsExtension('React Developer Tools');
2014-08-28 08:33:27 +00:00
```
2015-09-01 02:17:41 +00:00
## Format of DevTools Extension
2014-08-28 08:33:27 +00:00
2015-09-01 02:17:41 +00:00
Ideally all DevTools extensions written for the Chrome browser can be loaded by
Electron, but they have to be in a plain directory. For those packaged with
`crx` extensions, there is no way for Electron to load them unless you find a
way to extract them into a directory.
2014-08-28 08:33:27 +00:00
2015-09-01 02:17:41 +00:00
## Background Pages
2014-08-28 08:33:27 +00:00
2015-09-01 02:17:41 +00:00
Currently Electron doesn't support the background pages feature in Chrome
extensions, so some DevTools extensions that rely on this feature may
not work in Electron.
2014-08-28 08:33:27 +00:00
## `chrome.*` APIs
2015-09-01 02:17:41 +00:00
Some Chrome extensions may use `chrome.*` APIs for features and while there has
been some effort to implement those APIs in Electron, not all have been
implemented.
2014-08-28 08:33:27 +00:00
2015-09-01 02:17:41 +00:00
Given that not all `chrome.*` APIs are implemented if the DevTools extension is
using APIs other than `chrome.devtools.*` , the extension is very likely not to
work. You can report failing extensions in the issue tracker so that we can add
support for those APIs.
2014-08-28 08:33:27 +00:00
[devtools-extension]: https://developer.chrome.com/extensions/devtools