This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

1 introduction

In code writing or bug fixing, console can be used to solve simple values or problems. Some people even think console is a silver bullet that can solve all problems. I don’t think it is. You still need to use debugger mode if you want to understand the execution logic of your code, and if you want to view the values of complex types (reference types).

Debugger is a statement in JS that runs on this line. If the program is in debug mode and breaks, it will stop on this line. Then we can see the context, including the values of the most important variables, and the call stack. It also allows us to step through or block by block.

Usually, I debug a lot in the browser. In the browser, I only need to open the console and enable the debug mode. Then, when I encounter a Debugger statement or a user-defined breakpoint, the program will stop and enter the debug mode.

This article will mainly discuss the method of opening vscode debug mode, because I am going to write a vscode plug-in (please wait for it), debugging vscode is inevitable, the previous simple debugging will certainly not meet my needs, so let’s have a look at vscode debug mode.

This article will not write about debugging techniques, just how vscode can start debugging js. Here is the official vscode documentation

Don’t want to see the text, I found a video is also very good, B station video entrance

Discuss the necessity of debugging mode again

If you only need to look at a simple value, console is perfectly fine, since it is expensive to start debugging mode.

In the browser, because objects are referent and the browser does not collapse them directly, if you modify the object after console, you will get the modified object when you go to console

It doesn’t all fold up automatically after printing

When you go to manually fold, the browser reads the value and it has changed to the modified value

This problem occurs because of objects, so if we print a string then we don’t have this problem. But, it’s not a pretty one. This is just an example.

3 invscodeTo enable debugging mode

There are three ways to debug js,ts code in vscode

  1. invscodeRun in terminalnodeWhen, automatically attach
  2. Direct use ofvscodeTo provide thedebugterminal
  3. Using configuration files

3.1 Auto Attach

When running node in vscode terminal, it automatically determines whether to enable debug mode based on different options.

There are four options and three ways to switch between them

3.1.1 Method of Switching Options

Either way, it’s a good idea to reboot vscode after changing the Settings to make it work better

By setting the

Modify the configuration file

After opening the configuration file settings.json file

// Modify or add
{
  "debug.javascript.autoAttachFilter": "onlyWithFlag"
}
Copy the code

Using commands (recommended)

Use Ctrl + Shift + P to call up the command (MAC or change the shortcut keys to find yourself),

Type Attach to find it, select it and you will see the four options, then select it again to switch to the option you want

3.1.2 Meanings of each option

The document on the official website has not been updated. The default option has been changed from SMART to disabled

options meaning
Always (always) Always todebugmode
Intelligence (smart) Only specified files can be entereddebugmodel
Logo only (onlyWithFlag) with--inspectorinspect-brkParameters todebugmode
Disable (disabled) Never usedebugmode

