【Electron】Electron 調試

electron有主進程和渲染進程，所以調試部分也分為兩大塊，即調試主進程和渲染進程

一、調試渲染進程

調試渲染進程和調試瀏覽器的方法基本差不多。在運行electron 應用之后可以通過下面兩種方式打開調試工具

1.手動打開

View->Toogle Developer Tools的方式打開
如下圖：

2.代碼打開

除了上述手動打開的方式之外，也可以通過代碼自動打開調試的控制台。在主進程(一般默認的就是main.js)中使用 const mainWindow = new BrowserWindow實例化窗體的時候，加上如下一句功能代碼：

// Open the DevTools.
mainWindow.webContents.openDevTools({
  mode:'bottom'
});

其中 openDevTools 接受一個參數，這個參數是個配置對象，一般會根據自己開發習慣在里面配置控制台打開的方向。當然也可以在控制台打開之后自己調整。

通過上述兩種方式之一打開之后會發現后面的調試其實和瀏覽器中的調試面板差不多。可以查看當前的dom樹，請求的面板，以及性能等問題：

二、調試主進程

在一個electron 應用中有且只有一個主進程。調試主進程的方式也有兩種，第一種是配合chrome瀏覽器來進行debugger，第二種是結合開發工具，這里以vscode為例

1.結合chrome

1.1使用 --inspect=[port] 來設置一個運行端口，比如在package.json中配置如下腳本並在終端輸入 npm run start： 

"scripts": {
     "start": "electron --inspect=5858 .",
 }

1.2瀏覽器輸入： chrome://inspect，配置Discover network targets的端口為上述端口（5858），點擊下方inspect

 

 

 

1.3第二步點擊inspect之后就會彈出一個調試主進程的瀏覽器窗口，就可以在這個窗口中去debugger當前electron應用的主進程了。如下：進入Sources標簽，ctrl+p輸入main.js查找主進程

 

 

 

 

2.結合vscode

       ...詳情見：https://blog.csdn.net/weixin_38080573/article/details/105048111