跳至主要內容

在 Windows 上除錯

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

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

需求​

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

  • 具有 C++ 工具的 Visual Studio：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. 返回對話方塊並按下「確定」。