Electron supports the Chrome DevTools Extension, which can be used to extend the ability of devtools for debugging popular web frameworks.
This document outlines the process for manually loading an extension. You may also try electron-devtools-installer, a third-party tool that downloads extensions directly from the Chrome WebStore.
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 as example:
chrome://extensions
, and find its extension ID, which is a hash string like fmkadmapgofadopljbjfkapdkoienihi
.Find out filesystem location used by Chrome for storing extensions:
%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/
~/Library/Application Support/Google/Chrome/Default/Extensions
.BrowserWindow.addDevToolsExtension
API, for the React Developer Tools, it is something like: ~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0
Note: The BrowserWindow.addDevToolsExtension
API cannot be called before the ready event of the app module is emitted.
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.
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:
First 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.
© 2013–2018 GitHub Inc.
Licensed under the MIT license.
https://electronjs.org/docs/tutorial/devtools-extension