1. Electron的调试方式
在VSCode中调试Electron应用有两种方式：一种是调试渲染进程（Renderer Process），另一种是调试主进程（Main Process）。调试渲染进程要在打开应用后打开开发者工具，然后刷新页面。而调试主进程则需要在启动应用前设置一些配置，下面将详细介绍如何调试主进程。
2. 设置主进程的启动文件
在VSCode中，我们需要为Electron应用设置启动文件。打开VSCode，然后使用快捷键Ctrl + Shift + P打开命令面板，选择“Open”然后打开你的Electron应用。”
右键点击打开的应用文件夹，选择“New File”，然后输入“.vscode/launch.json”，创建一个新的配置文件。在配置文件中添加以下代码：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/electron/dist/electron.exe"
},
"args": [
"."
],
"console": "integratedTerminal",
"protocol": "inspector"
}
]
}
这是一个VSCode的配置文件，它告诉VSCode如何启动你的Electron应用程序并调试主进程代码。下面我将一步步解释每一条配置：
2.1 version
这是调试配置文件的版本。我们选择了“0.2.0”版本，因为它支持Node.js调试器。
2.2 configurations
这里是我们要配置的调试器选项的数组。我们只需要一个调试器，因此只需要一个配置。
2.3 name
这是我们为调试器命名的字符串。在命令面板和调试器界面上显示。
2.4 type
这里我们使用了“node”类型，因为主进程是由Node.js运行的。为了与之交互，我们需要使用Node.js调试器。
2.5 sourceMaps
这个配置告诉调试器使用源映射来处理代码。源映射是一种将代码映射到原始源代码的技术，这样就可以从VSCode中查看原始源代码。
2.6 cwd
这个配置将当前工作目录设置为VSCode打开的文件夹。我们希望在这个文件夹下执行应用程序。
2.7 runtimeExecutable
这个配置设置了Electron可执行文件的路径。我们使用了节点模块的Electron，因此我们需要告诉VSCode使用哪个可执行文件启动应用程序。注意，此处路径必须是Electron模块的node_modules/.bin/electron。
2.8 windows
这个参数指定Windows上的Electron可执行文件的路径。这是操作系统的差异。如果你不使用Windows，则可以忽略它。
2.9 args
这个配置提供了一个命令行参数数组，其中包含应用程序启动时使用的选项和参数。在这里，我们告诉Electron使用当前文件夹启动应用程序。换句话说，.代表当前文件夹的路径。
2.10 console
这个配置告诉调试器将控制台输出发送到集成终端。集成终端是与vscode集成的终端，用于输出调试信息。
2.11 protocol
这个配置指定使用的调试协议。在这里，我们选择了调试启动程序时使用的协议
3. 调试主进程
现在，我们已经设置了调试器。为了调试应用的主进程，我们需要执行以下步骤：
3.1 启动应用程序
要使用主进程调试器调试Electron应用程序，我们首先需要启动应用程序。打开命令面板并选择“Run”。然后选择您的配置文件。在这里，我们选择了“Debug Main Process”作为文件。你也可以使用快捷键F5或点击调试面板的“Debug Main Process”按钮启动应用程序。
3.2 调试JavaScript代码
现在我们已经启动了Electron应用程序，我们可以使用VSCode的调试器来查看我们的JavaScript代码。VSCode的调试器有许多有用的功能，如断点、监视器、控制台窗口和调试控制台等。你可以使用这些功能来查找代码的问题，或按步执行代码并查看其输出。
现在，我们已经学习了如何在VSCode中调试Electron应用程序的主进程代码。这将大大加快我们解决问题和开发应用程序的速度，因为我们可以使用VSCode丰富的调试功能，而不是单独使用Electron开发人员工具。