Electron.js指南——DevTools扩展

DevTools扩展

Electron支持Chrome DevTools扩展程序，该扩展程序可用于扩展devtools的功能，以调试流行的Web框架。

如何加载DevTools扩展

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

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

以React Developer Tools为例：

1. 将其安装在Chrome浏览器中。

2. 导航至chrome://extensions，然后找到其扩展ID，该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 API，对于React Developer Tools，它类似于：

   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')
   )
   

注意：在BrowserWindow.addDevToolsExtension发出应用程序模块的ready事件之前，无法调用API。

该扩展将被记住，因此每个扩展只需调用一次此API。如果您尝试添加已加载的扩展名，则此方法将不会返回，而是将警告记录到控制台。

如何删除DevTools扩展

您可以将扩展名传递给BrowserWindow.removeDevToolsExtension API以将其删除。扩展名由返回 BrowserWindow.addDevToolsExtension，您可以使用BrowserWindow.getDevToolsExtensionsAPI获取所有已安装的DevTools扩展名。

支持的DevTools扩展

Electron仅支持一组有限的chrome.*API，因此某些将不支持的chrome.*API用于chrome扩展功能的扩展可能不起作用。以下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的问题列表中提交一个错误，并描述扩展的哪一部分不能按预期工作。