Intelligent (smart) is through the debug. Javascript. AutoAttachSmartPattern this configuration item specify whether to open the debug mode of the file path, the default value is [” ${workspaceFolder} / * * “, “!” **/node_modules/**”,”**/$KNOWN_TOOLS$/**”]

If disabled mode is enabled, node –inspect will not debug, and only a debug terminal can be enabled to debug. I don’t know when I changed the default mode to Disabled, so I remember one time WHEN I used Node –inspect and failed to go into debug mode. It was quite strange, but NOW I understand what happened.

3.2 JavaScript Debug Terminal

Start a terminal in Debug mode directly, and all nodes that start in it will enter debug mode.

Auto Attach controls all terminals started in vscode. This controls only the terminal it started.

3.3 Launch Configuration

That’s the big story. That’s what I want to know

Boot configuration is a configuration file that sets how to start debug mode, which provides more configuration to run and debug complex applications

3.3.1 Enabling Configuration Properties

This configuration file is located in the.vscode/launch.json directory of the current workspace. You can create one manually or via vscode shortcuts

Then select Node

Required attribute

The required attribute is name, and the other two attributes are not changed in Node.

The property name meaning Example property values
type The debugger type can also be thought of as the language for debugging node => pwa-node.chrome => pwa-chrome
request Start thedebugThe request type of the mode of launch: start,attach: additional
name The name of this startup configuration, for users to distinguish Custom, just understand it. It’s for your own use
request

Launch is a direct launch program that does not support red dot breakpoints in the editor,

Attach is a red dot breakpoint in the editor that is generated by vscode before starting the program

The launching mode of launch does not meet my needs for the time being, so I did not look at its supported attributes. I mainly looked at the launching mode of attach.

name

Json can be configured with multiple launch configurations, so you need to give each launch configuration a name to distinguish it from others

{
  "version": "0.2.0"."configurations": [{"name": "Node debugging"."port": 9229."request": "attach"."skipFiles": ["<node_internals>/**"]."type": "pwa-node"
    },
    {
      "type": "pwa-chrome"."request": "attach"."name": "Chrome debugging"."url": "http://localhost:8080"."webRoot": "${workspaceFolder}"}}]Copy the code

Select one of them and you can use the shortcut f5 to start quickly, or click the Run icon

launchandattachAll supported properties

attribute meaning
outFiles The specifiedSource mapsFile Path
resolveSourceMapLocations Is also designated withSource mapsAssociated path
timeout Additional timeout, timeout is abandoned
stopOnEntry Project started, immediatelydebuggerI’m just adding one to the first line of codedebugger
localRoot This is used for remote debugging, I will not understand it…
remoteRoot This is used for remote debugging, I will not understand it…
smartStep Automatically skips source files that are not mapped to
skipFiles Specify the file to step skip, that isdebuggerDon’t follow in to see the source code
trace Enabling saves some debugging output tovscodeIn the specified file
skipFiles

(This is very useful, some code do not want to go in to see, but often click fast, into…

/**/*.js allows you to skip node core module code.

trace

After open the trace

launchSupported properties

attribute meaning
program The entry file address of the startup project (which is to be executedjsThe path)
args Equivalent to command line arguments (explained below)
cwd Specify the path to start the program (explained below)
runtimeExecutable Specify the startup path of the executable (explained below)
runtimeArgs Parameters to the executable (explained below)
env Specify environment variables (explained below)
args

“Args “: [“aaa”,” BBB “] : the way to pass arguments on the command line, available in Node via process.argv

cwd

“CWD “: “${workspaceFolder}/demo”, configure this path. In Node, this is equivalent to specifying the path of process.cwd()

runtimeExecutable

This can specify the name of the program to start, for example, using Nodemon to start, or specify the path, for example, if you have three versions of Node and want to start debugging to see the differences between each version, you do not need to switch the global version of Node, just need to set multiple configuration items. It’s very convenient.

{
  "version": "0.2.0"."configurations": [{"name": "V10 version started"."program": "${workspaceFolder}/demo.js"."request": "launch"."type": "pwa-node"."runtimeExecutable": "C:\\Program Files\\nodejsv10\\node.js" // Here is the v10 node path
    },
    {
      "name": "V11 version started"."program": "${workspaceFolder}/demo.js"."request": "launch"."type": "pwa-node"."runtimeExecutable": "C:\\Program Files\\nodejsv11\\node.js" // Here is the v11 node path
    },
    {
      "name": "V12 version started"."program": "${workspaceFolder}/demo.js"."request": "launch"."type": "pwa-node"."runtimeExecutable": "C:\\Program Files\\nodejsv12\\node.js" // Here is the v12 node path}}]Copy the code
runtimeArgs

This argument is written immediately after the executable. In Node applications, Node treats the first argument after it as the path to the file it is executing, so it needs to be adjusted.

{
  "version": "0.2.0"."configurations": [{"name": "V10 version started"."program": "${workspaceFolder}/demo.js".// This is no longer the node executable file address, it is just a parameter
      "request": "launch"."type": "pwa-node"."args": ["args1"."args2"]."runtimeArgs": ["${workspaceFolder}/demo.js"."runtimeArgs2"] // Because it follows the executable, its first argument needs to be set to the address of the file it is executing
      // This is fine if it is --experimental-modules, because Node will parse it as an argument to enable es module support. Next I will write a JS modular article, please look forward to ha}}]// The command line to start is
// C:\Program Files\nodejs\node.exe E:\font-end/demo.js runtimeArgs2 .\demo.js args1 args2
Copy the code

This parameter is useful when starting a project as NPM

env
{
  "version": "0.2.0"."configurations": [{"name": "V10 version started"."program": "${workspaceFolder}/demo.js"."request": "launch"."type": "pwa-node"."env": {
        "NODE_ENV": "prod"}}}]Copy the code

attachSupported properties

I mainly debug JS files and use the launch mode, so I don’t know the attach mode for the first time.

4 summarizes

It should be pretty clear how to start debug mode in vscode

In vscode, there are three ways to start debugging

  1. Auto attach (global terminal), set to if you are confident about your computer’s performancealways. Enter the clidebugMode.
  2. Forcibly enable (affecting only this terminal). If it is not convenient to enable global autodebug, use this way to enterdebugAnd it’s a little more convenient, just turn this on againdebugTerminal after needcdTo what needs to be runjsFile directory, more trouble. Enter the command linedebugMode.
  3. Configuration Enabled (powerful, suitable for debugging complex applications).vscode/launch.jsonLater,f5Boot intodebugmodel
// Compare a complete launch.json configuration
{
  // Use IntelliSense to learn about related attributes.
  // Hover to view descriptions of existing properties.
  / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0"."configurations": [{"name": "V10 version started".// Configure the name
      "program": "${workspaceFolder}/demo.js".// Project startup entry file
      "request": "launch".// Debug request mode
      "stopOnEntry": true.// Start the project, immediately 'debugger'
      "type": "pwa-node".// Debugger type
      "env": {
        // Environment variables
        "NODE_ENV": "prod"
      },
      "args": ["aaaa"].// The parameter that follows program when starting a command
      "skipFiles": [
        // Specify files that cannot be stepped into
        "<node_internals>/**" // Node's core library, such as' require ']."cwd": "${workspaceFolder}".Process.cwd (), process.cwd(),
      "runtimeExecutable": "nodemon".// Specify the executable name, or the path, where type is pwa-node and the default is node
      "runtimeArgs": ["--experimental-modules"] // The argument that follows runtimeExecutable when the command is launched}}]Copy the code

The last 5

There are already three pits, modularity, debugging skills, vscode plug-in development, I would like to write a vscode plug-in, please wait.

I feel this article can be changed to something you inspired. I hope to give you a like, comment, favorite, follow…

  1. Vue2 source code analysis nextTick
  2. Code snippet JS flow limiting scheduler
  3. Linked Lists of Data Structures and Algorithms (1)
  4. Vue2 source code parsing event system $on
  5. Vue2 – Global API source code analysis
  6. Vue-class-component (1)
  7. Prototype of js native syntax,protoAnd the constructor
  8. The inheritance and implementation of js native syntax
  9. Decorator: vue-property-decorator(2)

This is my 10th article ~~~~~