DevTools扩展 | DevTools Extension

Electron支持Chrome DevTools Extension，该扩展可用于扩展devtools调试流行Web框架的能力。

如何加载DevTools扩展

本文档概述了手动加载扩展的过程。您也可以尝试一下第三方工具electron-devtools-installer，它可以直接从Chrome WebStore下载扩展程序。

要在Electron中加载扩展，您需要在Chrome浏览器中下载它，找到它的文件系统路径，然后通过调用BrowserWindow.addDevToolsExtension(extension)API 加载它。

以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/

- on macOS it is `~/Library/Application Support/Google/Chrome/Default/Extensions`.

1. 将扩展的位置传递给BrowserWindow.addDevToolsExtensionAPI，对于React Developer Tools来说，它就像这样：~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0

注：该BrowserWindow.addDevToolsExtension发射应用模块的准备事件之前API不能叫。

扩展名由返回BrowserWindow.addDevToolsExtension，您可以将扩展的名称传递给BrowserWindow.removeDevToolsExtensionAPI以将其卸载。

支持的DevTools扩展

Electron仅支持一组有限的chrome.*API，因此一些使用不支持chrome.*的Chrome扩展功能的扩展可能无法使用。以下Devtools扩展程序经过测试并保证可以在Electron中工作：

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

如果DevTools Extension无法正常工作，我应该怎么做？

首先请确保扩展程序仍在维护中，一些扩展程序甚至无法用于最新版本的Chrome浏览器，我们无法为它们做任何事情。

然后在Electron的问题列表中提交错误，并描述扩展的哪一部分没有按预期工作。