Electron DevTools扩展

Posted 2021-09-09 知否

为了使调试更容易，Electron 原生支持 Chrome DevTools 扩展。对于大多数 DevTools 的扩展，我们可以直接下载源码，然后通过 BrowserWindow.addDevToolsExtension 加载它们。Electron 会记住已经加载了哪些扩展，所以不需要每次创建一个新 window 时都调用 BrowserWindow.addDevToolsExtension。

如何加载一个DevTools扩展程序

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

示例：

下面以 React Developer Tools 为例：

首先我们需要在 Chrome 中安装 React Developer Tools 。打开 chrome://extensions，找到扩展程序的 ID，形如 fmkadmapgofadopljbjfkapdkoienihi 的 hash 字符串。找到 Chrome 扩展程序的存放目录：

• 在 Ｗindows 下为 %LOCALAPPDATA%\\Google\\Chrome\\User Data\\Default\\Extensions
• 在 macOS 下为 ~/Library/Application Support/Google/Chrome/Default/Extensions
• 在 Linux 下为：

~/.config/google-chrome/Default/Extensions/
~/.config/google-chrome-beta/Default/Extensions/
~/.config/google-chrome-canary/Default/Extensions/
~/.config/chromium/Default/Extensions/

• 将扩展的地址传递给 BrowserWindow.addDevToolsExtension，例如：

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

如何移除一个DevTools扩展程序

要移除一个 DevTools 扩展，可以传递扩展程序的名称到 BrowserWindow.removeDevToolsExtension 中，扩展名的名称由 BrowserWindow.addDevToolsExtension 返回，我们可以使用 BrowserWindow.getDevToolsExtensions 应用程序编程接口。

示例：

例如移除一个指定扩展：

BrowserWindow.removeDevToolsExtension(\'React Developer Tools\');

chrome.* APIs

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

注意 Electron 目前并不支持 chrome 扩展里的后台运行(background pages)功能，所以那些依赖此特性的 DevTools 扩展在 Electron 里可能无法正常工作。

链接：https://www.9xkd.com/