DevTools 擴充功能

Electron 支援 Chrome DevTools 擴充功能，可用於擴展 Chrome 開發人員工具的功能，以除錯熱門的網頁框架。

使用工具載入 DevTools 擴充功能

載入 DevTools 擴充功能最簡單的方式是使用第三方工具來自動化此過程。electron-devtools-installer 是一個熱門的 NPM 套件，其功能正是如此。

手動載入 DevTools 擴充功能

如果您不想使用工具方法，您也可以手動完成所有必要的操作。若要在 Electron 中載入擴充功能，您需要透過 Chrome 下載它，找到其檔案系統路徑，然後透過呼叫 ses.loadExtension API 將其載入到您的 Session 中。

以 React Developer Tools 為例

1. 在 Google Chrome 中安裝擴充功能。

2. 導航至 chrome://extensions，並找到其擴充功能 ID，這是一個雜湊字串，例如 fmkadmapgofadopljbjfkapdkoienihi。

3. 找出 Chrome 用於儲存擴充功能的檔案系統位置

   • 在 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。

4. 將擴充功能的位置傳遞給 ses.loadExtension API。對於 React Developer Tools v4.9.0，它看起來像這樣

   const { app, session } = require('electron')
   const path = require('node:path')
   const os = require('node:os')
   
   // on 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 會傳回一個 Promise，其中包含一個 Extension 物件，其中包含有關已載入擴充功能的元數據。此 Promise 需要先解析（例如，使用 await 表達式），然後才能載入頁面。否則，無法保證擴充功能會載入。
• 在發出 app 模組的 ready 事件之前，不能調用 loadExtension，也不能在記憶體內（非持久性）的 Session 上調用它。
• 如果您希望擴充功能被載入，則必須在每次啟動應用程式時調用 loadExtension。

移除 DevTools 擴充功能

您可以將擴充功能的 ID 傳遞給 ses.removeExtension API，以將其從您的 Session 中移除。已載入的擴充功能不會在應用程式啟動之間持久保存。

DevTools 擴充功能支援

Electron 僅支援 有限的 chrome.* API，因此在底層使用不受支援的 chrome.* API 的擴充功能可能無法運作。

以下 Devtools 擴充功能已經過測試，可在 Electron 中運作

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

如果 DevTools 擴充功能無法運作，我該怎麼辦？

首先，請確保擴充功能仍在維護中，並且與最新版本的 Google Chrome 相容。我們無法為不受支援的擴充功能提供額外支援。

如果擴充功能在 Chrome 上可以運作，但在 Electron 上無法運作，請在 Electron 的 issue tracker 中提交錯誤報告，並描述擴充功能的哪個部分未如預期般運作。