Next.js服务端代码Chrome DevTools调试异常：断点无效、日志不跳转

问题描述 #

按Next.js官方调试指南操作，仅用Chrome DevTools调试服务端代码：已通过chrome://inspect成功连接服务端，能暂停应用，但存在两个问题：

• debugger语句无法触发断点，程序直接跳过
• 服务端控制台输出仅显示在启动应用的终端，不出现于Chrome DevTools控制台

调试基础ExpressJS和普通Node控制台应用均正常，问题仅针对Next.js。

解决方案 #

1. 修复debugger语句不触发断点的问题 #

• 指定调试端口启动：用以下命令启动Next.js，确保调试器能正确关联编译后的代码与源文件：

  NODE_OPTIONS='--inspect=0.0.0.0:9229' next dev
  

• 关联工作区源文件：在Chrome DevTools的Sources面板中，点击"Add folder to workspace"，将项目根目录添加进去，确认源映射文件（.map）正确关联本地文件与编译后的服务端代码。
• 确保源映射开启：在next.config.js中明确开启源映射（开发环境默认开启，但若有自定义配置需确认）：

  module.exports = {
    productionBrowserSourceMaps: true,
  }
  

2. 让服务端控制台输出显示在Chrome DevTools #

• 用--inspect-brk启动：启动时添加--inspect-brk参数，让Node.js在启动时暂停等待调试器连接，后续日志会转发到DevTools：

  NODE_OPTIONS='--inspect-brk=9229' next dev
  

• 调整DevTools控制台设置：在Chrome DevTools的Console面板中，勾选"Verbose"选项，并在过滤器中选择"Node.js"（若存在该选项），确保服务端日志被显示。
• 替换日志输出方式：临时调试时，可将服务端代码中的console.log替换为process._debugger.log()，强制将日志发送到DevTools控制台（注意该API为Node.js内部接口，仅用于调试）。

验证步骤 #

1. 创建全新无ESLint、TypeScript的Next.js项目：

   npx create-next-app@latest --no-eslint --no-typescript debug-test
   

2. 进入项目目录，用指定命令启动：

   cd debug-test
   NODE_OPTIONS='--inspect=9229' next dev
   

3. 在pages/api/hello.js中添加debugger语句，访问http://localhost:3000/api/hello，检查DevTools是否触发断点，同时查看控制台输出。

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