×

Electron 教程

Electron 教程简介Electron 快速入门Electron 桌面环境集成Electron 在线/离线事件探测Electron 进程支持的 Chrome 命令行开关Electron 环境变量Electron 支持的平台Electron 应用部署Mac App Store 应用提交向导Electron 应用打包Electron 使用原生模块Electron 主进程调试使用 Selenium 和 WebDriverElectron DevTools扩展使用 Pepper Flash 插件使用 Widevine CDM 插件Electron 术语表Electron 离屏渲染Electron 交互式解释器 (REPL)Electron 自动更新功能autoUpdater

Electron API

Electron DOM File对象Electron DOM <webview>Electron window.open 函数

在主进程内可用的模块

Electron app 模块Electron autoUpdater 模块Electron BrowserWindow 模块Electron contentTracing 模块Electron dialog 模块Electron global-shortcut 模块Electron ipcMain 模块Electron menu 模块Electron MenuItem 模块Electron powerMonitor 模块Electron powerSaveBlockerElectron protocol 模块Electron session 模块Electron webContents 模块Electron Tray 模块Electron Locales

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

Electron desktopCapturer模块Electron ipcRenderer 模块Electron remote 模块Electron webFrame 模块

两种进程都可用的模块

Electron clipboard 模块Electron crashReporter 模块Electron nativeImage 模块Electron screen 模块Electron shell 模块

Electron 开发

Electron 编码规范Electron 源码目录结构Electron 和 NW.js技术上的差异Electron 构建系统概览Electron 构建步骤 (OS X)Electron 构建步骤 (Windows)Electron 构建步骤 (Linux)调试中使用 Symbol ServerElectron 常见问题Electron 版本管理electron window 提交指南自动化持续集成系统(CI)测试Electron 文档风格指南

Electron DevTools扩展


为了使调试更容易,Electron 原生支持 Chrome DevTools Extension

对于大多数DevTools的扩展,你可以直接下载源码,然后通过 BrowserWindow.addDevToolsExtension API 加载它们。Electron会记住已经加载了哪些扩展,所以你不需要每次创建一个新window时都调用 BrowserWindow.addDevToolsExtension API。

注:React DevTools目前不能直接工作,详情留意 https://github.com/electron/electron/issues/915

例如,要用React DevTools Extension,你得先下载他的源码:

$ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git

参考 react-devtools/shells/chrome/Readme.md 来编译这个扩展源码。

然后你就可以在任意页面的 DevTools 里加载 React DevTools 了,通过控制台输入如下命令加载扩展:

const BrowserWindow = require('electron').remote.BrowserWindow;
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');

要卸载扩展,可以调用 BrowserWindow.removeDevToolsExtension API (扩展名作为参数传入),该扩展在下次打开DevTools时就不会加载了:

BrowserWindow.removeDevToolsExtension('React Developer Tools');

DevTools 扩展的格式

理论上,Electron 可以加载所有为 chrome 浏览器编写的 DevTools 扩展,但它们必须存放在文件夹里。那些以 crx 形式发布的扩展是不能被加载的,除非你把它们解压到一个文件夹里。

后台运行(background pages)

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

chrome.* APIs

有些 chrome 扩展使用了 chrome.*APIs,而且这些扩展在 Electron 中需要额外实现一些代码才能使用,所以并不是所有的这类扩展都已经在 Electron 中实现完毕了。

考虑到并非所有的 chrome.*APIs 都实现完毕,如果 DevTools 正在使用除了 chrome.devtools.* 之外的其它 APIs,这个扩展很可能无法正常工作。你可以通过报告这个扩展的异常信息,这样做方便我们对该扩展的支持。

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)