SourceMap mapping webpack to wrong file location in VSCode Debug

[pderks]

OS: Windows 10
angular-cli: 1.0.0-beta.16
node: 6.7.0

When creating a new project using the angular-cli and attempting to debug, none of the breakpoints I am setting are being hit. After looking into the log file for the debugger I have found that webpack is mapping to the wrong source location. I have listed repro steps along with the location of a log file, my launch configurations and an example of what I am seeing when I say that webpack is mapping to the wrong location. I was hoping someone had some insight into why this is happening.

Repro steps:

1. Download Debugger for Chrome in VS Code
2. Create new project using angular-cli
3. Set Launch.json configurations to launch in chrome with diagnosticLogging set to true
4. Set breakpoints in typescript files and Launch the app
5. Log file can be found at C:\Users{{your username}}.vscode\extensions\msjsdiag.debugger-for-chrome-0.5.2\vscode-chrome-debug.txt

Example from the log (entire log file attached):
vscode-chrome-debug.txt

SourceMap: mapping webpack:///C:/Users/pderks/Desktop/test-app/src/app/app.component.ts => c:\Users\pderks\Desktop\test-app\C:\Users\pderks\Desktop\test-app\src\app\app.component.ts

**Notice that the path c:\Users\pderks\Desktop\test-app is appearing twice.

Launch configurations:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"diagnosticLogging": true,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}

[sdiprizio]

Thanks to your comment I finally succeeded in debugging an angular-cli (1.0.0-beta.16 with webpack) generated app in vscode.

You need to remap webpack:///* in launch.json.

Here's my lauch.json:

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

diagnosticLogging is optional (very verbose and hard to read in vscode console, the best is to read ~/.vscode/extensions/msjsdiag.debugger-for-chrome-0.5.2/vscode-chrome-debug.txt and search relevant info in any text editor).

Hope this helps.

[yuri1969]

@sdiprizio Thanks, it seems to be detecting the source maps for the bundle now. Although, it still can't hit a single breakpoint in VSCode.

[duncanhunter]

Thanks @sdiprizio this works for me.

@yuri1969 I found I needed to make sure I only had one chrome tab open for this to work.

[pderks]

@sdiprizio Thanks! After mapping wepack to the correct location I was able to hit break points when navigating to different areas my site. I thought I'd note though that I had to change the override to map like this:

"sourceMapPathOverrides": {
"webpack:///C:/Users/{{username}}/Dekstop/test-app/": "C:/Users/{{username}}/Desktop/test-app/"
}

[yuri1969]

OK, the key was analysis of the ~/.vscode/extensions/msjsdiag.debugger-for-chrome-<version>/sourceMapPathOverride.txt logfile.

You have to tweak the sourceMapPathOverrides in launch.json until you see the mappings themselves in the logfile. Eg.:

SourceMap: mapping <in_path> => <out_path>, via sourceMapPathOverrides entry - ""

It seems the problem, in my case, are Windows path delimiters vs. URL ones. The webpack path looks like: webpack:///c:/foo/bar/angular-project, although ${workspaceRoot} is: c:\foo\bar\angular-project. Thus there is a mismatch in the separators which can be worked-around by hardcoding the webpack path.

My final setup:

{
          "name": "Launch Chrome against localhost, with sourcemaps",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:4200/",
          "sourceMaps": true,
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": {
              "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
          }
 }

[jorgeas80]

The file vscode-chrome-debug.txt isn't generated in my case at that directory, but applying the launch.json @sdiprizio wrote, it worked for me. And I also had to make sure I only had one chrome tab open for this to work, like @duncanhunter

[rodries]

In Windows with

             "sourceMapPathOverrides": {
                 "webpack:///C:*":"C:/*"
             }

is enough.

Also I recommend add:
"userDataDir": "C:\\temp\\chromeDummyDir",
So a new chrome instance will be open with debug enabled

And change the WebRoot
"webRoot": "${workspaceRoot}/src",

Another tip

"runtimeArgs": [
                "--disable-session-crashed-bubble",
                "--disable-infobars"
            ],

Now the message "Chrome didn't shut down correctly" will be disabled

[cgatian]

@rodries were you able to get this to work with webpack-dev-server?

[jmesa-sistel]

@cgatian if you mean "ng serve" command then yes.
Run ng serve, then adjust vs code configuration with the proposed changes (select debug with Chrome).
Now you can debug without problems (at least in my case)

[filipesilva]

Great investigation work everyone! This has been an outstanding issue for a while now so I appreciate the effort that has gone into figuring out solutions.

The override seems to work, but if this is fixable within the CLI we'd like to do it. Off the top of my head it sounds like a VSCode Chrome debugger problem because:

• source maps appear to be working correctly in chrome
• this mapping (done by the debugger) shows some kind of broken mapping:

SourceMap: mapping webpack:///C:/Users/pderks/Desktop/test-app/src/app/app.component.ts => 
c:\Users\pderks\Desktop\test-app\C:\Users\pderks\Desktop\test-app\src\app\app.component.ts

In this issue https://github.com/Microsoft/vscode-chrome-debug/issues/158 there seem to be reports of stuff 'just working', so I wonder is something is amiss on the CLI's end.