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.
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
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.
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/
Seems very interesting, I will add it in the slides
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.
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).
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.
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.
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.
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:
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.
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.