VS Code调试Angular代码遇问题：调试器从Source Map内联内容提供文件

Hey, I’ve run into this exact source map mismatch issue before when debugging Angular with VS Code and Chrome — let’s break down how to fix it:

1. Fix Your launch.json Configuration #

First, there are a couple of issues in your current launch config that are contributing to the problem:

• The url wildcard is incorrect — use ** to match all subpaths under localhost:4200 (your original * won’t work as expected).
• Your Node.js launch config is truncated (the name cuts off at "Launch Progr..."), which can cause config validation errors. Either complete it or comment it out for now if you’re only focusing on Chrome debugging.

Here’s the cleaned-up, working version of launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "url": "http://localhost:4200/**",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/src/*",
        "webpack:///src/*": "${webRoot}/src/*"
      }
    }
    // Uncomment and adjust this if you need Node.js debugging later
    // {
    //   "type": "node",
    //   "request": "launch",
    //   "name": "Launch Program",
    //   "program": "${workspaceFolder}/path-to-your-node-entry-file.js"
    // }
  ]
}

The sourceMapPathOverrides section is key here — it tells VS Code how to map the webpack-generated source map paths (which start with webpack:///) to your local TypeScript files in the src folder.

2. Verify Angular’s Source Map Settings #

Angular might not be generating the right source maps for debugging by default. Check your angular.json:

1. Go to architect > build > options and confirm "sourceMap": true is set.
2. For the dev server, add explicit source map settings under architect > serve > options (if they’re missing):

   "sourceMap": {
     "scripts": true,
     "styles": true,
     "vendor": false
   }
   

Disabling vendor source maps cuts down on noise and helps VS Code focus on your application code instead of third-party libraries.

3. Make Sure Chrome is Ready for Debugging #

Double-check you’re launching Chrome with the remote debugging port open — this is required for VS Code to attach:

• Windows: Right-click your Chrome shortcut, open Properties, and add --remote-debugging-port=9222 to the end of the "Target" field (make sure there’s a space before it).
• macOS/Linux: Run google-chrome --remote-debugging-port=9222 (or chrome depending on your system) from the terminal.

4. Restart and Reattach #

After making these changes:

• Stop any running Angular dev servers and VS Code debug sessions.
• Restart the dev server with ng serve.
• Open Chrome (with the debug port enabled) and navigate to http://localhost:4200.
• Start the "Attach to Chrome" debug session in VS Code.

This should resolve the source map issue, and your breakpoints will now map directly to your local TypeScript files instead of showing "inline content" from source maps.

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