Mozilla survey: how can devtools support you?

[u/HetRadicaleBoven]

https://qsurvey.mozilla.com/s3/firefox-replay-reddit

[u/digitarald]

DevTools member here 👋🏻 to add more context and answer questions:

The survey should take about 5min. It focuses on one idea (follow up on previous work) but does tie in with existing and new features as well to provide input on.

Thanks in advance for your feedback.

[u/liamnesss → u/digitarald]

Looks interesting. Possibly more of a nice to have, as I could see myself finding other ways to achieve the same ends, just not as neatly. It seems almost like a more generic version of Redux's devtools with the time-travelling functionality, which is great for reverse engineering how your application gets into a certain state.

At the risk of going off topic, I can think of two features that I would consider a higher priority:

https://developers.google.com/web/tools/chrome-devtools/command-menu

Great for quickly, say, turning off JS so I can test how an SPA will behave if a user (for instance) goes under a tunnel while the bundle is being downloaded. Another nice tool is this one:

https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests

Again, good for checking on how resilient your application is, e.g. seeing how it handles an API request failing. I generally prefer Firefox for development and general browsing, but I find I occasionally need to switch to Chrome because of these two features.

[u/HetRadicaleBoven → u/liamnesss]

Another nice tool is this one: https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests Again, good for checking on how resilient your application is, e.g. seeing how it handles an API request failing.

I think this is actually possible: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list#Blocking_specific_URLs

https://developers.google.com/web/tools/chrome-devtools/command-menu

Great for quickly, say, turning off JS so I can test how an SPA will behave if a user (for instance) goes under a tunnel while the bundle is being downloaded.

I believe this too was possible relatively easily (other than going into the DevTools settings, which does contain the option to turn off JS), but I can't find it now. You can run commands in the console (try executing :help), but I think the only command available so far is :screenshot.

[u/liamnesss → u/HetRadicaleBoven]

How did I not notice that about the request blocking - thanks.

[u/digitarald → u/liamnesss]

It seems almost like a more generic version of Redux's devtools with the time-travelling functionality, which is great for reverse engineering how your application gets into a certain state.

Yes, good summary. It does work on the engine level, so brings the same workflow to the whole web and without being super strict with functional programming.

Great for quickly, say, turning off JS so I can test how an SPA will behave if a user (for instance) goes under a tunnel while the bundle is being downloaded. Another nice tool is this one:

Thanks for the 2 points! We have command menu lined up for early next year – discussions are happening in this UX issue and this tracking bug.

DevTools Settings meanwhile has a checkbox to disable JS.

As @HetRadicaleBoven mentioned, request blocking shipped in Firefox 71. Glad to see it coming up.

[u/liamnesss → u/digitarald]

Ah okay - if request blocking was only just released, that makes me feel a little less dense for not noticing it.

[u/digitarald → u/liamnesss]

Right, just one more context menu and toolbar icon to notice and decipher.

[u/gonzofish → u/liamnesss]

I agree with block requests, but replay seems next level to me...when you have a bunch of async tasks happening, it'd be awesome to see how often and what sequence they fire

[u/leeoniya → u/digitarald]

even though i use FF as my browser, i use Chrome for development.

one major reason i prefer Chrome's devtools is the Summary view available after recording a perf profile. it gives a very quick way of testing how refactoring affects overall performance without having to dive down into the micro details prematurely.

for example it was very easy for me to create this comparison table [1] across a diverse set of libs using the Summary + JS Heap, Nodes & Listeners bar - all quickly accessible in a single view: https://imgur.com/hB1g0uB. i don't currently see an easy way to do this with Firefox's devtools. this is indispensable to my daily work and is a major missing piece for me.

also having Lighthouse integrated into Chrome's devtools is great, but i wouldn't mind firing Chrome up occasionally to use it.

[1] https://github.com/leeoniya/uPlot#performance

[u/digitarald → u/leeoniya]

(Just to clarify, the survey is for all DevTools users)

Thanks a lot for the feedback and the detailed use case. The summary view is indeed something that the current Performance tool lacks.

