Electron 開發(fā)者工具擴(kuò)展

Electron 支持 Chrome DevTools 擴(kuò)展，可用于擴(kuò)展 Chrome 的開發(fā)人員工具的功能，以調(diào)試流行的 Web 框架。

使用工具加載 DevTools 擴(kuò)展

加載 DevTools 擴(kuò)展的最簡單方法是使用第三方工具，來為您實(shí)現(xiàn)自動(dòng)化過程。 electron-devtools-installer 是一個(gè)受歡迎的 NPM 包。

手動(dòng)加載 DevTools 擴(kuò)展

如果你不想使用工具加載，你也可以手動(dòng)完成所有必需的操作。要在 Electron 中加載擴(kuò)展，您需要通過 Chrome 下載它，找到它的文件系統(tǒng)路徑，然后通過調(diào)用 ses.loadExtension API 將它加載到您的 Session 中。

下面以React Developer Tools為例：

1. 在 Google Chrome 中安裝擴(kuò)展。

2. 打開chrome://extensions，找到擴(kuò)展程序的ID，像 fmkadmapgofadopljbjfkapdkoienihi 一樣的 hash 字符串。

3. 找到 Chrome 擴(kuò)展程序的存放目錄：

   • 在Ｗindows 下為 %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。

4. 將擴(kuò)展的位置傳遞給 ses.loadExtension API。 對(duì)于 React Developer Tools v4.9.0, 它看起來像：

    const { app, session } = require('electron')
    const path = require('path')
    const os = require('os')
   
    // 在 macOS 下
    const reactDevToolsPath = path.join(
      os.homedir(),
      '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
    )
   
    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(reactDevToolsPath)
    })

說明：

• loadExtension 返回一個(gè)包含 擴(kuò)展對(duì)象 的 Promise，其中包含加載的擴(kuò)展有關(guān)的元數(shù)據(jù)。 在加載頁面前，此 Promise 需要被 resolve（例如使用 await 表達(dá)式）。 否則將無法保證擴(kuò)展被加載。
• loadExtension 無法在 app 模塊 ready 之前調(diào)用，也不能被內(nèi)存(非持久) 會(huì)話調(diào)用。
• 如果您希望加載擴(kuò)展，則必須在應(yīng)用的每次啟動(dòng)時(shí)調(diào)用loadExtension 。

刪除 DevTools 擴(kuò)展?

您可以將擴(kuò)展的 ID 傳遞給 ?ses.removeExtension? API，以將其從您的 Session 中刪除。 每次應(yīng)用重新啟動(dòng)，擴(kuò)展不會(huì)持續(xù)。

DevTools 擴(kuò)展支持

Electron 僅支持 有限的 chrome.* APIs ，所以使用不支持的 ?chrome.*? 擴(kuò)展的 APIs 可能無法工作。

以下 DevTools 擴(kuò)展程序已經(jīng)通過測試，可以在 Electron 中正常工作：

• Ember Inspector
• React Developer Tools
• Backbone Debugger
• jQuery Debugger
• AngularJS Batarang
• Vue.js devtools
• Cerebral Debugger
• Redux DevTools Extension
• MobX Developer Tools

如果 DevTools 擴(kuò)展不工作，我該怎么辦？?

首先，請(qǐng)確保擴(kuò)展仍在維護(hù)中，并與最新版本的 Google Chrome 兼容。 我們不能為不受支持的擴(kuò)展提供額外支持。

如果擴(kuò)展可以在 Chrome 上運(yùn)行，但不能在 Electron 上運(yùn)行， 在 Electron 的 issue Tracker 中提交一個(gè)錯(cuò)誤，并描述擴(kuò)展的哪個(gè)部分不能按預(yù)期工作。