12. 开发工具扩展

原文：https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md
译者：Lin

Electron支持Chrome DevTools Extension，可以使用流行的调试网页框架的工具来扩展。

如何加载一个DevTools Extension

本篇文档概述来手动加载一个扩展的过程。你可能还需要试一下electron-devtools-installer，一个第三方的工具，能够直接从Chrome WebStore下载扩展。

Electron中加载一个扩展，你需要先在Chrome浏览器中下载它，找到它的下载路径，然后使用BrowserWindow.addDevToolsExtension(extension)接口加载它。

使用React Developer Tools作为例子：

1. 在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. 将扩展的位置传给BrowserWindow.addDevToolsExtension接口，对于React Developer Tools可能是这样的：~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0

注意：BrowserWindow.addDevToolsExtension接口 API 不能在app模块尚未加载完之前被调用。

扩展的名字将由接口BrowserWindow.addDevToolsExtension返回来，你可以将接口的名字传入BrowserWindow.removeDevToolsExtension接口来卸载它。

支持的工具扩展

Electron仅支持一小部分chrome.*接口，如果一些扩展使用不支持的chrome.*接口会导致一些Chrome扩展的功能不能使用。以下工具扩展经过测试保证可以在Electron中工作：

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

如果一个工具扩展没有工作我应该怎么办？

请确保这个扩展仍然在被维护中，一些扩展不能工作是因为Chorme浏览器的版本问题，而我们不能做任何事情来使它工作。

然后在Electron的问题列表中记录一个bug，并描述是扩展的哪个部分没有按预期工作。