Skip to content

Update sourcemaps at function declaration sites #14907

@jridgewell

Description

@jridgewell

💻

  • Would you like to work on this feature?

What problem are you trying to solve?

Chrome is releasing a new feature called friendly call frames, where they'll use the sourcemaps's unminified names when rendering the callstack in dev tools:

Before:
Screen Shot 2022-09-02 at 12 54 28 PM

After:
Screen Shot 2022-09-02 at 1 19 57 PM

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.

Insert breakpoints whatever point you want in: https://gray-nifty-brook.glitch.me/

Describe the solution you'd like

We can take Terser's approach of generating a single segment for the full bar( (instead of one for bar and one for ().

Or, we can include the name as part of the individual segment for the (. This'll produce slightly larger sourcemaps (a single additional byte is necessary for each ().

Describe alternatives you've considered

Do nothing. DX is important, and this isn't acceptable.

Documentation, Adoption, Migration Strategy

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: sourcemapsi: discussionoutdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions