Firefox is ready for the modern dev?

Daniele Scasciafratte @Mte90Net, Mte90.Net

It's me, Mario ehm Daniele!

Co-Founder Codeat (Web Agency)
Open Source MultiVersal
WordPress 🇮🇹 Community
Translator/Developer
WordPress Core Contributor
Industria Italiana del Software Libero
Mozilla 🇮🇹
Mozillian & Mozilla Rep
& Mozilla Reps Council
& Mozilla Tech Speaker

How it's done?

Handmade & Crafting

Destroy it

Show me the settings!

The best way to start

Inspector

Ctrl + Shift + I or left button "Inspect element" https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Daniele, Don't forget to show the contextual menu!

Useless Rules

Whitespace Nodes

Event bubble

The tooltip show the Javascript code and not the wrapper generated from jQuery

Screenshot the selected node

JSON Source View

Filter Editor

Font used underlined

Font panel with preview

Switch unit size

Shape path tool

Drag & Drop the DOM

Right menu

Highlight all elements by selector

Toggle class quickly

Grid Tool

Animation Editor

Animation proprierty

Geometry Editor

Shadow DOM

Style Editor

Shift + F7
https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

Support for VIM/Emacs/Sublime Text

On about:config set devtools.editor.keymap as vim or emacs or sublime text

SourceMaps Support

Responsive View

Ctrl + Shift + M
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

Media query

Network Throttling

Console

Ctrl + Shift + K
https://developer.mozilla.org/en-US/docs/Tools/Web_Console.

Tips for the console

If you have an element currently selected in your Inspector, you can use the reference $0 to call it within your code. For example, to see the elements' contents you would type $0.innerHTML.
For previous you can use temp0 and so on.

To access to the document.querySelectorAll you can use $$.
To access to the document.querySelector you can use $.
To access to the previous value returned in console $_.

To copy the HTML of object you can use copy($0).
To inspect an object inspect($0).

Console.group()

JavaScript Errors

JavaScript Debugger

Ctrl + Shift + S
https://developer.mozilla.org/en-US/docs/Tools/Debugger

Debugger method

Pinned Breakpoints also on code changes

JavaScript Debugger Conditional

Search on the project

JS Framework detection

Debugger.html

debugger.html is a hackable debugger for modern times, built from the ground up using React and Redux.

Mozilla created this debugger for use in the Firefox Developer Tools. We hope to not only to create a great debugger that works with the Firefox and Chrome Debugging Protocol but development community that can embed this debugger in your own projects with tools like NPM.

https://github.com/devtools-html/debugger.html