Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試

場景

用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按鈕啟動才行