category
tags
type
slug
date
summary
status
icon
password
前言
在
WebStorm
以及Visual Studio Code
下,如何对NodeJS项目进行断点调试?Visual Studio Code
VSCode作为一个轻便好用的IDE,优先介绍一下它的调试方式。
示例项目:,这是一个
NextJS
项目,在package.json
中点击script
上方的调试按钮
,使用dev
启动。
启动完成候,在控制台中
按住ctrl + 鼠标单击
打印的URL,即可打开一个调试窗口:
界面上会多一个悬浮的调试窗口,这时候就说明调试工具连接成功:

在代码左侧单击一下,出现红色的原点表示断点成功,将鼠标指向代码中的对象,将会实时显示当前的变量状态。通过面板上的按钮可以控制代码的执行

WebStorm

在WebStorm中;按住
shift
+ cmd
+ 鼠标点击
项目链接;即可打开一个调试用的chrome窗口,此时chrome中的控制台也将与WebStorm中的控制台同步,可以直接进行控制台查看,以及断点调试;断点调试示例
在代码左侧单击出现一个红色断点;程序运行到这时就会暂停了。


扩展 - 检查器进行调试
NodeJS的inspect
特性
使用
--inspect
启动时,Node.js 进程会侦听调试客户端。默认情况下,它将侦听主机和端口 127.0.0.1:9229。每个进程分配了一个唯一的UUID。详情可以参考这份调试手册:上文的IDE做了默认集成,便于开发者调试,而手动开启并连接检查器调试也很简单,在启动dev的脚本中加入配置
NODE_OPTIONS='--inspect'


启动后可以看到一个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的配置

启动后会多出一个Debug窗口,监听你正在运行的Nodejs服务

此时你的Node服务控制台也会打印出一句
Debugger attached.
表示已经连接上了调试。
Visual Studio Code 连接NodeJS检查器
在运行和调试窗口中,添加一个配置:

配置内容如下
点击Attach to Port 左边的 运行按钮▶️,将当前调试进程附着在NodeJs项目进程上;

在需要断点调试的代码左边,单击出现一个圆点即可;当代码执行到当前行时就会自动暂停:

Loading...