“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

preface

In order to improve work efficiency, we need to use debugging tools to find and solve problems in time when developing Electron application.

VSCode is currently the most popular code editor and I developed most of my code on it, and Electron is no exception. Today, I’m going to share how to debug the Electron main process code on VSCode.

The steps described in this article are based on those who are familiar with or know VSCode debugging methods, please use them as needed!

Set up the environment

The project used in this article is electronic-quick-start.

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

After the above steps, the basic Electron application development environment has been built. Check the package. The 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"}}Copy the code

We can run NPM run start on the terminal to see the result:

As you can see, the setup is complete! Then enter the development debugging link.

Debug configuration

Open it with VSCode and do the following:

Generate the lauch. Json file with the following configuration:

{
    // Use IntelliSense to learn about related attributes.
    // Hover to view descriptions of existing properties.
    / / for more information, please visit: 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"}}]Copy the code

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".// Main file path]]}}Copy the code

Start debugging

Once we have done the environment setup and file configuration above, we are ready for pleasant debugging (breakpoints as needed) :

VSCode debugging method we should be more familiar with, here will not be repeated, I hope you debug happy, happy touch fish!

conclusion

The method introduced in this article is only one of the methods to debug the Electron main process code, which is to throw a stone to attract others. If you have a better debugging method, please leave a message in the comment area and look forward to interacting with you!

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!