Add a context menu item to open the JS scripts in DevTools debugger by canova · Pull Request #5295 · firefox-devtools/profiler

canova · 2025-01-07T14:44:08Z

This is a deploy preview for Bug 1925391.

It adds a context menu item for call node context menu to open the JS source code in the devtools debugger directly if the tab and browser connection still exists.

Unfortunately it's not possible to simply give a deploy preview. It needs to be a newly captured profile since it relies on the browser web channel connection to be alive.

The recent Firefox Nightly should have the web channel now. So you use any nightly version that includes the patch from Bug 1925391. Here's how to test it locally:

Go to about:config, change devtools.performance.recording.ui-base-url to https://deploy-preview-5295--perf-html.netlify.app.
Go to about:profiling and enable the JS Execution Tracing feature.
Start the profiler using profiler popup.
Go to any website, e.g. https://en.wikipedia.org/wiki/Main_Page
Capture the profile.
Go to flame graph in the opened profile and right click any JS frame.
Click Show the function in DevTools.

codecov · 2025-01-07T14:52:33Z

Codecov Report

Attention: Patch coverage is 14.81481% with 46 lines in your changes missing coverage. Please review.

Project coverage is 85.94%. Comparing base (f07cfdc) to head (9a4fb2e).
Report is 15 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/shared/CallNodeContextMenu.js	15.90%	31 Missing and 6 partials ⚠️
src/app-logic/browser-connection.js	20.00%	3 Missing and 1 partial ⚠️
src/test/fixtures/mocks/web-channel.js	0.00%	3 Missing ⚠️
src/app-logic/web-channel.js	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5295      +/-   ##
==========================================
- Coverage   86.07%   85.94%   -0.13%     
==========================================
  Files         311      311              
  Lines       29657    29710      +53     
  Branches     8196     8211      +15     
==========================================
+ Hits        25528    25535       +7     
- Misses       3547     3586      +39     
- Partials      582      589       +7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

julienw · 2025-01-27T17:52:18Z

When I tried it it worked sometimes but sometimes it didn't. I'm not sure how to debug, I don't see any useful message in the Browser Console...

When it doesn't work, it still opens the devtools, but not the file itself. Do you have an idea of where it could come from?

Also I noticed that sometimes the function for an addon appears, we also show the item "show function in devtools" for these, but it should probably be filtered out.

julienw

Thanks, this looks good to me. I think we can figure out the cases where it doesn't work well in follow-ups.

There's one comment that should be simple (check that the tabID is present when rendering too).
Also do you think you could do a test that actually clicks the menu item? I see you added a web channel mock but don't use it at the moment. This would exercise the webchannel code, even though I know this isn't perfect because this is just a mock.

Also just a note about my previous comment:

Also I noticed that sometimes the function for an addon appears, we also show the item "show function in devtools" for these, but it should probably be filtered out.

After discussing with @ochameau in the office, he thinks we should keep it, and display it in the debugger. There's a setting controlling this, off by default for now, but that will be toggled to on by default later... Good to discuss in a dedicated bug, I think :-)

julienw · 2025-01-28T13:50:08Z

    const fileName =
      filePath &&
      parseFileNameFromSymbolication(filePath).path.match(/[^\\/]+$/)?.[0];
+    const showOpenDebuggerItem =


should we check for the tabId here as well? I think we should (and an additional test should check it).

I think this happens when debugging Firefox frontend code for example.

Yeah, that's right. Updated here to check the tabId as well.

canova · 2025-01-30T13:26:49Z

Thanks for the review!

When I tried it it worked sometimes but sometimes it didn't. I'm not sure how to debug, I don't see any useful message in the Browser Console...

Hmm, that might be the case where we don't have the browserId, but it's worth checking it still. I will look at it as a follow-up.

When it doesn't work, it still opens the devtools, but not the file itself. Do you have an idea of where it could come from?

Not so sure about this one. This case might be when we have tabId, but maybe when we don't have the proper script url, or some other issue. I will look into that as well.

Also do you think you could do a test that actually clicks the menu item? I see you added a web channel mock but don't use it at the moment. This would exercise the webchannel code, even though I know this isn't perfect because this is just a mock.

To be honest, I don't think adding this test would give us any more test coverage. As like you said, it would mostly test the moch webchannel. And the rest of that code is only the plumping of variables to the webchannel without touching the values. It doesn't have any logic in them, so I would prefer to skip adding a test for this right now. If we add some logic to these code paths, then it makes sense to add some tests to excersize these behaviors.

Also I noticed that sometimes the function for an addon appears, we also show the item "show function in devtools" for these, but it should probably be filtered out.
After discussing with @ochameau in the office, he thinks we should keep it, and display it in the debugger. There's a setting controlling this, off by default for now, but that will be toggled to on by default later... Good to discuss in a dedicated bug, I think :-)

