electron调试html,Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试

场景

用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：

在上面搭建起来Electron的HelloWorld程序后，怎样对程序进行调试。

Electron分为渲染进程和主进程。

渲染进程：用户所看到的web界面就是由渲染进程描绘出来的。包括html，css和js。

主进程：Electron 运行 package.json 的 main 脚本的进程被称为主进程。

在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

注：

实现

渲染进程的调试

就是熟悉的网页的调试，运行项目，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打断点进行调试