Electron:使用 VSCode 进行主进程调试

柔情只为你懂 2022-10-02 07:45 174阅读 0赞

# 文档 #

[官网说明 使用 VSCode 进行主进程调试][_ VSCode]

# 点击vscode中的调试按钮，或者按F5 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

他会提示你进行配置，会产生一个lauch.json文件，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]  
或者直接新建也行

*  在当前项目下面新建`.vscode`文件夹
 *  在这个`.vscode`里面新建`launch.json`文件
 *  在`launch.json`文件里面输入下面内容

# 在lauch.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"
        }
      ]
    }

# 调试 #

在主程序`main.js`中打断点，然后按`F5`进行调试，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 2]

# 渲染进程 #

这就不用说了吧。。。。直接在chrome的控制台打断点~~~~~~~~~

[_ VSCode]: https://electronjs.org/docs/tutorial/debugging-main-process-vscode
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220113/019987ca56e14decbfa7fd2380015438.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]: /images/20220113/27e416b585434eafa82456ac5acfe7e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 2]: /images/20220113/564b41fd732e4c959483bb6e7f3a8596.png