Debug with Visual Studio Code not working

I'm using Angular CLI 1.7.3 and Angular: 5.2.9 on Mac OSX. Here is the configuration which is working for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

I finally get it fully working!

For those interested:

(using chromium-browser on Linux but you can easily just replace by "chrome").

First, here's the launch.json config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

I decided to remove the part with "request": "launch" as I need to launch a new browser window.

Then, launch the browser like that:

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

In the new window, access to http://localhost:4200.

Then from VSC, run the debug.

Everything should work just fine and you should be able to use breakpoints :)

GIF available here to see it in action: http://hpics.li/0156b80

I was able to solve this problem on OSX. The reason it's such a pain is there are multiple things causing the issue.

1. You hit on the first with --user-data-dir=remote-profile: If you're already running Chrome (for example, already have tabs open - who doesn't?), you have to use a different userDataDir to have Chrome launch an independent instance.
   The correct way to do this, however, is to add "userDataDir": "${workspaceRoot}/.vscode/chrome", to your launch.json configuration (see below). This needs to be a path. If 'remote-profile' is used it attempts to find a relative directory named 'remote-profile'.
2. You need to set sourceMapPathOverrides in your launch.json config, the value of which depends on your OS:
   OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
   Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
   Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }
   (Note: I have not tested the Windows or Linux versions)

Here is my working launch.json on OSX:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

For this to work, run ng serve in a terminal, then hit F5 inside of Visual Studio Code.

Here are the versions I'm working with:

• angular-cli: 1.0.0-beta.24
• node: 7.3.0
• Chrome: 55.0.2883.95
• Visual Studio Code: 1.8.1
• VSCode Extension "Debugger for Chrome" msjsdiag.debugger-for-chrome: 2.4.2