DevTools 擴充功能

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

使用工具載入 DevTools 擴充功能

載入 DevTools 擴充功能最簡單的方法是使用第三方工具自動化此過程。electron-devtools-installer 是一個流行的 NPM 套件，可以做到這一點。

手動載入 DevTools 擴充功能

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

以 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 會傳回一個帶有 Extension 物件的 Promise，其中包含有關已載入擴充功能的元數據。此 Promise 需要在載入頁面之前解析（例如，使用 await 運算式）。否則，無法保證擴充功能會載入。
• 在發出 app 模組的 ready 事件之前，無法呼叫 loadExtension，也無法在記憶體內（非持久）工作階段中呼叫。
• 如果您希望載入擴充功能，則必須在每次啟動應用程式時呼叫 loadExtension。

移除 DevTools 擴充功能

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

DevTools 擴充功能支援

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

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

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

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

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

如果擴充功能在 Chrome 上運作，但在 Electron 上無法運作，請在 Electron 的 問題追蹤器 中提交錯誤，並描述擴充功能的哪個部分未如預期般運作。