如何使用Visual Studio 2022逐行调试React.js/Next.js应用

• 让Next.js以调试模式启动
  常规npm run dev未开启Node调试端口，需要修改项目package.json里的启动脚本：

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

  重启应用后，控制台会输出类似Debugger listening on ws://127.0.0.1:9229/xxxxxx的日志，说明调试端口已激活。

• 正确在VS中附加进程
  打开VS的「调试」→「附加到进程」，在进程列表里找到带--inspect参数的node.exe（若有多个node进程，通过命令行参数区分）。附加时需在「选择」按钮里勾选Node.js调试类型，不要仅使用默认调试器。

• 检查断点的位置和类型

  • 断点要打在实际会执行的代码行上，避免打在空行、注释或条件永远不满足的分支中
  • 针对Next.js 13+的App Router：服务端组件代码在Node进程中运行，断点需通过附加node进程触发；客户端组件在浏览器环境执行，这类断点可通过浏览器开发者工具调试，或在VS中附加浏览器进程调试

• 确保源映射配置正确
  打开next.config.js，确认开启源映射：

  module.exports = {
    productionBrowserSourceMaps: true,
    devtool: 'source-map'
  }
  

  重启应用后再尝试调试，源映射能让VS正确关联编译后的代码与源码。

• 清理缓存后重试
  删除项目根目录的.next文件夹和node_modules/.cache目录，必要时重新执行npm install，随后重启VS和Next.js应用，再重新附加进程调试。

内容的提问来源于stack exchange，提问作者Ayo Adesina