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

Update the docs on using DevTools extension

Browse source
This commit is contained in:
Cheng Zhao 2016-05-29 15:19:41 +09:00
parent 5f3fdbe635
commit d1e56f416c
1 changed files with 37 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,62 +1,52 @@
# DevTools Extension # DevTools Extension
To make debugging easier, Electron has basic support for the Electron supports the [Chrome DevTools Extension][devtools-extension], which can
[Chrome DevTools Extension][devtools-extension]. be used to extend the ability of devtools for debugging popular web frameworks.
For most DevTools extensions you can simply download the source code and use ## How to load a DevTools Extension
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
a window.
** NOTE: React DevTools does not work, follow the issue here https://github.com/electron/electron/issues/915 ** To load an extension in Electron, you need to download it in Chrome browser,
locate its filesystem path, and then load it by calling the
`BrowserWindow.addDevToolsExtension(extension)` API.
For example, to use the [React DevTools Extension](https://github.com/facebook/react-devtools) Using the [React Developer Tools][react-devtools] as example:
, first you need to download its source code:
```bash 1. Install it in Chrome browser.
$ cd /some-directory 1. Navigate to `chrome://extensions`, and find its extension ID, which is a hash
$ git clone --recursive https://github.com/facebook/react-devtools.git string like `fmkadmapgofadopljbjfkapdkoienihi`.
``` 1. Find out filesystem location used by Chrome for storing extensions:
* on Windows it is `%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions`;
* on Linux it is `~/.config/google-chrome/Default/Extensions/`;
* on OS X it is `~/Library/Application Support/Google/Chrome/Default/Extensions`.
1. Pass the location of the extension to `BrowserWindow.addDevToolsExtension`
API, for the React Developer Tools, it is something like:
`~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.14.10_0`
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. The name of the extension is returned by `BrowserWindow.addDevToolsExtension`,
and you can pass the name of the extension to the `BrowserWindow.removeDevToolsExtension`
API to unload it.
Then you can load the extension in Electron by opening DevTools in any window, ## Supported DevTools Extensions
and running the following code in the DevTools console:
```javascript Electron only supports a limited set of `chrome.*` APIs, so some extensions
const BrowserWindow = require('electron').remote.BrowserWindow; using unsupported `chrome.*` APIs for chrome extension features may not work.
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome'); Following Devtools Extensions are tested and guaranteed to work in Electron:
```
To unload the extension, you can call the `BrowserWindow.removeDevToolsExtension` * [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
API with its name and it will not load the next time you open the DevTools: * [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
* [Backbone Debugger](https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd)
* [jQuery Debugger](https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi)
* [AngularJS Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk)
* [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
```javascript ### What should I do if a DevTools Extension is not working?
BrowserWindow.removeDevToolsExtension('React Developer Tools');
```
## Format of DevTools Extension Fist please make sure the extension is still being maintained, some extensions
can not even work for recent versions of Chrome browser, and we are not able to
do anything for them.
Ideally all DevTools extensions written for the Chrome browser can be loaded by Then file a bug at Electron's issues list, and describe which part of the
Electron, but they have to be in a plain directory. For those packaged with extension is not working as expected.
`crx` extensions, there is no way for Electron to load them unless you find a
way to extract them into a directory.
## Background Pages
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.
## `chrome.*` APIs
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.
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
[react-devtools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi