020da553ff
Linux has several folders, depending on who is using the Linux install. On our systems it could be any one of those depending on the user and what software they prefer to use, they all have the React plugin however, each one sits in a different folder. I prefer Chrome because of Netflix, she prefers Chromium and we also have Chrome Beta available.
56 lines
3 KiB
Markdown
56 lines
3 KiB
Markdown
# DevTools Extension
|
|
|
|
Electron supports the [Chrome DevTools Extension][devtools-extension], which can
|
|
be used to extend the ability of devtools for debugging popular web frameworks.
|
|
|
|
## How to load a DevTools Extension
|
|
|
|
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.
|
|
|
|
Using the [React Developer Tools][react-devtools] as example:
|
|
|
|
1. Install it in Chrome browser.
|
|
1. Navigate to `chrome://extensions`, and find its extension ID, which is a hash
|
|
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 could be:
|
|
* `~/.config/google-chrome/Default/Extensions/`
|
|
* `~/.config/google-chrome-beta/Default/Extensions/`
|
|
* `~/.config/google-chrome-canary/Default/Extensions/`
|
|
* `~/.config/chromium/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`
|
|
|
|
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.
|
|
|
|
## Supported DevTools Extensions
|
|
|
|
Electron only supports a limited set of `chrome.*` APIs, so some extensions
|
|
using unsupported `chrome.*` APIs for chrome extension features may not work.
|
|
Following Devtools Extensions are tested and guaranteed to work in Electron:
|
|
|
|
* [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
|
|
* [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)
|
|
|
|
### What should I do if a DevTools Extension is not working?
|
|
|
|
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.
|
|
|
|
Then file a bug at Electron's issues list, and describe which part of the
|
|
extension is not working as expected.
|
|
|
|
[devtools-extension]: https://developer.chrome.com/extensions/devtools
|
|
[react-devtools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
|