# DevTools擴展 為了使調試更容易，Electron 原生支持 [Chrome DevTools Extension][devtools-extension]。 對于大多數DevTools的擴展，你可以直接下載源碼，然后通過 `BrowserWindow.addDevToolsExtension` API 加載它們。Electron會記住已經加載了哪些擴展，所以你不需要每次創建一個新window時都調用 `BrowserWindow.addDevToolsExtension` API。 ** 注：React DevTools目前不能直接工作，詳情留意 [https://github.com/electron/electron/issues/915](https://github.com/electron/electron/issues/915) ** 例如，要用[React DevTools Extension](https://github.com/facebook/react-devtools)，你得先下載他的源碼： ```bash $ cd /some-directory $ git clone --recursive https://github.com/facebook/react-devtools.git ``` 參考 [`react-devtools/shells/chrome/Readme.md`](https://github.com/facebook/react-devtools/blob/master/shells/chrome/Readme.md) 來編譯這個擴展源碼。 然后你就可以在任意頁面的 DevTools 里加載 React DevTools 了，通過控制臺輸入如下命令加載擴展： ```javascript const BrowserWindow = require('electron').remote.BrowserWindow; BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome'); ``` 要卸載擴展，可以調用 `BrowserWindow.removeDevToolsExtension` API (擴展名作為參數傳入)，該擴展在下次打開DevTools時就不會加載了： ```javascript 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，這個擴展很可能無法正常工作。你可以通過報告這個擴展的異常信息，這樣做方便我們對該擴展的支持。 [devtools-extension]: https://developer.chrome.com/extensions/devtools