microsoft / microsoft/vscode-js-debug
Support for "Friendly Call Frames" in call stack, like Chrome's devtools
@connor4312 is already working on this.
Since Aug 8, 2024.
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 373
- Avg merge
- 1d 9m
- Merged PRs (30d)
- 6
Description
The debugger in Chrome browser's devtools has a feature called "Friendly Call Frames" that renders the call stack using the original/unminified function names, if those name mappings are defined at a specific location in a source map (.js.map) file. This provides a better developer experience than rendering minified or obfuscated function names. It would be great to have this feature in vscode-js-debug too.
I'll just copy the description from babel/babel#14907 because it describes how the feature works very well.
Before:
After:
To unminify a frame, you need to have a name attached to the
(of the declaration site. So, we need to have a name:function foo() { // ^ Here bar(baz); } function bar(callback) { // ^ Here callback(); } function baz() { // ^ Here throw new Error('test'); } foo();It doesn't matter that we've properly named the bar/callback/Error/foo identifiers at before the
(, the segment that includes the(must also include it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.