preface

When I was a small chicken, I was asked what I used to debug. I blushed and said THAT I only knew how to debug with console. Ashamed I want to continue to master vscode debugging methods, but at that time did not find a good tutorial, plus the related foundation is poor, can only be a half-knowledge. Now evolved as a big vegetable chicken, I summarize the basic VScode debugging

Basic debugging

Vscode is very friendly to debugging js code. It has a built-in node debugger plug-in. If you want to use vscdoe to debug python, c++, etc., you need to install the plug-in later

The basic debugging method is simple, writing a simple piece of code

Then find the little triangle arrow in the debug item

You can then enter the Node debugging screen

What! Is it easy to achieve the effect I want? It is better than simply coming out one by one

A further

While the above method is simple, it is only suitable for simple situations, and for most debug scenarios, it is better to create a launch configuration file because it allows you to configure and save debugging setup details

launch.json

When you first create launch.json, vscoed will automatically detect your debug environment for you, start the debug but if it fails, it will give you a choice

Then it will create a.vscode folder under your current workspace with the launch.json file we want. In short, we can configure debug from this file

If your launch.json file looks like this (just to get the idea)

{" Version ": "0.2.0", "configurations": [{"type": "node", "request": "launch", "name": "launch Program", "skipFiles": ["<node_internals>/**"], } ] }Copy the code

Among them

The type attribute refers to the type of your debug. I’ll show you two common types of Node and Chrome

Request refers to request configuration types, atmosphere launch and Attach

Name refers to the name of your debug configuration, which will appear in the start arrow when selecting the specific mode

These are essential

More on this later, see the documentation here for more information

Attach or launch

These are two core debugging modes that handle workflow in different ways

Basically launch launches another application in the same tool that you’re debugging, which we used vscode, which is good for the browser approach you’re used to

Attach means attach a debugger to your developer tools

chrome debugger

In addition to using the above type for node debugging, we can also use the called Chrome workbench to debug

Here’s a plugin to install the Debugger for Chrome I mentioned in a previous post when you buy a new MAC

When it’s installed

You can add the configuration to our launch.json!

Suppose we add such a configuration

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "file": "${workspaceFolder}/index.html"
},

Copy the code

File value is the file that’s open and the workspaceFolder is our current workspace

Let’s say our index.html looks like this and put a breakpoint

Go to our Chrome debug page

conclusion

So that’s the basic introduction to debugging, but there’s more to it than that, and I’ll continue to learn and refine this article

If the article has helped you a little, please give me a thumbs-up thank you

reference

Code.visualstudio.com/docs/nodejs… Code.visualstudio.com/docs/nodejs…