Electron中文文档

新手 685983304  中级 642625556 高级 602866851 Q群区别? 征集友情链接公告

推荐版:3.0.10   测试版:4.0.0-beta.8   极客版:4.0.0-nightly.20181010  

开发工具扩展程序

Electron支持Chrome DevTools 扩展程序,可增强开发工具调试流行web框架的能力

如何加载一个 DevTools 扩展程序

本文简要描述了手动加载一个扩展程序的过程 你也可以尝试一下electron-devtools-installer,这个第三方工具可以直接从Chrome的WebStore下载扩展程序

为了在Electron中加载一个扩展程序,你需要在Chrome浏览器中下载它,找到它在系统目录中位置,然后调用BrowserWindow.addDevToolsExtension(extension)API 加载它

下面以React Developer Tools为例:

  1. 在 Chrome 中安装React Developer Tools 。
  2. 打开chrome://extensions,找到扩展程序的ID,形如fmkadmapgofadopljbjfkapdkoienihi的hash字符串。
  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. 将扩展程序的路径传给API:BrowserWindow.addDevToolsExtension,对于React Developer Tools 来说 应该为~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0

注意:只有在app模块的ready事件触发之后,才可以调用BrowserWindow.addDevToolsExtension API

BrowserWindow.addDevToolsExtension将会返回扩展的名字,你可以把这个名字传入BrowserWindow.removeDevToolsExtensionAPI来卸载它。

支持的 DevTools 扩展程序

Electron 只支持有限的chrome.* API,所以,一些扩展程序如果使用了不支持的chrome.* API,它可能会无法正常工作。 以下 DevTools 扩展程序已经通过测试,可以在Electron中正常工作:

如果 DevTools 扩展不工作, 我该怎么办?

首先请确保扩展仍在维护中, 有些扩展甚至不支持 Chrome 浏览器的最新版本, 对此我们也无能为力。

然后在Electron的问题列表中提交一个 bug, 并描述扩展程序的哪个部分没有按预期的方式工作。



相关npm包集合




相关站点资源





官方指南

常见问题 (FAQ)

指南和教程

详细教程

API 参考

自定义 DOM 元素:

主进程可用的模块:

渲染进程(网页)可用的模块:

两种进程都可用的模块:

开发

  • electron-vue 开发过程中的几个常见问题的解决方案
  • electron 3.x 系统新增加的页面加载函数 loadFile
  • JS开发者社区

    和大家在一起

    新手/1元新手 685983304 
    中级/5元 中级 642625556
    高级/50元 高级 602866851