vscode doesn't stop on Unbound breakpoint / with no error messages in trace

[eostermueller]

Describe the bug Breakpoints show up as "unbound" and vscode does not stop, even with "debugger" line placed in source.

To Reproduce Steps to reproduce the behavior:

1. clear all breakpoints / create breakpoints. The "unbound" label is not present.
2. In debug window, launch "ng serve" with trace set to true in launch.json.
3. Chrome browser launches, console.log messages in code near the breakpoint display in the console. "Unbound" label displays for the two breakpoints.
4. ...but vscode never stops :-(

This zip file contains trace logs, directories showing locations of all files, and other goodies from angular 13.1 configuration.

vscode-wont-stop-on-breakpoint.zip

VSCode Version

Version: 1.63.2 (user setup) Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3 Date: 2021-12-15T09:40:02.816Z Electron: 13.5.2 Chromium: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Windows_NT x64 10.0.19043

More Detail

I've enabled trace in the launch.json and I can't find any obvious errors.

On a small, trivial sample app, I've got breakpoints working just fine. So I compared the trace files from the 'broken' and 'working' sessions and there are big differences that, to someone who knows the vscode code base, would likely point to the problem. The screenshot logfile-comparison.png shows some of the main differences. Mostly, there is important looking activity missing from the "broken" log. In fact, in the "working" log, for each line that was absent from the broken log, I added a "X" prefix to the log.

For example, as shown in the following screenshot, the line with "Debugger.paused" shows up in the working log (on the right) but does not show up in the broken log (on the left). Also there are all kinds of lines starting with "SourceMap: mapping webpack" in the working log that are missing from the broken log.

Things that I've tried:

The webpack version is the same for both broken and working projects, so that doesn't seem like the problem. I used the exact same launch.json for both broken and working projects. ...and the initial part of the log that shows sourceMap configuration looks nearly identical.

I'm new to source maps so I was real confused when debugging worked for the small project even tho I couldn't find any .map files on the file system.

At one point in the broken project I generated map files from the ng command line. The "unbound" label for the breakpoints went away, but the debugger never stopped on the breakpoint line. I saw one Suggestion to delete and recreate the break points. I tried that multiple times with no love.

I looked at the working/broken logs in the following tool, and did not see anything interesting/buggy. https://microsoft.github.io/vscode-pwa-analyzer/index.html

Files in the attached zip

breakpoints.png broken-angular.json broken-dir.txt broken-launch.json broken-package.json broken-tsconfig.json broken-tslint.json broken-webpack-version.txt BROKEN_vscode-debugadapter-d3f49cdf.json logfile-comparison.png NEUTERED_BROKEN_vscode-debugadapter-d3f49cdf.json NEUTERED_working_vscode-debugadapter-9c856f1a.json readme.txt working-angular.json working-dir.txt working-package.json working-tsconfig.json WORKING_vscode-debugadapter-9c856f1a.json

launch.json

{
  "name": "ng serve",
    "trace": true,
  "sourceMaps": true,
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "type": "pwa-chrome",
  "request": "launch",
  "preLaunchTask": "npm: start",
  "url": "http://localhost:4200/"

},

[eostermueller]

Here are updated directory listings using ms-win "tree /A /F" that shows directory tree and files....the versions in the above zip only contained the directories. broken-dir2.txt working-dir2.txt

[connor4312]

It looks like your not-working log does not have Angular configured to emit sourcemaps. I see the console log is coming from main.js, but main.js doesn't have any associated sourcemaps.

Relevant section of the docs: https://angular.io/guide/workspace-config#source-map-configuration