开发者工具扩展

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

使用工具加载开发者工具扩展

加载开发者工具扩展最简单的方法是使用第三方工具来自动执行此过程。 electron-devtools-installer 是一个流行的 NPM 包，可以完成这项工作。

手动加载开发者工具扩展

如果你不想使用工具方法，也可以手动执行所有必要的操作。要加载 Electron 中的扩展程序，你需要通过 Chrome 下载它，找到它的文件系统路径，然后通过调用会话的 ses.loadExtension API 加载到你的会话中。

使用 React 开发者工具 作为示例

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 开发者工具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，该对象包含有关已加载扩展程序的元数据。此 Promise 需要在加载页面之前解析（例如，使用await 表达式）。否则，扩展程序无法保证加载。
• 在app 模块的ready 事件发出之前，无法调用loadExtension，也无法在内存中（非持久性）会话中调用它。
• 如果你希望扩展程序在每次启动应用程序时加载，则必须在每次启动应用程序时调用loadExtension。

删除开发者工具扩展

你可以将扩展程序的 ID 传递给ses.removeExtension API，以将其从你的会话中删除。已加载的扩展程序不会在应用程序启动之间持久化。

开发者工具扩展支持

Electron 只支持一组有限的chrome.* API，因此使用不受支持的chrome.* API 的扩展程序可能无法正常工作。

以下开发者工具扩展经过测试可以在 Electron 中使用

• Ember Inspector
• React 开发者工具
• Backbone 调试器
• jQuery 调试器
• AngularJS Batarang
• Vue.js 开发者工具
• Cerebral 调试器
• Redux 开发者工具扩展
• MobX 开发者工具

如果开发者工具扩展无法正常工作，我该怎么办？

首先，请确保扩展程序仍在维护中，并且与最新版本的 Google Chrome 兼容。我们无法为不受支持的扩展程序提供更多支持。

如果扩展程序在 Chrome 中运行但不在 Electron 中运行，请在 Electron 的问题跟踪器中提交一个错误，并描述扩展程序的哪个部分无法按预期工作。