如何使用WebStorm调试NextJS的TypeScript服务端代码及API？

1. 添加调试启动脚本 #

在项目的package.json中，给scripts字段添加调试专用命令：

"scripts": {
  "dev": "next dev",
  "dev:debug": "NODE_OPTIONS='--inspect' next dev"
}

这个命令会启动Next.js开发服务器并开启调试监听（默认端口9229）。

2. 配置WebStorm调试会话 #

• 点击WebStorm右上角的「Run/Debug Configuration」下拉框，选择「Edit Configurations...」
• 点击左上角的+号，选择「npm」类型的配置
• 在「Scripts」下拉菜单中选择刚才添加的dev:debug，其他保持默认即可。

或者直接配置Node.js类型的调试：

• 选择「Node.js」类型，在「JavaScript file」中填入项目本地的Next.js入口文件路径，比如node_modules/next/dist/bin/next.js
• 在「Application parameters」中填入dev
• 在「Environment variables」中添加NODE_OPTIONS=--inspect

3. 设置断点 #

在你的服务端代码中直接设置断点：

• 针对API路由：在app/[api-path]/route.ts的请求处理函数（如GET、POST）内点击行号左侧，添加红色断点
• 针对Server Component：在app/[page]/page.tsx的服务端执行代码（比如数据获取逻辑）中设置断点
• 针对Server Action：在定义Server Action的函数内设置断点

4. 启动调试并验证 #

• 点击WebStorm右上角的绿色调试按钮（虫子图标），启动调试会话
• 等待服务器启动完成后，发起API请求（用浏览器、Postman等工具），或者访问触发Server Component/Server Action的页面，断点会自动触发
• 触发后可使用WebStorm调试工具：查看变量值、单步执行（F7步入、F8步过、F9继续执行）、查看调用栈等。

注意事项 #

• 确保项目根目录存在tsconfig.json，WebStorm会自动识别TypeScript配置，无需额外设置
• 代码热重载后，部分断点可能需要重新设置，可在调试工具栏开启「Reload changed classes」选项自动同步
• 若调试端口被占用，可修改NODE_OPTIONS为--inspect=9230指定其他端口，同时在WebStorm调试配置中同步修改端口。

内容的提问来源于stack exchange，提问作者MD Jahid Hasan