mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Standardize devtools

Browse source
This commit is contained in:
Jessica Lord 2015-08-31 19:17:41 -07:00
parent c6269bf77a
commit a5234224a6
1 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
docs/tutorial/devtools-extension.md
View file

@ -1,52 +1,57 @@
# DevTools extension # DevTools Extension
To make debugging easier, Electron has basic support for To make debugging easier, Electron has basic support for the
[Chrome DevTools Extension][devtools-extension]. [Chrome DevTools Extension][devtools-extension].
For most devtools extensions, you can simply download the source code 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](https://github.com/facebook/react-devtools), first you need to download its For example, to use the [React DevTools Extension](https://github.com/facebook/react-devtools)
source code: , first you need to download its source code:
```bash ```bash
$ cd /some-directory $ 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 the extension in Electron by opening devtools in any window, Then you can load the extension in Electron by opening DevTools in any window,
and then running the following code in the devtools console: and 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 the `BrowserWindow.removeDevToolsExtension`
API with its name and it will not load 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');
``` ```
## Format of devtools extension ## Format of DevTools Extension
Ideally all devtools extension written for Chrome browser can be loaded by 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 `crx` Electron, but they have to be in a plain directory. For those packaged with
extensions, there is no way for Electron to load them unless you find a way to `crx` extensions, there is no way for Electron to load them unless you find a
extract them into a directory. way to extract them into a directory.
## Background pages ## Background Pages
Currently Electron doesn't support the background pages feature in chrome extensions, Currently Electron doesn't support the background pages feature in Chrome
so for some devtools extensions that rely on this feature, they may not work in Electron. extensions, so some DevTools extensions that rely on this feature may
not work in Electron.
## `chrome.*` APIs ## `chrome.*` APIs
Some chrome extensions use `chrome.*` APIs for some features, there has been some Some Chrome extensions may use `chrome.*` APIs for features and while there has
effort to implement those APIs in Electron, however not all are implemented. been some effort to implement those APIs in Electron, not all have been
implemented.
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. 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.
[devtools-extension]: https://developer.chrome.com/extensions/devtools [devtools-extension]: https://developer.chrome.com/extensions/devtools