Add an "apply source map" button to the profile info panel#6200
Open
canova wants to merge 4 commits into
Open
Conversation
Change the return type from `Promise<void>` to a `Promise<'applied' | 'no-match' | 'error'>` so callers can tell a valid-but-unmatched run apart from a worker failure. The existing load-time caller in receive-profile ignores the value, so this is behavior-neutral. The following file based symbolication path will use the result to show proper errors in its UI
Pure helpers for the upcoming "apply a .map file from disk" flow: - getSourcesWithSourceMapURL lists the profile sources that carry a sourceMapURL and are therefore eligible targets for a source map. - parseSourceMapFileContents parses and validates a .map file, rejecting index maps. - matchSourceMapToSource auto-matches a user-supplied map to a source by filename/sourceMapURL basename, returning an 'ambiguous' result (with candidates) when more than one source could match. Handles ?query, backslash paths, and the ".map"/".json" suffixes browsers append when saving a map served as JSON.
Add a thunk that takes a .map file the user selected from disk, parses and auto-matches it to an eligible bundle source (or reports the match as ambiguous so the UI can prompt), then runs it through the existing doSourceMapSymbolication pipeline. Unlike the WebChannel path, eligibility only requires a sourceMapURL (no UUID id), since the map contents are supplied directly rather than fetched.
The profiler already has a full JS source-map symbolication pipeline, but it only runs at load time when the browser provides source maps over the WebChannel. Profiles loaded from a file (or whose maps the browser couldn't fetch) had no way to symbolicate JS stacks. This adds a button in the Profile Info panel that accepts a .map file from disk and feeds it into the applySourceMapFile pipeline. The button is shown whenever the profile has at least one source with a sourceMapURL. It reads the file, runs the apply action, and reports which source was resolved, prompting with a picker when the match is ambiguous and showing an error otherwise.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6200 +/- ##
==========================================
+ Coverage 83.63% 83.65% +0.02%
==========================================
Files 346 348 +2
Lines 37174 37360 +186
Branches 10318 10478 +160
==========================================
+ Hits 31090 31254 +164
- Misses 5656 5678 +22
Partials 428 428 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
flodolo
approved these changes
Jul 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Main | Deploy preview
Fixes #6195.
This PR adds a "Apply source map…" button to the Profile info panel, which can be used to apply any source map from the disk.
This is the new button:
When you select a source map, it looks at the file name of the .map file, and tries to match to any sourceMapURL fields in the source table. If there is a match, it automatically uses that source and applies the source map.
If it can't find any source that matches the name, or if it finds multiple sources that matches the name, then we prompt the user a select input to pick one. Once the source is picked, then we apply the source map at that point to the selected source.
This is the select when it can't match:
We also try to give some feedback to the user:
Here's an example profile to test:
This is a profile of profiler.firefox.com without the source map applied: Production / Deploy preview
And this is the source map for our main bundle: index-XVVABR7J.js.map.zip
(note you have to unzip it before using, apparently github doesn't allow uploading .map file extensions, so I had to zip it)
You can open this profile link, then click on the button and select this source map. You should see the applied source map function names as well as JS source contents.