开发工具扩展程序

Electron支持Chrome DevTools 扩展程序，可增强开发工具调试流行web框架的能力

如何加载一个 DevTools 扩展程序

本文简要描述了手动加载一个扩展程序的过程 你也可以尝试一下electron-devtools-installer，这个第三方工具可以直接从Chrome的WebStore下载扩展程序

为了在Electron中加载一个扩展程序，你需要在Chrome浏览器中下载它，找到它在系统目录中位置，然后调用BrowserWindow.addDevToolsExtension(extension)API 加载它

下面以React Developer Tools为例：

• 在 Chrome 中安装React Developer Tools 。

• 打开chrome://extensions，找到扩展程序的ID，形如fmkadmapgofadopljbjfkapdkoienihi的hash字符串。

• 找到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。
• Pass the location of the extension to BrowserWindow.addDevToolsExtension API, for the React Developer Tools, it is something like:

const path = require('path')
const os = require('os')
BrowserWindow.addDevToolsExtension(
  path.join(os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0')
)

注意：只有在app模块的ready事件触发之后，才可以调用BrowserWindow.addDevToolsExtension API

BrowserWindow.addDevToolsExtension将会返回扩展的名字，你可以把这个名字传入BrowserWindow.removeDevToolsExtensionAPI来卸载它。

支持的 DevTools 扩展程序

Electron 只支持有限的chrome. API，所以，一些扩展程序如果使用了不支持的chrome. API，它可能会无法正常工作。 以下 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 扩展不工作, 我该怎么办？

首先请确保扩展仍在维护中, 有些扩展甚至不支持 Chrome 浏览器的最新版本, 对此我们也无能为力。

然后在Electron的问题列表中提交一个 bug, 并描述扩展程序的哪个部分没有按预期的方式工作。