开发者工具扩展

Electron 支持 Chrome DevTools 扩展，可用于扩展 Chrome 的开发人员工具的功能，以调试流行的 Web 框架。

使用工具加载 DevTools 扩展

加载 DevTools 扩展的最简单方法是使用第三方工具，来为您实现自动化过程。 electron-devtools-installer 是一个受欢迎的 NPM 包。

手动加载 DevTools 扩展

如果你不想使用工具加载，你也可以手动完成所有必需的操作。 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.

下面以React Developer Tools为例：

1. 在 Google Chrome 中安装扩展。

2. 打开chrome://extensions，找到扩展程序的ID，像 fmkadmapgofadopljbjfkapdkoienihi 一样的 hash 字符串。

3. 找到 Chrome 扩展程序的存放目录：

   • 在Ｗindows 下为 %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. Pass the location of the extension to the 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 returns a Promise with an Extension object, which contains metadata about the extension that was loaded. 在加载页面前，此 Promise 需要被 resolve（例如使用 await 表达式）。 否则将无法保证扩展被加载。
• loadExtension 无法在 app 模块 ready 之前调用，也不能被内存(非持久) 会话调用。
• 如果您希望加载扩展，则必须在应用的每次启动时调用loadExtension 。

删除 DevTools 扩展

You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. 每次应用重新启动，扩展不会持续。

DevTools 扩展支持

Electron only supports a limited set of chrome.* APIs, so extensions using unsupported chrome.* APIs under the hood may not work.

以下 DevTools 扩展程序已经通过测试，可以在 Electron 中正常工作：

• Ember Inspector
• React Developer Tools
• Backbone Debugger
• jQuery Debugger
• AngularJS Batarang
• Vue.js devtools
• Cerebral Debugger
• Redux DevTools Extension
• MobX Developer Tools

如果 DevTools 扩展不工作，我该怎么办？

首先，请确保扩展仍在维护中，并与最新版本的 Google Chrome 兼容。 我们不能为不受支持的扩展提供额外支持。

如果扩展可以在 Chrome 上运行，但不能在 Electron 上运行， 在 Electron 的 issue Tracker 中提交一个错误，并描述扩展的哪个部分不能按预期工作。