場景

用HTML和CSS和JS構建跨平臺桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

在上面搭建起來Electron的HelloWorld程序后，怎樣對程序進行調試。

Electron分為渲染進程和主進程。
渲染進程：用戶所看到的web界面就是由渲染進程描繪出來的。包括html，css和js。

主進程：Electron 運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創建web頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

渲染進程的調試

就是熟悉的網頁的調試，運行項目，View-Toggle Developer Tools

?

然后就可以打開常見的網頁調試的頁面

?

主進程調試-通過瀏覽器

首先打開項目的package.json

添加如下代碼

--inspect=5858

這里的5858是開放的調試的端口號

?

然后啟動項目，此時控制臺會提示

?

然后打開谷歌瀏覽器輸入

chrome://inspect

?

點擊Configure

?

將上面開放的調試端口輸入，點擊Done,此時瀏覽器會自動連接項目

?

點擊Target下的inspect

?

就會進入調試頁面

主進程調試-通過VSCode

打開VSCode下的Debug下的launch.json

?

然后將launch.json改為

{"version": "0.2.0","configurations": [{"name": "Debug Main Process","type": "node","request": "launch","cwd": "${workspaceRoot}","runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron","windows": {"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"},"args" : ["."],"outputCapture": "std"}]}

然后就可以在VSCode打斷點進行調試

?

此時要進入斷點，要通過debug按鈕啟動才行

總結

以上是生活随笔為你收集整理的Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。