Let's talk about how to configure the JS debugging environment based on Node.js in VSCode

How to configure the debugging environment in VSCode? The following article will introduce to you how to configure VSCode to configure JavaScript-based Node.js debugging environment. I hope it will be helpful to you!

1. Install VSCode and Node.js

Preface: After doing scientific research, it is rare to Summarizing and accumulating, it may be that the solutions to problems that arise in scientific research are more diverse and flexible. Let alone, it is just laziness hahahahaha. It’s no longer necessary to write a blog to record the environment configuration after doing front-end work. Okay, let’s stop talking nonsense and start the text.

                                                                                                                                                                                                                                The environment configured in this article are mainly for breakpoint debugging of individual JS files, mainly to debug the code in LeetCode.

My environment:

• Visual Studio Code 1.66.0
• Node.js 16.14.2
• Windows10 64-bit

I won’t go into details about the download of VScode. I will mainly record the installation of Node (in fact, I have installed it many times before). [Recommended learning: vscode tutorial, Programming teaching]

1. First go to the official website to download the corresponding version: https://nodejs.org/ en/
   
2. #Start the installation and you can customize the installation path.
   
3. Select Add Path here, the system variables will be automatically set, but the user variables are not automatically set, you can add them manually if necessary.
   
4. Test whether the installation is successful. Enter node -v and npm -v on the command line. If the version number is displayed, the installation is successful. , and already have the correct environment variables.
   
   It is safer to add user variables manually, because I have not added them before. Sometimes node.js cannot find the path in VSCode, although restarting will solve the problem. , but after playing it twice, I always felt that something was not right, so I added it. It is best to add it in advance when installing.
   
5. Here, Node.js installation is complete

##2. VSCode configuration

First install two plug-ins in VSCode, one is responsible for running
1. Code Runner, and the other is the JS syntax prompt JavaScript(ES6) code snippets.
   
Create a configuration file, open your code folder, create a test.js first, and write a few test codes. Then click on the debugging tools in the left sidebar and choose to create the launch.json file.
2. 
   
Select the node.js debugging environment, and the test code can also be used in the picture.
3. 
   
The configuration file will be automatically generated at this time. Pay attention to the key point to modify, and do not write it down here. Change the
4. program attribute to ${file}, so that the currently debugged file can be identified. There is no need to change the file name here every time. Just F5 to debug the file.
   
At this point, the configuration is actually done. The file structure at this time is like this. You can directly put a breakpoint in the test.js file and press F5 to debug
5. 
   
   

3. Possible problems

If you start debugging VSCode after the configuration is completed, it will report an error: Unable When a runnable Node is found on Path, restarting VSCode and then debugging will be no problem.

A little emotion: For this year’s autumn recruitment work, the front-end learning journey has begun again. If you want to do your job well, you must first sharpen your tools, so I have to start writing a blog about configuring the environment. As expected, the next article will be about configuring Vue in VSCode. I wrote a banlakeji article during my internship which was not very good, so now I have to go through it again and complete it. Since you have chosen to work in technology, you have to keep doing it down-to-earth. If you can't love one line of work, you have to do one line of work, love one line of work as much as possible, and rush!

For more knowledge about VSCode, please visit: vscode Basic Tutorial!

The above is the detailed content of Let's talk about how to configure the JS debugging environment based on Node.js in VSCode. For more information, please follow other related articles on the PHP Chinese website!