在 WebStorm 与 VSCode中对NodeJs项目进行断点调试

本文展示的是如何对NextJS项目进行调试,以及通用的NodeJS项目使用inspect检查器进行debug的方式。
在 WebStorm 与 VSCode中对NodeJs项目进行断点调试
category
tags
type
slug
date
summary
status
icon
password

前言

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就可以了。
例如:
 

WebStorm 连接Nodejs检查器

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

Visual Studio Code 连接NodeJS检查器

在运行和调试窗口中,添加一个配置:
notion image
配置内容如下
点击Attach to Port 左边的 运行按钮▶️,将当前调试进程附着在NodeJs项目进程上;
notion image
在需要断点调试的代码左边,单击出现一个圆点即可;当代码执行到当前行时就会自动暂停:
notion image
 
 
上一篇
JetBrains IDEA WebStorm PHPStorm 2022最新永久激活
下一篇
Github 无法推送或拉取代码的解决
Loading...
2023-7-20
最新发布
什么是正确的交易理念?《毛选》已经给了我们答案
2024-12-1
这个世界的真相是什么?为什么说“道”比方法论更重要?
2024-11-29
十年一次的机遇,2024年A股牛市操作手册,如何让资产快速翻25倍?
2024-11-27
为什么手中的绩优股票迟迟不涨?成交量到底怎么看?什么是量价关系?
2024-11-24
价格行为技术分析-10-交易区间概念基础
2024-11-22
价格行为基础教学-02-认识多空力量
2024-11-22