跳到主要內容

在 Windows 上除錯

如果您在使用 Electron 時遇到當機或問題，且您認為並非由您的 JavaScript 應用程式所引起，而是 Electron 本身所導致，那麼除錯可能會有點棘手，尤其是對於不熟悉原生/C++ 除錯的開發人員而言。然而，透過使用 Visual Studio、Electron 託管的符號伺服器和 Electron 原始碼，您可以啟用逐步除錯，並在 Electron 的原始碼中設定中斷點。

另請參閱：在 Chromium 開發人員網站上，有大量關於 Chromium 除錯的資訊，其中許多資訊也適用於 Electron：在 Windows 上除錯 Chromium。

需求條件​

  • Electron 的偵錯版本：最簡單的方法通常是自行建置，使用 Windows 建置說明 中列出的工具和先決條件。雖然您可以附加並除錯直接下載的 Electron，但您會發現它經過高度最佳化，這使得除錯更加困難：除錯器將無法向您顯示所有變數的內容，並且由於內聯、尾部呼叫和其他編譯器最佳化，執行路徑可能看起來很奇怪。

  • Visual Studio 搭配 C++ 工具：Visual Studio 2013 和 Visual Studio 2015 的免費社群版本皆可使用。安裝完成後，設定 Visual Studio 以使用 Electron 的符號伺服器。這將使 Visual Studio 能夠更了解 Electron 內部的運作方式，從而更輕鬆地以人類可讀的格式呈現變數。

  • ProcMon：免費的 SysInternals 工具 允許您檢查程序的參數、檔案控制代碼和登錄作業。

附加並除錯 Electron​

若要開始除錯工作階段，請開啟 PowerShell/CMD 並執行您的 Electron 偵錯版本，並使用要開啟的應用程式作為參數。

$ ./out/Testing/electron.exe ~/my-electron-app/

設定中斷點​

然後，開啟 Visual Studio。Electron 不是使用 Visual Studio 建置的，因此不包含專案檔 - 但您可以「以檔案」方式開啟原始碼檔案，這表示 Visual Studio 將自行開啟它們。您仍然可以設定中斷點 - Visual Studio 會自動判斷原始碼與附加程序中執行的程式碼相符，並據此中斷。

相關的程式碼檔案可以在 ./shell/ 中找到。

附加​

您可以將 Visual Studio 除錯器附加到本機或遠端電腦上執行的程序。程序執行後，按一下「偵錯 / 附加至程序」(或按下 CTRL+ALT+P) 以開啟「附加至程序」對話方塊。您可以使用此功能來除錯在本機或遠端電腦上執行的應用程式，並同時除錯多個程序。

如果 Electron 是在不同的使用者帳戶下執行，請選取 顯示所有使用者的程序 核取方塊。請注意，根據您的應用程式開啟的 BrowserWindow 數量，您會看到多個程序。典型的單視窗應用程式會導致 Visual Studio 向您顯示兩個 Electron.exe 項目 - 一個用於主要程序，另一個用於渲染程序。由於清單僅提供名稱，因此目前沒有可靠的方法可以判斷哪個是哪個。

我應該附加到哪個程序？​

在主要程序中執行的程式碼 (即在您的主要 JavaScript 檔案中找到或最終執行的程式碼) 將在主要程序內部執行，而其他程式碼將在其各自的渲染程序內部執行。

除錯時，您可以附加到多個程式，但除錯器一次只能有一個作用中的程式。您可以在 偵錯位置 工具列或 程序視窗 中設定作用中的程式。

使用 ProcMon 觀察程序​

雖然 Visual Studio 非常適合檢查特定的程式碼路徑，但 ProcMon 的優勢實際上在於觀察您的應用程式對作業系統執行的所有操作 - 它擷取程序的檔案、登錄檔、網路、程序和設定檔詳細資訊。它嘗試記錄 所有 發生的事件，並且可能相當繁瑣，但如果您想了解您的應用程式對作業系統執行了什麼以及如何執行，它可能是一個寶貴的資源。

若要了解 ProcMon 的基本和進階除錯功能，請查看 Microsoft 提供的這個影片教學。

使用 WinDbg​

可以使用 WinDbg 除錯渲染程序中的當機和問題。

若要使用 WinDbg 附加並除錯程序

  1. 將 --renderer-startup-dialog 作為命令列旗標新增至 Electron。
  2. 啟動您要除錯的應用程式。
  3. 將出現一個對話方塊，其中包含 pid：「Renderer starting with pid: 1234」。
  4. 啟動 WinDbg 並在應用程式選單中選擇「檔案 > 附加至程序」。
  5. 從步驟 3 的對話方塊中輸入 pid。
  6. 查看除錯器將處於暫停狀態，並且應用程式中會有一個命令列可供輸入文字。
  7. 在上述命令列中輸入「g」以啟動偵錯目標。
  8. 按下 Enter 鍵以繼續程式。
  9. 返回對話方塊並按下「確定」。