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 用于存储扩展的文件系统位置：
4. 在 Windows 上，它是 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions；
5. 在 Linux 上，可能是：
   • ~/.config/google-chrome/Default/Extensions/
   • ~/.config/google-chrome-beta/Default/Extensions/
   • ~/.config/google-chrome-canary/Default/Extensions/
   • ~/.config/chromium/Default/Extensions/
6. 在 macOS 上，它是 ~/Library/Application Support/Google/Chrome/Default/Extensions。
7. 将扩展的位置传递给 ses.loadExtension API。对于 React Developer Tools 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 返回一个带有 Extension 对象 的 Promise，其中包含已加载扩展的元数据。在加载页面前，需要该 Promise 完成解析（例如使用 await 表达式）。否则，无法保证扩展会加载。
• 不能在 app 模块的 ready 事件发出之前调用 loadExtension，也不能在内存（非持久化）会话中调用它。
• 如果你希望扩展被加载，则必须在每次启动应用时调用 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，并描述扩展的哪一部分未按预期工作。