category
tags
type
status
slug
date
summary
icon
password
前言
在
WebStorm
以及Visual Studio Code
下,如何对NodeJS项目进行断点调试?Visual Studio Code
VSCode作为一个轻便好用的IDE,优先介绍一下它的调试方式。
示例项目:,这是一个
NextJS
项目,在package.json
中点击script
上方的调试按钮
,使用dev
启动。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3a2e5882-cfed-494b-9382-710b6cac6044%2FUntitled.png?table=block&id=e03bacf9-3f65-462b-9784-77f3753e1543)
启动完成候,在控制台中
按住ctrl + 鼠标单击
打印的URL,即可打开一个调试窗口:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8a20548c-f97e-4b70-99ac-232a8415c931%2FUntitled.png?table=block&id=7d3c3242-e9d8-46de-a42d-1d19607b9941)
界面上会多一个悬浮的调试窗口,这时候就说明调试工具连接成功:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6668d675-2060-40d3-a109-2259c59555e8%2FUntitled.png?table=block&id=a1ce68fc-5893-4e35-a0ec-a135035f9761)
在代码左侧单击一下,出现红色的原点表示断点成功,将鼠标指向代码中的对象,将会实时显示当前的变量状态。通过面板上的按钮可以控制代码的执行
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Feeb3ac83-9231-4810-b469-014fdf06810b%2FUntitled.png?table=block&id=29701a7a-a064-4dfe-b8c5-06cadf3245dc)
WebStorm
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1bcb9770-4795-419b-874f-640679ecc31a%2FUntitled.png?table=block&id=a90fddbd-af60-449d-9672-843ca05ef4d7)
在WebStorm中;按住
shift
+ cmd
+ 鼠标点击
项目链接;即可打开一个调试用的chrome窗口,此时chrome中的控制台也将与WebStorm中的控制台同步,可以直接进行控制台查看,以及断点调试;断点调试示例
在代码左侧单击出现一个红色断点;程序运行到这时就会暂停了。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9c7cd335-b920-4b47-b250-f501c3b7690e%2FUntitled.png?table=block&id=49c0214f-62be-4778-acdf-dfd8db4a2044)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc44a2039-3b17-469a-a2a8-19c8d1f7721c%2FUntitled.png?table=block&id=d8a702ef-64b6-4c2c-a593-a182b9599429)
扩展 - 检查器进行调试
NodeJS的inspect
特性
使用
--inspect
启动时,Node.js 进程会侦听调试客户端。默认情况下,它将侦听主机和端口 127.0.0.1:9229。每个进程分配了一个唯一的UUID。详情可以参考这份调试手册:上文的IDE做了默认集成,便于开发者调试,而手动开启并连接检查器调试也很简单,在启动dev的脚本中加入配置
NODE_OPTIONS='--inspect'
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F56b3a203-82df-4460-a06d-a8999fbecdd9%2FUntitled.png?table=block&id=99c7ebeb-6c3e-4758-80c2-ff959da570cf)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6d77b34d-25b8-4e2e-b532-f0b49f207bc7%2FUntitled.png?table=block&id=31d953e5-1781-46c4-84bc-4e04dd021ce6)
启动后可以看到一个websocket的监听服务已经启动
Inspector 客户端必须知道并指定主机地址、端口和 UUID 才能连接。完整的 URL 类似于 ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e.
报错:
windows下会提示,无法将“NODE_OPTIONS”识别为内部或外部命令:
解决办法:安装across-env:npm install cross-env –-save-dev
在运行命令加前缀:在NODE_ENV=xxxxxxx前面添加cross-env就可以了。
例如:
WebStorm 连接Nodejs检查器
添加一个Attach to Node.js/Chrome的配置
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe2e59a34-65fd-42d7-8d26-5d8e65c31d3b%2FUntitled.png?table=block&id=e69297f3-42e9-42cc-8146-b56790246202)
启动后会多出一个Debug窗口,监听你正在运行的Nodejs服务
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4d986e26-6dd0-487b-8672-92e3731b4fc4%2FUntitled.png?table=block&id=c5f02c3e-42d8-4af9-9b2d-f2db14f3215f)
此时你的Node服务控制台也会打印出一句
Debugger attached.
表示已经连接上了调试。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff9950f52-b0a6-430b-98f1-a9eedea95801%2FUntitled.png?table=block&id=4ef75245-aa3a-422a-93da-fbc90641dca0)
Visual Studio Code 连接NodeJS检查器
在运行和调试窗口中,添加一个配置:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F720485c1-cbce-412a-9ab5-76e2820a75c5%2FUntitled.png?table=block&id=aa047d0a-28ce-40f7-9582-65dc27c7314e)
配置内容如下
点击Attach to Port 左边的 运行按钮▶️,将当前调试进程附着在NodeJs项目进程上;
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3fb7b59c-13bd-4f13-b30b-bbab6cbbae3f%2FUntitled.png?table=block&id=691355ad-63a0-44ba-b6a4-c4dc66d62f71)
在需要断点调试的代码左边,单击出现一个圆点即可;当代码执行到当前行时就会自动暂停:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe4fba6c5-7653-4292-a36e-afcc1b590089%2FUntitled.png?table=block&id=0e9bb851-4fa6-4b52-b4b7-ecd463db65ae)
- 作者:NotionNext
- 链接:https://tangly1024.com/nodejs-debug
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章