VS Code调试Nuxt 3.11+问题：调试控制台缺失代码行关联

使用VS Code进行Nuxt 3开发时，自3.11版本起，服务器端调试出现两个异常：

• 调试控制台的console.log输出不再关联对应代码行位置，无法点击跳转到代码
• 输出的对象以纯文本形式展示，无法展开查看属性

• Nuxt 3.14.1592
• Nitro 2.10.4
• Nuxi 3.15（开发依赖）
• Windows 10 系统
• Node.js 22.11.0

已按照Nuxt官方文档配置VS Code的launch.json，仅移除了原配置中url的端口3000以适配本地设置；目前通过VS Code的「启动调试（F5）」功能调试，Nuxt 3.10及以前版本是通过PowerShell终端执行npm run dev进行调试。

以下是针对该问题的针对性修复步骤：

• 修正VS Code调试配置
  确保launch.json的配置正确指向Nuxi的启动程序，并启用source maps：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Nuxt Dev",
        "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
        "args": ["dev"],
        "console": "integratedTerminal",
        "sourceMaps": true,
        "skipFiles": ["<node_internals>/**"],
        "env": { "NUXT_DEVTOOLS_ENABLED": "true" }
      }
    ]
  }
  

  注意：若使用pnpm/yarn，需调整program路径为对应包管理器的nuxi位置，比如pnpm路径为${workspaceFolder}/node_modules/.bin/nuxi.mjs。

• 降级Node.js到LTS版本
  Node.js 22属于较新版本，可能与Nuxt 3.14的调试器存在兼容性问题。建议降级到Node.js 20 LTS（官方推荐的长期支持版本），调试兼容性会更稳定。

• 启用Nitro的Source Map生成
  在nuxt.config.ts中明确开启Nitro的source map支持，确保调试器能关联服务器端代码：

  export default defineNuxtConfig({
    nitro: {
      sourceMap: true,
      devtools: { enabled: true }
    }
  })
  

• 清除Nuxt缓存
  执行以下命令清除项目缓存，避免旧的source map或编译产物干扰：

  npx nuxi clean
  

  清除后重新启动调试。

• 排查VS Code扩展冲突
  暂时禁用除官方「Volar」「Nuxt」扩展外的其他调试相关扩展，部分第三方扩展可能会干扰Node.js调试器的source map解析。

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