Electron DevTools擴(kuò)展

為了使調(diào)試更容易，Electron 原生支持 Chrome DevTools Extension。

對(duì)于大多數(shù)DevTools的擴(kuò)展，你可以直接下載源碼，然后通過 BrowserWindow.addDevToolsExtension API 加載它們。Electron會(huì)記住已經(jīng)加載了哪些擴(kuò)展，所以你不需要每次創(chuàng)建一個(gè)新window時(shí)都調(diào)用 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 來編譯這個(gè)擴(kuò)展源碼。

然后你就可以在任意頁面的 DevTools 里加載 React DevTools 了，通過控制臺(tái)輸入如下命令加載擴(kuò)展：

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

要卸載擴(kuò)展，可以調(diào)用 BrowserWindow.removeDevToolsExtension API (擴(kuò)展名作為參數(shù)傳入)，該擴(kuò)展在下次打開DevTools時(shí)就不會(huì)加載了：

BrowserWindow.removeDevToolsExtension('React Developer Tools');

DevTools 擴(kuò)展的格式

理論上，Electron 可以加載所有為 chrome 瀏覽器編寫的 DevTools 擴(kuò)展，但它們必須存放在文件夾里。那些以 crx 形式發(fā)布的擴(kuò)展是不能被加載的，除非你把它們解壓到一個(gè)文件夾里。

后臺(tái)運(yùn)行(background pages)

Electron 目前并不支持 chrome 擴(kuò)展里的后臺(tái)運(yùn)行(background pages)功能，所以那些依賴此特性的 DevTools 擴(kuò)展在 Electron 里可能無法正常工作。

chrome.* APIs

有些 chrome 擴(kuò)展使用了 chrome.*APIs，而且這些擴(kuò)展在 Electron 中需要額外實(shí)現(xiàn)一些代碼才能使用，所以并不是所有的這類擴(kuò)展都已經(jīng)在 Electron 中實(shí)現(xiàn)完畢了。