Yeah, sure I can file a bug for this one.

Updates: [Julien Wajsberg] Some more small refactorings (#5320) [Markus Stange] Pass the correct sample index offset to getTimingsForCallNodeIndex for the flame graph tooltip. (#5328) [Nisarg Jhaveri] Update docs to include Android Studio/Simpleperf trace file support (#5309) [Markus Stange] Don't pass the preview filtered thread to getTimingsForPath/CallNodeIndex. (#5329) [Nazım Can Altınova] Add a "Sample timestamp" field to the sample tooltip in timeline (#5322) [Markus Stange] Reduce confusion between call tree summary strategy aware samples and regular samples (#5330) [Markus Stange] Rename this getCounter selector to getCounters. (#5337) [Markus Stange] Make sample indexes compatible between the unfiltered and (preview) filtered call tree summary strategy samples when using an allocation strat> [Markus Stange] Remove some code that uses the preview filtered thread (#5336) [Markus Stange] Remove getMarkerSchemaName special cases - look up marker schemas from data.type and nothing else (#5293) [Markus Stange] Remove the makeProfileSerializable step - make the raw in-memory profile match the format that's stored in the file (#5287) [Nicolas Chevobbe] Adapt FilterNavigatorBar to High Contrast Mode. (#5257) [Nicolas Chevobbe] Adapt Tracks to High Contrast Mode. (#5252) [Markus Stange] Adjust string index fields in markers when merging threads (#5344) [Theodoros Nikolaou] Localize title and aria label in ProfileName (#5345) [Julien Wajsberg] Adapt time-slice selection in High Contrast Mode. (#5259) [Markus Stange] Make stackTable (sub)category derived data (#5342) [Markus Stange] Compute cpuRatio values when computing the derived thread (#5288) [Nazım Can Altınova] Add a context menu item to open the JS scripts in DevTools debugger (#5295) Also thanks to our localizers: el: Jim Spentzos fr: Théo Chevalier it: Francesco Lodolo [:flod] zh-TW: Pin-guang Chen

canova force-pushed the js-tracer-source branch from 6248413 to 2184636 Compare January 16, 2025 10:01

canova force-pushed the js-tracer-source branch 4 times, most recently from d8cd9ec to 9a4fb2e Compare January 23, 2025 12:42

canova marked this pull request as ready for review January 23, 2025 12:42

canova requested a review from a team as a code owner January 23, 2025 12:42

flodolo approved these changes Jan 23, 2025

View reviewed changes

canova requested review from a team and julienw January 23, 2025 12:46

flodolo approved these changes Jan 23, 2025

View reviewed changes

canova changed the title ~~[deploy preview] Add a context menu item to open the JS scripts in DevTools debugger~~ Add a context menu item to open the JS scripts in DevTools debugger Jan 23, 2025

julienw approved these changes Jan 28, 2025

View reviewed changes

canova added 3 commits January 30, 2025 13:44

Add a context menu item to open the JS scripts in DevTools debugger

8c980d0

Convert the CallNodeContextMenu tests to use screen

f448aac

Add some tests for the new call node context menu item

5e5a7ca

canova force-pushed the js-tracer-source branch from 9a4fb2e to 5e5a7ca Compare January 30, 2025 13:25

canova enabled auto-merge January 30, 2025 13:27

canova merged commit d888078 into firefox-devtools:main Jan 30, 2025

canova deleted the js-tracer-source branch January 30, 2025 13:27

canova mentioned this pull request Jan 30, 2025

Deploy Jan 30, 2025 #5348

Merged

canova mentioned this pull request Jul 29, 2025

Allow opening JavaScript locations (via view-source or devtools' debugger) #1297

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add a context menu item to open the JS scripts in DevTools debugger#5295

Add a context menu item to open the JS scripts in DevTools debugger#5295
canova merged 3 commits into
firefox-devtools:mainfrom
canova:js-tracer-source

canova commented Jan 7, 2025 •

edited

Loading

Uh oh!

codecov Bot commented Jan 7, 2025 •

edited

Loading

Uh oh!

julienw commented Jan 27, 2025

Uh oh!

julienw left a comment

Uh oh!

Uh oh!

julienw Jan 28, 2025

Uh oh!

julienw Jan 28, 2025

Uh oh!

canova Jan 30, 2025

Uh oh!

canova commented Jan 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

canova commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

julienw commented Jan 27, 2025

Uh oh!

julienw left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

julienw Jan 28, 2025

Choose a reason for hiding this comment

Uh oh!

julienw Jan 28, 2025

Choose a reason for hiding this comment

Uh oh!

canova Jan 30, 2025

Choose a reason for hiding this comment

Uh oh!

canova commented Jan 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

canova commented Jan 7, 2025 •

edited

Loading

codecov Bot commented Jan 7, 2025 •

edited

Loading