乐趣区

关于electron:Electron-DevTools扩展

jiezi

为了使调试更容易，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 扩大程序的寄存目录：

  • 在 Windows 下为 %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/

退出移动版