Visual Studio Code调试Electron 的ui

Visual Studio Code是一款强大的代码编辑器，对于 Electron 应用程序的调试支持非常全面。如果你想在 VSCode 中调试 Electron UI (用户界面)，可以按照以下步骤操作：

1. 安装插件：首先，安装 `Debugger for Chrome` 插件，它允许你在 VSCode 中调试基于 Chromium 的应用，包括 Electron。可以在 Extensions Market 搜索并安装它。

2. 设置配置文件：在 `.vscode` 文件夹下创建或编辑 `launch.json` 文件，配置启动配置。你需要添加针对 Electron 的配置，例如：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Debug Electron App",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:8080", // 你的Electron应用的端口
         "webRoot": "${workspaceFolder}",
         "sourceMapPathOverrides": {
           "webpack:///src/*": "${webRoot}/*"
         }
       }
     ]
   }   

3. 启动调试：在 VSCode 调试视图（Ctrl + Shift + D 或者 F5），选择“Debug Electron App”配置，然后点击“Start Debugging”。

4. 断点和控制：设置断点在源代码中，当运行到断点处会暂停。你可以单步执行、查看变量值、检查堆栈等标准调试功能。