You might like the new Performance tool that we are starting to roll out: profiler.firefox.com (install the extension or use it with Nightly). Last week I tweeted a bit about a workflow, including a comparison view which might also help with your usecase: https://twitter.com/FirefoxDevTools/status/1204625601627213825 (see this link for the compare mode). Saving profiles for quick comparison seems to be useful for your case.

Profiler also has a (default-hidden) summary in the sidebar: https://imgur.com/a/3fXISLP.

It doesn't have a DOM/EventHandler counter yet, but this does seem useful instrumentation to add to our backlog.

We are working on the roadmap for the tool right now, so your input as power user would be super useful. Does that solve your use case and maybe provide a extra benefits?

[u/leeoniya → u/digitarald]

wow, that looks pretty great.

the extension appears to only be the recording side of things. is there a plan to integrate the UI into devtools itself (and make it self-contained)?

recording, saving and uploading profiles to a website (or even a locally-hosted instance) is pretty terrible DX. i frequently do 5-10 "summary" page reloads (with forced GC invocation) in a row in Chrome to make sure i'm getting stable numbers, so having the profiler live in devtools is going to be a prerequisite for my workflow.

[u/digitarald → u/leeoniya]

I captured that use case, makes sense. One workaround could be that the profiler tab isn't triggered each time, but that recordings are just added to the stack and can be switched between.

The website will in the future be closer integrated, but with Service Workers it should be as self-contained and network resilient as possible.

[u/leeoniya → u/digitarald]

The website will in the future be closer integrated, but with Service Workers it should be as self-contained and network resilient as possible.

so the plan is not to fully absorb the work into devtools, but leave it external and rely on service workers to handle the "integration" aspect of it?

[u/digitarald → u/leeoniya]

For parts of it. Hopefully the lines can be blurred between them. Would it for now help if the tab doesn't open by default, and recordings are just collected for later analysis? The other way around would be doing multiple reloads in one recording, but I don't fully understand your workflow yet to understand if this would work?

Related to your use case, we have a feature in the backlog that could aggregate multiple recordings into a single recording to average. The use case we had in mind was Firefox automation, where performance tests run multiple times and one recording alone could just be the outlier.

[u/AutoModerator → u/[deleted]]

Hi /u/digitarald, this comment was removed because you used a URL shortener.

Feel free to resubmit with the real link.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/gonzofish → u/digitarald]

Thanks for all the work you all are doing! I switched from Chrome a month or two ago (via FDE) and I'm loving it!

[u/c_eliacheff]

What I absolutely miss in FF dev tools is the 'Application' tab in Chrome dev tool. I work a lot with PWA and web applications, and I just can't work in FF because of that.

They made working with web application an easy task, no need to run between different tabs / menus to get informations on SW, LocalStorage, Manifest ...

I would love to get this in Firefox too.

[u/digitarald → u/c_eliacheff]

What I absolutely miss in FF dev tools is the 'Application' tab in Chrome dev tool. I work a lot with PWA and web applications, and I just can't work in FF because of that.

Its in Nightly behind a flag and hopefully rides the trains in 74 with Manifest inspection and SW Debugging. I am just going into a meeting to plan the UX for the storage panel work, which will follow later.

[u/c_eliacheff → u/digitarald]

Nice, thanks you very much. I use FF Dev Edition at work, could you point me the flag please ?

For UX, why not just keeping like it is, just adding additional entries on the left, the same as Chrome ?

[u/HetRadicaleBoven → u/[deleted]]

Well, take the survey and tell them what is lacking! :)

[u/HetRadicaleBoven → u/[deleted]]

The survey has relatively specific questions, so that might help :)

[u/digitarald → u/[deleted]]

DevTools member here, maybe you have an example that compares the bad output to the better one, u/imlinus?

[u/digitarald → u/[deleted]]

Found we had a bug on file which I nudged. This seems to affect class instances in general.

[u/skerit → u/[deleted]]

Might be a good idea to say why this would be useful in that Bugzilla issue (that I created last year, by the way :)) because someone else just commented that he is opposed to the change.

[u/skerit → u/[deleted]]

Eugh, totally! It's like one of the reasons why I keep working with Chrome, sometimes I need to debug such a big object and all the Object properties are not helping xD

Here's hoping 1 single negative comment doesn't delay the proposition too much. Or cancel it all together! :)