Vscode debugging node. js

In the process of development, it is almost impossible to write a no-flaw program at once, breakpoint debugging code is a common requirement.

As a front-end development engineer, the JavaScript program we developed in the past is run on the browser side, using the developer tools provided by Chrome to facilitate the debugging of source breakpoints. The steps are four, the details are not table, roughly summarized as follows:

1. Open the chrome developer tool;
2. Click into the Sources tab, on the left side of the page you can see the JS code directory;
3. Find the source file where you need to set breakpoints, click the left mouse button to the left of the line of code that needs interruption, you can set a breakpoint, if your code is uglify, you need to import the corresponding source-map to map the source.
4. Refresh the page (if the location of the breakpoint is set is an event handler, the event can be triggered directly), the code runs to the breakpoint at the time, the program will be suspended, then with the mouse hover can see the current variable values, and to determine whether the program is working properly.

However, when we use JavaScript to develop a node. JS program running on the server, the Chrome developer tool is temporarily useless. Although there are ways to debug on chrome, this is not the scope of our discussion today.

Also, say with console.log of that classmate, please don't speak first ...

In fact, many Ides have integrated the functionality of debug, including the newer version of Webstorm, which supports node. js debugging very well.

But many developers feel that the IDE is too heavy, there is no more lightweight tools to implement breakpoint debugging it? Today we're going to give you an Amway. The method of debugging breakpoints on Vscode.

Vscode In addition to Out-of-box support JavaScript and typescript, but also support node. js debugging, is simply for the front-end engineers, right ...

The premise of Debugging node. JS is that you have a node. JS environment installed on your computer.

What the? How to install node. js? give you a little hint: open Baidu, search "Install node. js", well, can not prompt more.

This article takes the Debug Express application as an example and assumes that you have installed the node. JS runtime Environment.

Create an express app

We use Express-generator to create a new Express application.

1. In the global installation Express-generator

A. Open terminal, enter: npm install express-generator -g MacBook users when the global installation remember to add sudo in front

B. After the installation is complete, in the terminal input express -v if you see the information shown, the installation is successful.

2. Generate the Express application directory, assuming that the name of this application is MyApp in the terminal input express myapp in the current directory generated a MyApp directory, the directory structure is as follows:

As you can see, this little app has been perfectly formed, with node server configuration, Public resources folder, mentor folder, and routing configuration.

3. Run the Express app

A. Entering instructions in the terminal

`cd myapp && npm install`

can go into the project directory and install all dependencies, this step may take a long time and wait patiently for the installation to complete.

B. then enter the instructions

`npm start`

You can start the app.

When we visit localhost:3000 in the browser, we can see the following page:

This means that the Express app works, and then we can use Vscode to debug the code.

Tip: To avoid port conflicts when debugging, let's go back to the terminal that just ran the Express app, CTRL + C to close the running Express app.

Debug Express Applications

1. Enter the Vscode interface and click the fourth bug-like button on the left side of the interface to enter the Debug interface:

2. Click the "No Configuration" drop-down menu at the top of the page and select "Add Configuration".

3. Select the node. JS Environment.

4. After the selection is complete, a. Vscode directory is generated in the root directory of the project, which contains the various configurations of the Vscode editor. Now this directory contains a configuration file named Lanuch.json, the contents of the configuration file are as follows:

The most important configuration item is the "Program" field, which defines the entry for the entire application and launches the application from the portal when the debugger is opened.

We found that the current field has a value, do not panic, that is because vscode in the initialization of this configuration file, will see if Package.json contains a key named start scripts, if any, will be the start configuration of the contents as " program field value.

5. Click the Start Debug button (green triangle) to start debugging. At this point the interface will appear a debug control Panel, the bottom right of the page will appear a debug console, you can view the information you output, the interface will appear a status bar, the current orange color indicates that the application is running normally, as shown in:

6. Once again, we visited localhost:3000 in the browser, we will find that the page can be opened and the application has started normally.

7. Next we start setting breakpoints for the app. We open the Myapp/routes/index.js file, which configures the route where the root path is applied, and the current processing is to return a page, passing in the string "Express" as a parameter to the view.

8. We can set a breakpoint by clicking the left mouse button on line number 6. Note that you should turn off debugging before adding breakpoints by clicking the Stop button (the Red Square) in the Debug Control panel above the interface.

9. After setting the breakpoint, restart debugging, and then access the localhost:3000 in the browser, this time, the shape of the breakpoint has changed, the program stays at the breakpoint, the Debug Control Panel button has also changed, from left to right in turn is a single step skip, Single step debugging, step out, restart, stop debugging. These are the common breakpoint debug commands. After setting the breakpoint, restart debugging, and then access the localhost:3000 in the browser, this time, the shape of the breakpoint has changed, the program stays at the breakpoint, the Debug Control Panel button has also changed, from left to right in turn, one-step skip, single-step debugging, step out, restart, stop debugging. These are the common breakpoint debug commands.

10. On the left side of the interface, you can view the current context or set the variable listener.

11. Prevent the mouse from the variable or parameter before the breakpoint, or view the current value of the variable, and experience the same debugging as the Chrome Developer tool.

Well, open the Vscode node. JS Debug Tour!!

Transferred from: https://cnodejs.org/topic/58f376fec749f63d48fe9548

Vscode debugging node. js