开发者工具扩展

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

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

下面以React Developer Tools为例：

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

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

   • 在 Linux下为：
     • ~/.config/google-chrome/Default/Extensions/
     • ~/.config/google-chrome-canary/Default/Extensions/
     • ~/.config/chromium/Default/Extensions/
   • 在 macOS下为~/Library/Application Support/Google/Chrome/Default/Extensions。

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

• 返回一个包含 扩展对象 的 Promise，其中包含加载的扩展有关的元数据。 在加载页面前，此 Promise 需要被 resolve（例如使用 await 表达式）。 否则将无法保证扩展被加载。
• 如果您希望加载扩展，则必须在应用的每次启动时调用 。

您可以将扩展的 ID 传递给 API，以将其从您的 Session 中删除。 每次应用重新启动，扩展不会持续。

Electron 仅支持 有限的 chrome.* APIs，所以使用不支持的 chrome.* 扩展的 APIs 可能无法工作。

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

• React Developer Tools
• jQuery Debugger
• Vue.js devtools
• MobX Developer Tools

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

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