Electron 讓開發者可以使用 Web 技術（HTML、CSS、JavaScript）來建立桌面應用程式。然而，在開發過程中，對主程序（main process）進行偵錯可能會比渲染程序（renderer process）稍微複雜一些。本文將介紹如何利用 Chrome DevTools 的強大功能，透過幾個關鍵的命令列參數來遠端偵錯你的 Electron 應用程式。
為什麼需要遠端偵錯？
渲染程序就像是網頁，你可以直接在視窗上按右鍵選擇「檢查」來開啟 DevTools。但主程序則是在後台運行，沒有可視化的介面。這時，我們就需要一種方法，將主程序的執行環境與一個獨立的偵錯工具連接起來。
這就是 Chrome DevTools 的「遠端偵錯」功能發揮作用的地方。透過特定的命令列參數，我們可以在啟動 Electron 應用程式時，開啟一個偵錯伺服器，然後再用 Chrome 瀏覽器去連接這個伺服器。
關鍵命令列參數
以下是三個最常用的命令列參數，它們各自有不同的用途：
1. -inspect
這個參數會在啟動時，在指定的通訊埠上開啟一個偵錯伺服器。
用法：
electron --inspect=5858 your_app.js
說明：
-inspect會告訴 Electron 應用程式，在啟動時啟動一個偵錯伺服器。=5858指定了伺服器將在 5858 這個通訊埠上監聽。如果沒有指定通訊埠，它會自動選擇一個可用的通訊埠。- 當應用程式啟動後，你可以在 Chrome 瀏覽器中打開
chrome://inspect頁面，然後在「Remote Target」部分找到你的應用程式，點擊 inspect 即可開始偵錯。
應用場景：
- 即時偵錯： 適合在應用程式正常運行時，需要檢查變數、調用堆棧、或是執行一些程式碼片段的情況。
- 不中斷啟動： 應用程式會正常啟動，不會在第一行程式碼處暫停。
2. -inspect-brk
這個參數的功能與 --inspect 類似，但它會在應用程式的第一行程式碼處暫停執行，直到你連接偵錯器為止。
用法：
electron --inspect-brk=5858 your_app.js
說明：
-inspect-brk是 inspect 和 break 的組合。- 當應用程式啟動時，它會在
your_app.js的第一行程式碼（通常是require語句或函數定義）處暫停。 - 這讓你可以在程式碼開始執行之前，設定中斷點（breakpoints），以便逐步追蹤程式碼的執行流程。
應用場景：
- 啟動時偵錯： 適合需要追蹤應用程式啟動時的行為、檢查初始化流程中的變數、或是尋找啟動時的錯誤。
- 精準控制： 確保你不會錯過任何關鍵的程式碼執行時刻。
3. -remote-debugging-port
這個參數並不是用來偵錯主程序的，它的主要目的是用來為渲染程序啟用遠端偵錯功能。
用法：
electron --remote-debugging-port=9222 your_app.js
說明：
-remote-debugging-port會讓所有 渲染程序 (包括主視窗和任何新建立的視窗) 都在指定的通訊埠上開啟遠端偵錯。- 這在某些情況下非常有用，例如你無法直接右鍵點擊視窗來開啟 DevTools，或是需要從外部腳本控制多個渲染程序的偵錯。
- 當你使用這個參數後，可以在
chrome://inspect頁面中看到所有渲染程序的「Target」列表。
應用場景：
- 多視窗偵錯： 如果你的應用程式有多個渲染程序視窗，這個參數可以幫助你統一管理它們的偵錯。
- 自動化測試： 許多自動化測試工具會利用這個參數來控制瀏覽器行為。
總結與分析
| 參數 | 偵錯目標 | 是否中斷啟動 | 用途 |
|---|---|---|---|
--inspect | 主程序 | 否 | 適合即時偵錯、檢查運行中的變數。 |
--inspect-brk | 主程序 | 是 | 適合啟動時偵錯、追蹤初始化流程。 |
--remote-debugging-port | 渲染程序 | 否 | 適合多視窗偵錯、自動化測試。 |
結論：
- 如果你只是想在應用程式運行時看看主程序發生了什麼，使用
-inspect就足夠了。 - 如果你想在主程序啟動的當下就開始追蹤，以便抓住啟動時的錯誤，
-inspect-brk則是你的最佳選擇。 - 如果你需要對無法直接開啟 DevTools 的渲染程序進行偵錯，或是希望對多個視窗進行偵錯，請使用
-remote-debugging-port。
希望這篇文章能幫助你更好地使用 Chrome DevTools 來遠端偵錯你的 Electron 應用程式！