microsoft / microsoft/vscode-js-debug

Support for "Friendly Call Frames" in call stack, like Chrome's devtools

Open
#2,054 1 comment 2 reactions 1 assignee View on GitHub

@connor4312 is already working on this.

Since Aug 8, 2024.

feature-request
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:
image

After:
image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.