DevTools 扩展

Electron 支持Chrome DevTools 扩展，这些扩展可以用于增强 Chrome 开发者工具的能力，以调试流行的 Web 框架。

使用工具加载 DevTools 扩展

加载 DevTools 扩展最简单的方式是使用第三方工具来自动化这个过程。electron-devtools-installer 是一个流行的 NPM 包，它就是做这个的。

手动加载 DevTools 扩展

如果你不想使用工具方式，你也可以手动完成所有必要的操作。 要在 Electron 中加载扩展，你需要通过 Chrome 下载它，找到它的文件系统路径，然后通过调用 ses.loadExtension API 将其加载到你的 会话 (Session) 中。

以 React Developer Tools 为例

1. 在 Google Chrome 中安装扩展。

2. 导航到 chrome://extensions，找到它的扩展 ID，它是一个哈希字符串，例如 fmkadmapgofadopljbjfkapdkoienihi。

3. 找出 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。

4. 将扩展的位置传递给 ses.loadExtension API。 对于 React Developer Tools v4.9.0，它看起来像这样：

   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)
   })

注意

• loadExtension 返回一个 Promise，其中包含一个 Extension 对象，该对象包含有关已加载扩展的元数据。 在加载页面之前，此 Promise 需要解决 (例如，使用 await 表达式)。 否则，扩展将无法保证加载。
• loadExtension 不能在触发 app 模块的 ready 事件之前调用，也不能在内存中 (非持久性) 的会话上调用。
• 如果希望加载扩展，则每次应用启动时都必须调用 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 的议题跟踪器中提交一个错误报告，并描述扩展的哪一部分没有按预期工作。