Let’s talk about the usage skills of debugger in vscode

Learning nodejs What is the most important thing? Maybe everyone has their own answer.

I think that in addition to mastering the basic API and some commonly used packages when learning nodejs, the most important ability is to learn to use the debugger. Because when the process is complex, breakpoint debugging can help you better clarify the logic, and when there are bugs, you can also locate the problem faster. [Recommended learning: "nodejs tutorial", "vscode tutorial"]

Uncle Wolf said that whether you can use debugger is important to distinguish a programmer's nodejs level logo.

This article shares the principles of debugger and vscode debugger usage techniques.

debugger principle

When running nodejs code, if you bring --inspect (can break points) or - -inspect-brk (can break points and break on the first line) parameter, then it will start in debugger mode:

can be seen , node started a web socket server, the address is: ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

Why does the debugger start a websocket server?

The meaning of debugger is to stop somewhere, run it in a single step, and view variables in the environment. So how to set breakpoints and expose the variables of the current context is to start a websocket server. At this time, you only need to start a websocket client and connect to the server to debug the nodejs code.

v8 debug protocol

After connecting, how do the debugger server and debugger client communicate? This involves the v8 debug protocol.

Communicate through a format that can be recognized by both parties, for example:

Set a breakpoint at line 100 of test.js:

{
    "seq":118,
    "type":"request",
    "command":"setbreakpoint",
    "arguments":{
        "type":"script",
        "target":"test.js",
        "line":100
    }
}

Then view the variables of the current scope:

{
    "seq":117,
    "type":"request",
    "command":"scope"
}

Execute an expression:

{
    "seq":118,
    "type":"request",
    "command":"evaluate",
    "arguments":{
        "expression":"a()"
    }
}

Continue to run after:

{
    "seq":117,
    "type":"request",
    "command":"continue"
}

In this way, the client can tell the debugger server how to execute the code.

debugger client

debugger client usually has a ui (of course, in the command line Debugging through commands is also possible, but generally not done). Common js debugger clients include chrome devtools and vscode debugger.

We write a simple js script and run it through node --inspect-brk:

You can see that it starts on port 9229,

Then, we connect to it through two clients respectively.

chrome devtools

Enter chrome://inspect in the chrome address bar, and then click configure to configure the target port:

Fill in the port 9229 just now:

Then you can see that chrome scanned the target, click inspect to connect This debugger server.

After that, you can set breakpoints, single-step execution, execute expressions, view scope variables, etc. These functions are all through This is implemented using the v8 debug protocol.

vscode debugger

Writing code in vscode, debugging in chrome devtools is more troublesome, vscode also supports debugger, you can directly Use vscode to debug.

The way to use vscode debugging capabilities is to modify the .vscode/launch.json configuration in the project root directory.

attach

Click the button in the lower right corner to add a configuration item. Here choose the attach of nodejs:

Because the debugger server of websocket has been started through node --inspect-brk, then you only need to start the websocket client, and then attach to port 9229. .

点击左侧的按钮，就可以连上 debugger server 开始调试：

launch

这样先通过 node --inspect-brk 启动 debugger server，然后再添加 vscode debug 配置来连接上太麻烦了，能不能把这两步合并呢？

当然可以，只要添加一个 launch 的配置：

这里的 type 是 launch，就是启动 debgger server 并且启动一个 debugger client 连接上该 server。运行的程序是根目录下的 index2.js，还可以设置 stopOnEntry 来在首行断住。

点击调试，就可以看到能够成功的调试该 js 文件。

vscode 会启动 debugger server，然后启动 debugger client 自动连接上该 server，这些都不需要我们去关心。

这样我们就可以成功的使用 vscode debugger 来调试 nodejs 代码。

vscode debugger 进阶

debugger client 中我们最常用的还是 vscode，这里着重讲一下 vscode debugger 的各种场景下的配置。

sourcemap

如果调试 ts 代码，肯定不能调试编译后的代码，要能够映射回源码，这个是 sourcemap 做的事情。调试工具都支持 sourcemap，比如 chrome devtools 和 vscode debugger，都支持文件末尾的 sourcemap url 的解析：

//# sourceMappingURL=index.js.map

这样当调试 index.js的时候，如果它是 ts 编译的出来的，就会自动找到对应的 ts。

当然，如果调试配置里面直接指定了 ts，那么要能够调试需要再配置 outFiles，告诉 vscode 去哪里找 sourcemap。

这样，在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。

多进程调试

当代码中有子进程的时候，就有了第二条控制流，需要再启动一个 debugger。

比如 vscode，它是基于 electron，需要启动一个主进程，一些渲染进程。主进程是通过 launch 启动的，而渲染进程则是后来 attach 的。

主进程启动的时候，通过 --remote-debugging-port 来指定子进程自动的时候的 debugger server 的端口。

outFiles 来指定 sourcemap 的位置，这样才可以直接调试 ts 源码。runtimeExecutable 是用 vscode 的运行时替代掉了 nodejs（一般不需要设置）。

然后渲染进程是后面启动的，我们通过参数配置了会启动在 9222 端口，那么只要 attach 到那个端口就可以调试该进程了。

vscode 支持多 target 调试，也就是可以在 vscode 里面同时启动 多个 debugger。可以切换不同的 debugger 来调试不同的进程。

彩蛋

debugger 只能打断点么，不是的，它还可以这么用，加日志，不污染源码。

总结

debugger 的使用是一项很重要的能力，对于 nodejs 水平的提升很有帮助。

nodejs debugger 的原理是 js 引擎会启动 debugger server（websocket），等待客户端连接，我们可以通过各种 debugger client 连上来进行调试，比如 chrome devtools、vscode debugger。

To debug nodejs code, it is better to use vscode debugger (of course, sometimes chrome devtools is also used for debugging, and memory analysis based on chrome devtools' memory is very helpful when locating memory leak problems).

The use of vscode debugger is mainly to add debugging configuration in .vscode/launch.json.

Debugging configuration is divided into launch and attach:

• launch will start the debugger server and connect to it with the debugger client
• attach just starts the debugger client and connects to the existing one debugger server, so you need to specify the port

Commonly used specific configuration items are:

• outFiles specifies the location of the sourcemap, which is used to debug ts source code and other codes that need to be compiled.
• stopOnEntry Stop on the first line
• args to specify some command line parameters
• runtimeExecutable needs to be specified when the runtime is not nodejs, such as vscode or some other runtimes

Based on these configurations, we can debug nodejs code in various scenarios, which need to be compiled, or multiple processes.

It is no exaggeration to say that if you are familiar with the use of debugger, it will be much easier to understand various nodejs codes. I hope this article can help everyone understand the principle of debugger and be able to use chrome devtools or vscode debugger to debug nodejs code. Know how to debug with sourcemap and multiple processes.

Original address: https://juejin.cn/post/6981820158046109703

Author: zxg_God said there must be light

More programming For related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Let’s talk about the usage skills of debugger in vscode. For more information, please follow other related articles on the PHP Chinese website!