A brief discussion on how to debug the main process code of Electron application in VSCode

How to debug the main process code of Electron application in

VSCode? The following article will introduce you to the VSCode debugging method. I hope it will be helpful to you!

When developing Electron applications, in order to improve work efficiency, we need to use debugging tools to discover and solve problems in time.

VSCode is the most popular code editor at the moment. Most of my codes are developed on it, and Electron applications are no exception. Today, I will share how to debug the main process code of Electron application on VSCode. [Recommended study: "vscode introductory tutorial"]

The steps described in this article are based on those who are already familiar with or know the VSCode debugging method, please follow your needs!

Building environment

The project used in this article is electron-quick-start (https://github.com/electron/electron-quick-start#/).

$ git clone https://github.com/electron/electron-quick-start
$ cd ./electron-quick-start
$ npm install

After the above steps, the basic Electron application development environment has been set up. View package.json:

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "16.0.6"
  }
}

We can run npm run start in the terminal to view the running results:

As you can see, the environment construction is complete! Next, enter the development and debugging phase.

Debug configuration

Open with VSCode and do the following:

Generate the following configuration lauch.json File:

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/main.js"
        }
    ]
}

We modify its configuration as follows:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
            },
            "args": [
                "./main.js",  // 主文件路径
            ]
        }
    ]
}

Start debugging

After we have completed the above environment setup and file configuration, we can have fun debugging (Put breakpoints as needed):

Everyone should be familiar with the debugging methods of VSCode, so I won’t go into details here. I hope everyone has a happy debugging and happy fishing!

Conclusion

The method introduced in this article is just one of the ways to debug the Electron main process code. It can be regarded as an introduction. If you have a better debugging method, please leave a message in the comment area to communicate. Looking forward to it. Interaction with everyone!

~This article is over, thank you for reading!

For more knowledge about VSCode, please visit: vscode tutorial! !

The above is the detailed content of A brief discussion on how to debug the main process code of Electron application in VSCode. For more information, please follow other related articles on the PHP Chinese website!