Angular error logging prevents stackfraces from displaying properly

[maurei]

Describe the bug
I have been unable to get a debugging experience going on the way I envision it. This is occurring with a freshly generated angular app (ng new app-name, v11). I enabled sourcemap in launch.json, see repro.

The issue is that when errors are thrown, the output in debug console is not very helpful:

Note that the file in which the error is thrown is main.js and clicking it doesn't lead anywhere. What I am expecting to have it the same in chrome devtools: where I get a correctly mapped stacktrace which links, in this case, to the app.component.ts file.

To Reproduce

• VS Code Version: 1.55.2 (3c4e3df)
• OS Version: macOS 10.15.7

Steps to Reproduce:

1. Clone https://github.com/maurei/visual-studio-debugging-angular-report
2. Run ng serve
3. Attach debugger
4. Notice the stack trace of the error that is thrown: it does not contain useful stacktraces

[connor4312]

This actually works in the js-debug side of things. The issue is more that the debug console doesn't support multiline strings. The Error line here has the stacktrace on subsequent lines, but these are hidden:

Compared to Chrome devtools where they're visible:

@isidorn let me know if you want help with this, my debt week work is quite light.

[isidorn]

@connor4312 yeah I believe we escape newilnes in the debug console by this css property here

And here

We would need to check if this works nicely both when wordWrap for debug console is turned on and off via debug.console.wordWrap setting.

If you have time help is welcome, and I can provide more pointers / info if needed :)

Also the debug console uses the tree dynamic height calculation to get the height of each element. Changing this can lead to debug console not auto scrolling sometimes. Dynamic height and the initial approximation is calculated here

[isidorn]

Leaving this up to you @connor4312 since you have the context. And will not assign @roblourens