在 WebStorm 与 VSCode中对NodeJs项目进行断点调试
在 WebStorm 与 VSCode中对NodeJs项目进行断点调试
Last edited 2022-5-12

前言

WebStorm以及Visual Studio Code下,如何对NodeJS项目进行断点调试?

Visual Studio Code

VSCode作为一个轻便好用的IDE,优先介绍一下它的调试方式。
示例项目:,这是一个NextJS项目,在package.json中点击script上方的调试按钮,使用dev 启动。
notion image
启动完成候,在控制台中按住ctrl + 鼠标单击 打印的URL,即可打开一个调试窗口:
notion image
界面上会多一个悬浮的调试窗口,这时候就说明调试工具连接成功:
notion image
在代码左侧单击一下,出现红色的原点表示断点成功,将鼠标指向代码中的对象,将会实时显示当前的变量状态。通过面板上的按钮可以控制代码的执行
notion image

WebStorm

notion image
在WebStorm中;按住shift + cmd + 鼠标点击 项目链接;即可打开一个调试用的chrome窗口,此时chrome中的控制台也将与WebStorm中的控制台同步,可以直接进行控制台查看,以及断点调试;

断点调试示例

在代码左侧单击出现一个红色断点;程序运行到这时就会暂停了。
notion image
notion image
 

扩展 - 检查器进行调试

NodeJS的inspect特性

使用--inspect 启动时,Node.js 进程会侦听调试客户端。默认情况下,它将侦听主机和端口 127.0.0.1:9229。每个进程分配了一个唯一的UUID。详情可以参考这份调试手册:
上文的IDE做了默认集成,便于开发者调试,而手动开启并连接检查器调试也很简单,在启动dev的脚本中加入配置 NODE_OPTIONS='--inspect'
notion image
notion image
启动后可以看到一个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就可以了。
例如:
"scripts": { "dev": "cross-env NODE_ENV=dev next dev" },
 

WebStorm 连接Nodejs检查器

添加一个Attach to Node.js/Chrome的配置
notion image
启动后会多出一个Debug窗口,监听你正在运行的Nodejs服务
notion image
此时你的Node服务控制台也会打印出一句 Debugger attached. 表示已经连接上了调试。
notion image
 

Visual Studio Code 连接NodeJS检查器

在运行和调试窗口中,添加一个配置:
notion image
配置内容如下
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach to Port", "address": "localhost", "port": 9229 } ] }
点击Attach to Port 左边的 运行按钮▶️,将当前调试进程附着在NodeJs项目进程上;
notion image
在需要断点调试的代码左边,单击出现一个圆点即可;当代码执行到当前行时就会自动暂停:
notion image
 
 
  • 开发
  • NodeJS
  • WebStorm
  • VSCode
  • 一不小心得了慢性胃炎🤮Git 推送拉取代码失败
    • Waline
    • Giscus
    • Cusdis