Расширение DevTools
Electron supports Chrome DevTools extensions, which can be used to extend the ability of Chrome's developer tools for debugging popular web frameworks.
Loading a DevTools extension with tooling
The easiest way to load a DevTools extension is to use third-party tooling to automate the process for you. electron-devtools-installer is a popular NPM package that does just that.
Manually loading a DevTools extension
If you don't want to use the tooling approach, you can also do all of the necessary operations by hand. To load an extension in Electron, you need to download it via Chrome, locate its filesystem path, and then load it into your Session by calling the ses.loadExtension
API.
Using the React Developer Tools as an example:
-
Install the extension in Google Chrome.
-
Перейдите
chrome://extensions
и найдите его идентификатор расширения, который является хешем строка какfmkadmapgofadopljbjfkapdkoienihi
. -
Find out the filesystem location used by Chrome for storing extensions:
- в Windows it is
%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
; - в Linux это может быть:
~/.config/google-chrome/Default/Extensions/
~/.config/google-chrome-beta/Default/Extensions/
~/.config/google-chrome-canary/Default/Extensions/
~/.config/chromium/Default/Extensions/
- в macOS это
~/Library/Application Support/Google/Chrome/Default/Extensions
.
- в Windows it is
-
Передайте местоположение расширения в
ses.loadExtension
API. For React Developer Toolsv4.9.0
, it looks something like:const { app, session } = require('electron')
const path = require('node:path')
const os = require('node:os')
// on macOS
const reactDevToolsPath = path.join(
os.homedir(),
'/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
)
app.whenReady().then(async () => {
await session.defaultSession.loadExtension(reactDevToolsPath)
})