This is the fourth day of my participation in Gwen Challenge

Don’t forget to give me a thumbs up at ❤️

In the process of writing NodeJS applications, THE VSCode Debugger is like a godsend. By adding breakpoints to view local variables and modifying the code to run again, I cleared up a lot of problems and improved efficiency.

Today let me introduce some methods of testing NodeJS by VSCode debugger. There is always one for you!

Take the file as the entry point

We can run a NodeJS file directly from the command line nodefile.js. The VSCode debugger can do the same. Only need to:

  1. Open a NodeJS file
  2. Switch to theRUN AND DEBUGpanel
  3. Click on theRun and Debugbutton
  4. Select from the environment options panel that opensNode.js

You can see that the debug console opens on the right, a debug script is printed, and the program pauses at the preset breakpoint:

But soon you find that the running file is wrong?? Json in the current workspace home directory and if VSCode defines the main script entry, it will ignore the currently open file and use it as the entry.

To change this behavior, prepare a launch.json file to define it.

More options to customize launch.json

Clicking on the Create a launch.json file link in the RUN AND DEBUG panel automatically creates a.vscode directory AND a launch.json file.

The content of the document is as follows:

Open the link in the comments to see the full description of the options. But most of the time we just need to know that its main configuration items include:

  • Specify the runtime environment that we use"type": "node"The specified
  • NodeJS needs to start with a JS file, which we use"program": "${workspaceFolder}/script.js"The specified
  • If the file requires some parameter input, add"args": []options
  • If you need some environment variable input, add it"env": { "env_name": "env_value" }options

For example, you can debug ts source files with TS-Node by modifying the automatically generated launch.json file like this:

{
  "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "Launch Program"."skipFiles": ["<node_internals>/**"]."program": "${workspaceFolder}/node_modules/.bin/ts-node"."args": ["${workspaceFolder}/src/index.ts"]]}}Copy the code

The command line script is ts-node SRC /index.ts.

After setting up, click the Launch Program green arrow icon at the top of the RUN AND DEBUG panel to start debugging.

The script command is the entry point

If the program entry has the scripts startup scripts configured in package.json in the workspace, these scripts can be opened in addition to configuring launch.json.

You can click the Show All Automatic Debug Configurations link in the palette:

Or select Node.js from the Launch Program drop down box:

The following options box will pop up:

These are the scripts I configured in package.json, hit Enter, and debugging starts.

Take the test case as the entry point

My personal preference is to use test cases as the entry point. Compared with the above methods, the test case entry can urge me to write more appropriate test cases, greatly reduce the scope of debugging, and better control the input parameters. However, these entries can be quite troublesome to configure themselves, so I can use VSCode extensions on the market, such as Jest Test Explorer, which is very convenient.

Jest Test Explorer has a panel in the left sidebar that lists all existing Jest Test cases for quick running and debugging:

Also display quick links to run and debug on the test block:

Click on the Debug icon or link to enable VSCode debugging without any additional configuration. Is it convenient?

Guest officer, a praise to go ❤️!

Phase to recommend

  • Jest test series
  • React official announcement v18 update
  • Two paging apis that the front end must understand
  • V8’s garbage collection mechanism
  • Use the Typescript compiler to parse and retrieve types in your code