📝 Improve devtools documentation

This commit is contained in:
Sam Saccone 2015-06-06 21:56:13 -04:00
parent 13c1b078f9
commit 55c07cec68

View file

@ -1,14 +1,14 @@
# DevTools extension # DevTools extension
To make debugging more easy, Electron has added basic support for To make debugging easier, Electron has basic support for
[Chrome DevTools Extension][devtools-extension]. [Chrome DevTools Extension][devtools-extension].
For most devtools extensions, you can simply download their source codes and use For most devtools extensions, you can simply download the source code and use
the `BrowserWindow.addDevToolsExtension` API to load them, the loaded extensions the `BrowserWindow.addDevToolsExtension` API to load them, the loaded extensions
will be remembered so you don't need to call the API every time when creating will be remembered so you don't need to call the API every time when creating
a window. a window.
For example to use the React DevTools Extension, first you need to download its For example to use the [React DevTools Extension](https://github.com/facebook/react-devtools), first you need to download its
source code: source code:
```bash ```bash
@ -16,15 +16,15 @@ $ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git $ git clone --recursive https://github.com/facebook/react-devtools.git
``` ```
Then you can load it in Electron by opening the devtools in arbitray window, Then you can load the extension in Electron by opening devtools in any window,
and run this code in the console of devtools: and then running the following code in the devtools console:
```javascript ```javascript
require('remote').require('browser-window').addDevToolsExtension('/some-directory/react-devtools') require('remote').require('browser-window').addDevToolsExtension('/some-directory/react-devtools')
``` ```
To unload the extension, you can call `BrowserWindow.removeDevToolsExtension` To unload the extension, you can call `BrowserWindow.removeDevToolsExtension`
API with its name and it will disappear the next time you open the devtools: API with its name and it will not load the next time you open the devtools:
```javascript ```javascript
require('remote').require('browser-window').removeDevToolsExtension('React Developer Tools') require('remote').require('browser-window').removeDevToolsExtension('React Developer Tools')
@ -34,23 +34,19 @@ require('remote').require('browser-window').removeDevToolsExtension('React Devel
Ideally all devtools extension written for Chrome browser can be loaded by Ideally all devtools extension written for Chrome browser can be loaded by
Electron, but they have to be in a plain directory, for those packaged `crx` Electron, but they have to be in a plain directory, for those packaged `crx`
extensions, there is no way in Electron to load them unless you find a way to extensions, there is no way for Electron to load them unless you find a way to
extract them into a directory. extract them into a directory.
## Background pages ## Background pages
Currently Electron doesn't support the background pages of chrome extensions, Currently Electron doesn't support the background pages feature in chrome extensions,
so for some devtools extensions that rely on this feature, they may not work so for some devtools extensions that rely on this feature, they may not work in Electron.
well in Electron
## `chrome.*` APIs ## `chrome.*` APIs
Some chrome extensions use `chrome.*` APIs for some features, there is some Some chrome extensions use `chrome.*` APIs for some features, there has been some
effort to implement those APIs in Electron to make them work, but we have effort to implement those APIs in Electron, however not all are implemented.
only implemented few for now.
So if the devtools extension is using APIs other than `chrome.devtools.*`, it is 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.
very likely to fail, but you can report those extensions in the issues tracker
so we can add support for those APIs.
[devtools-extension]: https://developer.chrome.com/extensions/devtools [devtools-extension]: https://developer.chrome.com/extensions/devtools