如何阻止VS Code Node调试器显示node_modules代码？

我明白你在调试Angular 9应用时被频繁跳转到node_modules代码的问题搞疯了——这种情况确实会打断调试节奏，尤其是当你想用F11/F10逐行走自己的代码时。结合你的launch.json配置和遇到的问题，我整理了几个针对性的解决方案：

一、先搞定skipFiles的兼容性问题 #

VS Code提示“Property not allowed”，本质是不同调试扩展对skipFiles的支持逻辑有差异。尤其是browser-preview扩展目前可能存在适配问题（你提交issue的做法很对），我们可以针对不同调试器分别调整配置：

优化后的完整launch.json配置 #

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "browser-preview",
      "name": "Browser Preview: Attach",
      "request": "attach"
    },
    {
      "type": "browser-preview",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "name": "Browser Preview: Launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      // 用sourceMapPathOverrides辅助排除node_modules映射
      "sourceMapPathOverrides": {
        "webpack:///node_modules/*": "${webRoot}/node_modules/*"
      },
      // 调整路径写法，避免变量兼容性问题
      "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "<node_internals>/**/*.js"
      ]
    },
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      // 解决Chrome延迟启动：等待ng serve完全就绪
      "waitForTaskFinish": 5000,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}",
      // 把node_internals放在前面，优先排除
      "skipFiles": [
        "<node_internals>/**/*.js",
        "${workspaceFolder}/node_modules/**/*.js"
      ],
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/src/*", // 更精确匹配业务代码路径
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      // 强制开启Chrome远程调试端口，确保调试器能正确附加
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ]
    }
  ]
}

二、解决ng serve配置中Chrome延迟启动的问题 #

你提到“取消调试后才启动Chrome”，这是因为VS Code没收到preLaunchTask完成的信号。需要修改tasks.json，让它监听Angular CLI的编译完成提示：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "fileLocation": "absolute",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Compiling...",
          "endsPattern": "Compiled successfully."
        }
      }
    }
  ]
}

这个配置会在看到“Compiled successfully.”时标记任务完成，VS Code就会自动启动Chrome了。

三、额外的调试优化技巧 #

1. 禁用第三方依赖的Source Map：在angular.json中关闭vendor的source map，从根源减少调试器加载的无关文件：

   "architect": {
     "build": {
       "options": {
         "sourceMap": {
           "scripts": true,
           "styles": true,
           "vendor": false // 禁用node_modules的source map
         }
       }
     }
   }
   

2. 用Step Out快速跳出：不小心进入node_modules时，按Shift+F11（Step Out）可以立刻回到自己的代码上下文。
3. 优先用条件断点：不要在全局设置断点，只在自己的业务代码行设置必要的断点，减少调试器触发的概率。
4. 更新扩展版本：定期检查Browser Preview和Debugger for Chrome的更新，可能官方已经修复了skipFiles的支持问题。

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