进阶 electronjs.org 2026-10-07 23:51:43 · 6 阅读
第19章 Electron 中加载 DevTools 扩展指南
DevTools 扩展
Electron 支持 Chrome DevTools 扩展，可用于扩展 Chrome 开发者工具在调试主流 Web 框架时的功能。
借助工具加载 DevTools 扩展
加载 DevTools 扩展最简便的方式是使用第三方工具自动化处理。electron-devtools-installer 是一个流行的 NPM 包，专门用于执行此操作。
手动加载 DevTools 扩展
如果你不想使用工具辅助，也可以手动完成所有必要操作。要在 Electron 中加载扩展，需通过 Chrome 下载该扩展，定位其文件系统路径，然后调用 ses.loadExtension API 将其加载到 Session 中。
以 React 开发者工具为例：
在 Google Chrome 中安装该扩展。
导航至 chrome://extensions，查找其扩展 ID（这是一个如 fmkadmapgofadopljbjfkapdkoienihi 的哈希字符串）。
找到 Chrome 存储扩展的文件系统位置：
Windows 上为 %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。
将扩展位置传递给 ses.loadExtension API。对于 React 开发者工具 v4.9.0，代码示例如下：
const { app, session } = require('electron')
const os = require('node:os')
const path = require('node:path')
// 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)
})
注意事项： loadExtension 会返回一个 Promise，resolve 后得到一个 Extension 对象，其中包含已加载扩展的元数据。这个 Promise 必须先完成（比如用 await 等待）才能加载页面，否则无法保证扩展一定加载成功。 loadExtension 不能在 app 模块触发 ready 事件之前调用，也不能在内存型（非持久化）session 上调用。 如果希望扩展被加载，每次启动应用时都必须调用 loadExtension。 移除 DevTools 扩展 把扩展的 ID 传给 ses.removeExtension API 即可将其从 Session 中移除。已加载的扩展不会在应用重启后保留。 DevTools 扩展支持情况 Electron 只支持一部分 chrome.* API，所以依赖了不受支持的 chrome.* API 的扩展可能无法正常工作。 以下 DevTools 扩展已在 Electron 中测试通过： Ember Inspector React Developer Tools Backbone Debugger jQuery Debugger Vue.js devtools Cerebral Debugger Redux DevTools Extension MobX Developer Tools DevTools 扩展无法正常使用怎么办？ 首先，请确认该扩展仍在维护，并且与最新版的 Google Chrome 兼容。对于不受支持的扩展，我们无法提供额外帮助。 如果扩展在 Chrome 上正常、在 Electron 上却有问题，请到 Electron 的 issue tracker 提交 bug，并说明扩展的哪部分表现不符合预期。
const os = require('node:os')
const path = require('node:path')
// 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)
})
注意事项： loadExtension 会返回一个 Promise，resolve 后得到一个 Extension 对象，其中包含已加载扩展的元数据。这个 Promise 必须先完成（比如用 await 等待）才能加载页面，否则无法保证扩展一定加载成功。 loadExtension 不能在 app 模块触发 ready 事件之前调用，也不能在内存型（非持久化）session 上调用。 如果希望扩展被加载，每次启动应用时都必须调用 loadExtension。 移除 DevTools 扩展 把扩展的 ID 传给 ses.removeExtension API 即可将其从 Session 中移除。已加载的扩展不会在应用重启后保留。 DevTools 扩展支持情况 Electron 只支持一部分 chrome.* API，所以依赖了不受支持的 chrome.* API 的扩展可能无法正常工作。 以下 DevTools 扩展已在 Electron 中测试通过： Ember Inspector React Developer Tools Backbone Debugger jQuery Debugger Vue.js devtools Cerebral Debugger Redux DevTools Extension MobX Developer Tools DevTools 扩展无法正常使用怎么办？ 首先，请确认该扩展仍在维护，并且与最新版的 Google Chrome 兼容。对于不受支持的扩展，我们无法提供额外帮助。 如果扩展在 Chrome 上正常、在 Electron 上却有问题，请到 Electron 的 issue tracker 提交 bug，并说明扩展的哪部分表现不符合预期。
