VSCode调试Next.js API端点时如何让请求自动触发断点？

前置确认 #

首先确保你的Next.js开发服务是以调试模式启动的，你可以修改package.json的启动脚本：

{
  "scripts": {
    "dev": "next dev --inspect"
  }
}

启动后用你现有的launch.json配置点击调试attach，确认调试器正常连接即可。 #

方案1：代码内置debugger（最稳定，无需额外配置VSCode） #

直接在你需要暂停的代码行前插入debugger关键字即可，以你的/api/data.tsx为例：

import { NextApiRequest, NextApiResponse } from 'next';
import { StatusCodes } from 'http-status-codes';
import getConfig from 'next/config';

export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   debugger; // 执行到这行时会自动触发调试暂停
   console.log('do some logging');
   res.status(StatusCodes.OK).json({message: 'Good job buddy!'});
}

每次该接口收到请求，只要调试器处于连接状态，就会自动在debugger行暂停，无需你手动找到文件打断点。 #

方案2：无需修改代码的VSCode URL断点设置 #

如果你不想改动业务代码，可以用VSCode内置的URL断点功能，按请求路径自动触发暂停：

• 进入VSCode左侧调试面板，找到「断点」模块，点击模块右上角的+号
• 选择「URL断点」，输入你需要匹配的API路径/api/data
• 右键刚添加的URL断点，选择「编辑条件」，可以进一步指定请求方法、查询参数等过滤规则，也可以直接指定命中后暂停在console.log对应的代码行位置
  配置完成后，只要有匹配/api/data的请求进入，调试器会自动暂停，无需你手动查找对应的API路由文件。

注意事项 #

• 你现有的launch.json配置已经符合要求，skipFiles仅跳过Node内部文件，不会影响API路由断点的命中
• 如果需要同时匹配多个API路由，重复添加多个URL断点即可

内容的提问来源于stack exchange，提问作者Jason M