原文：https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md
譯者：Lin
Electron支持Chrome DevTools Extension毅戈，可以使用流行的調(diào)試網(wǎng)頁(yè)框架的工具來(lái)擴(kuò)展弧哎。
如何加載一個(gè)DevTools Extension
本篇文檔概述來(lái)手動(dòng)加載一個(gè)擴(kuò)展的過(guò)程构拳。你可能還需要試一下electron-devtools-installer，一個(gè)第三方的工具，能夠直接從Chrome WebStore下載擴(kuò)展。
Electron中加載一個(gè)擴(kuò)展，你需要先在Chrome瀏覽器中下載它默勾，找到它的下載路徑，然后使用BrowserWindow.addDevToolsExtension(extension)接口加載它聚谁。
使用React Developer Tools作為例子：
- 在Chrome瀏覽器中安裝母剥。
- 導(dǎo)航到
chrome://extensions，然后找到那個(gè)擴(kuò)展的ID形导，是哈希值形式的环疼，就像這樣：fmkadmapgofadopljbjfkapdkoienihi。 - 找到用于存儲(chǔ)Chrome擴(kuò)展的文件位置：
- 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炫隶。
- 將擴(kuò)展的位置傳給
BrowserWindow.addDevToolsExtension接口，對(duì)于React Developer Tools可能是這樣的：~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0
注意：BrowserWindow.addDevToolsExtension接口 API 不能在app模塊尚未加載完之前被調(diào)用阎曹。
擴(kuò)展的名字將由接口BrowserWindow.addDevToolsExtension返回來(lái)伪阶，你可以將接口的名字傳入BrowserWindow.removeDevToolsExtension接口來(lái)卸載它。
支持的工具擴(kuò)展
Electron僅支持一小部分chrome.*接口处嫌，如果一些擴(kuò)展使用不支持的chrome.*接口會(huì)導(dǎo)致一些Chrome擴(kuò)展的功能不能使用栅贴。以下工具擴(kuò)展經(jīng)過(guò)測(cè)試保證可以在Electron中工作：
- Ember Inspector
- React Developer Tools
- Backbone Debugger
- jQuery Debugger
- AngularJS Batarang
- Vue.js devtools
- Cerebral Debugger
- Redux DevTools Extension
如果一個(gè)工具擴(kuò)展沒(méi)有工作我應(yīng)該怎么辦？
請(qǐng)確保這個(gè)擴(kuò)展仍然在被維護(hù)中熏迹，一些擴(kuò)展不能工作是因?yàn)镃horme瀏覽器的版本問(wèn)題檐薯，而我們不能做任何事情來(lái)使它工作。
然后在Electron的問(wèn)題列表中記錄一個(gè)bug注暗，并描述是擴(kuò)展的哪個(gè)部分沒(méi)有按預(yù)期工作坛缕。
