electron/docs-translations/zh-CN/tutorial/devtools-extension.md
2015-12-28 13:10:15 +08:00

2.4 KiB
Raw Blame History

DevTools扩展

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

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

** 注React DevTools目前不能直接工作详情留意https://github.com/atom/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.removeDevToolsExtensionAPI(扩展名作为参数传入)该扩展在下次打开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这个扩展很可能无法正常工作。你可以通过报告这个扩展的异常信息这样做方便我们对该扩展的支持。