Debugging electron project under vscode

Time:2020-5-9

Recently, a set of software has been developed by using electron to record the debugging problems encountered

Tools required

  1. Vscode official website link;

  2. Electron, the version used this time is:

    • Electron: 1.7.9

    • Node: 7.9.0

    • Chromium: 58.0.3029.110

    • V8: 5.8.283.38

    • The direct use of the electronic quick start git link

  3. Nodejs official website link;

collocation method

The initial configuration of the project has been completed.

Modify the package.json file

"scripts": {
        //Debug means that the project needs to mount the debugger
        //BRK means that after the project is started, running the first line of code automatically pauses
        //5858 means debug listening port. If it is occupied, you can change it by yourself
        "start": "electron . --debug-brk=5858" 
    }

Modify the launch.json file, which belongs to the debugging configuration file used by vscode

{
        "name": "Launch",
        "type": "node",
        "request": "launch",
        //Program startup file, default to "${workspaceroot} / main. JS"
        "program": "${workspaceRoot}/dist/main.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "runtimeArgs": [
            ".",
            "--enable-logging"
        ],
        "env": {},
        //This property is used to configure typescript debugging. If not required, it is set to false
        "sourceMaps": true
    }

Start debugging

  1. Open debugging interface

  2. Drop down the top left debugging list

  3. Select launch. If it is set to another name in the previous step, it will also be modified

Problems encountered during debugging

  1. Only main process debugging is supported in electron. That is, you need to place the logic code in main.js before you can use breakpoints and other functions, and do not support the console printout function at this time.

  2. The rendering process, including the initial browserwindow, cannot debug nodejs code through breakpoints, but only through the development tool (Ctrl + Shift + I) that comes with the form. That is to say: the file introduced by use of require only supports console printing and output to the output window. Normal web logic code can be debugged using breakpoints, etc.

  3. It is suggested that the node code should be debugged in the main process, and introduced into the rendering process after it is confirmed to be correct, so as to reduce the difficulty of debugging.