vscode debugging code, efficiency increased by 20%

Preface

Whether at work or debugging source code, debugging is essential. Finding the correct debugging method can improve our work efficiency by at least 20%, so that we can make more 20% of the time is spent fishing, fishing makes me happy (^▽^)

From now on, let us abandon the console.log old shabby car and replace it with a debugger sports car

Debug initialization

Let’s take an example first. For example, we want to debug the lerna source code

Because we need to debug the source code in the terminal, we choose node.

The initial terminal debugging configuration is as follows

Detailed explanation of common attributes

Required attribute

The one that has been modified more often is probably name. The other two are in node and generally will not be modified.

Attribute name	Meaning	Attribute value example
type	Debugger type, can also be considered as debugging language	`node => pwa-node`, `chrome => pwa -chrome`
request	The request type for starting `debug` mode, only two values	`launch`: launch (commonly used), `attach`: attach
name	The name of this startup configuration is used for users to distinguish themselves	Customized, just understand it yourself, for your own use

Other commonly used attributes

Attribute	Meaning
outFiles	Specify the path where the `Source maps` files are located
skipFiles	Specify the files to skip in a single step, which is `debugger`Do not follow up to see the source code
program (attribute only available for launch)	The entry file address of the startup project (that is, the one to be executed The path of `js` must be accurate to `js`)
webRoot (a property only available in launch)	The path is the root directory of the code
url (a property only available for launch)	The server address to be monitored

Notice: Sometimes breakpoints cannot be hit well because program and webRoot are not configured correctly.

The most main attribute here is program (program in Chinese means program, here it refers to the path of the program file to be run). When debugging the source code, you must find the entry file. , and this program points to the entry file. The entry file address of lerna is lerna/core/lerna/cli.js, so we need to make programPoint to this address. At this time our launch.json is as follows

{
  
  
  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Lerna source code debugging",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/core/lerna/cli.js"
    }
  ]
}

Debugging process

Put breakpoints in the source code

Click the debug tool on the left side of vscode
Then select the debug file we configured
Click the green debug button to start debugger

At this point our breakpoint is hit

We can enter the parameters to be queried here

Variables, execution stack, breakpoint and other information will appear on the left

VSCode Debug button function introduction

The functions of the buttons from left to right are:

Button 1: Run/Continue F5, jump directly to the next breakpoint;
Button 2: Single-step skip (also called step-by-step process) F10, single-step execution according to the statement. When there is a function, the function will not be entered;
Button 3: Single-step debugging (also called statement-by-statement) F11: When there is a function, click this button to enter the function;
Button 4: Single-step out ?F11: If there is a loop, clicking this button will execute the statement outside the loop;
Button 5: Restart F5;
Button 6: Stop ?F5.

node file debugging

Create a new node file in the root directory and name it node.js

Create the launch.json file according to the above debugging process, as follows

{

  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/node.js"
    }
  ]
}

The file address of program points to the node.js file we created

notice: If you find that the breakpoint is invalid, the reason may be that you have not called the function containing the breakpoint. You must call it to take effect.

Next, just follow the debugging process.

debugger mode of node

Sometimes we need to use the command line to start a file, hoping that our breakpoint can be triggered at this time. How to do this?

Directly start a terminal in debug mode, and the node started in it will enter debug mode.

chrome debugging

Create a new html file in the root directory and name it index.html

Add a new configurations in launch.json

 {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8088",
      "webRoot": "${workspaceFolder}"
    },

react

Use create-react-app to generate react code and create a new myapp file directory

 {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/myapp"
    },