Cool features of Firefox Developer Tools

[Mte90 (Daniele Scasciafratte)]

I have a talk about Firefox Developer Tools and I want to upgrade with new features and features that only “us” have for our users.
Any suggestions for what is missing or is better to remove because now is outdated ( I mean that now is very common so is better to deserve space to new cool stuff).
The purpose of the talk is to let dev to switch on Firefox because we have better features, the target are web developer usually frontend people and not so much advanced so they doesn’t care so much about as example webassembly.

My slides: http://mte90.github.io/Talk-DevTools

[andreip]

Grid view, debugger.html’s colapsable stack traces for a list of common libraries, edit and resend in network, per request security tab, scratchpad. I will post more if I remember

This is an old page but it might be relevant https://www.facebook.com/HackWithTheFox/

The old debugger has symbol search and as-you-type search.

The new debugger looks like Chrome’s debugger which they love but it is a separate webapp that they can use in their own projects, it uses modern frameworks like React and Redux so if they want to add features they can hack it with only JS knowledge.

Various stuff has links to the MDN docs like css props or http headers, statuses.

Color picker in inspector. Decent shortcut keys (Ctrl+Shift+E - network, ctrl+shift+c - inspector, ctrl+shift+k - console). I use these 3 A LOT!

Font viewer. You can add/delete/edit cookies in Storage, You can see the events in the inspector (for example in this page on the itme with the ID main-outlet. Stack trace in the network tab in Nightly.

[pbro]

Hi Daniele, cool slides.

Slide 11 should probably be removed, unless you want to talk about in-progress stuff. Indeed, the “useless rules” feature has not landed yet.

Slide 43 mentions Valence which, unfortunately, we haven’t had time to work on much in the past, and we don’t have any automated tests for, so it’s essentially unmaintained for now. So I’m not sure how valuable it is to talk about.

Other than this, great content!

Maybe you could add more console tips and tricks, lie the copy() function which evaluates whatever is inside the parenthesis and copies the output toString value to the clipboard.
Also, right clicking on a node in the inspector provides some cool stuff: scroll into view, copy CSS path or xPath, use in console, etc.

In terms of new stuff, both the console (only in nightly for now) and debugger have brand new UIs. And the netmonitor, although it has the same UI as before, has been entirely rewritten: https://hacks.mozilla.org/2017/06/network-monitor-reloaded/

And of course, the new Layout panel (in nightly too) is a cool new addition to the inspector: https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

Hope that’s helpful.

[Mte90 (Daniele Scasciafratte)]

debugger.html’s colapsable stack traces

Seems very interesting, I will add it in the slides

Slide 11 should probably be removed, unless you want to talk about in-progress stuff. Indeed, the “useless rules” feature has not landed yet.

I will do the talk the next month at SHA2017 so is not so much a problem, I can also say that is a coming feature in case.

Slide 43 mentions Valence which, unfortunately, we haven’t had time to work on much in the past, and we don’t have any automated tests for, so it’s essentially unmaintained for now. So I’m not sure how valuable it is to talk about.

Good point also because now with debugger.html as feature is not required so much inside firefox, removed for that reason (the extension is marked as obsolete now in dev edition).

Maybe you could add more console tips and tricks, lie the copy() function which evaluates whatever is inside the parenthesis and copies the output toString value to the clipboard.

I missed copy() but that tips are never enough!

Also, right clicking on a node in the inspector provides some cool stuff: scroll into view, copy CSS path or xPath, use in console, etc.

I will do a screenshot for it!

Thank you for all the suggestions!

[Mte90 (Daniele Scasciafratte)]

Slides updated

[nachtigall]

Pretty nice presentation

On page 30 you have the old RDM. If you use e10s (unless there’s an addon blocking it) the new RDM should be there and it’s much better, e.g. allows to create and save one own’s pixel sizes.

I very often use “Scroll into View” (shortcut S) in the Inspector (context menu). And there’s also “Hide” (H), though I do not find it very helpful as it does not hide (display:none) like jQuery does but only set visibility to hide.

Also the netmonitor has “transferred” size (that is, what is transferred after gzip etc, instead of just file size). I think, but you might to double check that Chrome does not have this.

I personally find the Inspector much better than Chrome’s Elements because of the longish lines drawn at each element which greatly help to adjust/check minimal alignment problems.

As some general advice: The very last slide will be the one shown for most of the time. Now it just says “Questions”. I find it generally better to recap the most important takeaways on the last slide that is visible at the end.

[Mte90 (Daniele Scasciafratte)]

On page 30 you have the old RDM. If you use e10s (unless there’s an addon blocking it) the new RDM should be there and it’s much better, e.g. allows to create and save one own’s pixel sizes.

Right is the old one but the demo showed is pretty cool and I have no time to register a new gif (I have also Firefox not in english).

I very often use “Scroll into View” (shortcut S) in the Inspector (context menu). And there’s also “Hide” (H), though I do not find it very helpful as it does not hide (display:none) like jQuery does but only set visibility to hide.

I missed that I will add in the slides

As some general advice: The very last slide will be the one shown for most of the time. Now it just says “Questions”. I find it generally better to recap the most important takeaways on the last slide that is visible at the end.

Cool idea, I can add a remainder about hotkeys at the end

[nachtigall]

FWIW, one thing I also like and which differentiates when it comes to Chrome is that empty text nodes that take up space are not silently dropped but instead shown as small bullets. (I guess every web dev had this “Damn it” feeling when not know where horizontal space offsets where coming from and then just removing every white space in between tags.

FWIW, I also noted when giving some help to fellow devs that many cool features are off by default, so they did not know that these existed, e.g. the Storage tab or the Screenshot tab. So first thing I do is showing them how to enable it. Uh, I also very often use the Measurer tool quite often (also off by default). But anyway probably these are details…

As for addons, I sometime use the Pixel Perfect addon which is quite handy when you get a png design from your layouter.

[Mte90 (Daniele Scasciafratte)]

FWIW, I also noted when giving some help to fellow devs that many cool features are off by default, so they did not know that these existed, e.g. the Storage tab or the Screenshot tab. So first thing I do is showing them how to enable it. Uh, I also very often use the Measurer tool quite often (also off by default). But anyway probably these are details…

Yep I have a slide about the settings (I think) but I always show that for the same reason.

[Mte90 (Daniele Scasciafratte)]

I done the talk and I think that the most interesting parts to developer are the console command tips like $$ so I am looking for others tips for that because the tools after all are very similar with chrome.
I think that now the people is waiting a lot the new profiler.html version.

[Miron (Miron F)]

Multi line console like in fire bug, it’s a must have feature. I know there is scratchpad but in fire bug this feature was perfect.

[nachtigall]

Multi line console like in fire bug, it’s a must have feature. I know there is scratchpad but in fire bug this feature was perfect.

I don’t really know the multi-line feature of Firegbug, but I think you can just press + instead of to have this in DevTools Console. I think there’s also some parsing, e.g. if you enter "if " and press then Console automatically assumes something more is coming and goes into Multi-Line Mode.

[MironF]

I don’t really know the multi-line feature of Firegbug, but I think you can just press + instead of to have this in DevTools Console. I think there’s also some parsing, e.g. if you enter "if " and press then Console automatically assumes something more is coming and goes into Multi-Line Mode.

Yes of course, everything You wrote is true. But mechanism ported now in to console is super unintuitive and unusable for editing larger chunk of code. In Firebug was implemented instance of Code Mirror 2, so it was very easy and super user friendly solution to write more than one line of code. It was multiline editor with syntax coloring, lines numbering and lots more features. It was visible side by side with console so prototyping was super easy. You wrote, edited and after hit Run, you had seen result in cosnole without switching among diffrent tabs to see result. Here is example how it was working:

Console tab in Firebug - youtube video

There was also few addons which were expnadding posibilities of code editor ( Acebug - on mozilla addons).
I miss this solution very much in Dev Tools.

[Nicolas_Chevobbe]

Hello,

The multiline console is something many people liked, and there is a bug to have it in the devtools: https://bugzilla.mozilla.org/show_bug.cgi?id=1133849

It requires some UI/UX work though.

At the moment, you can open have the scratchpad in the toolbox, and have the split console, so you do see what you execute

[da4nic (Yuri)]

the great thing in firebug is possibility to save all cookies on disk. how do we get it dev.tools with f57+?

[StefanM (Stefan Müller)]

per request security tab

is there anything like this?
Chrome solved it quite well

[andreip]

Yeah, Chrome shows some info, but not all. TLS 1.0 and 1.1 will be deprecated in a few weeks. I can see in FF which requests use the old and the new protocol, I cannot in Chrome.