Demolish the web with the Firefox Dev Tools!

Daniele Scasciafratte, Mozilla Reps, Co Founder/CTO Codeat

Demolish the web with the Firefox Dev Tools

Daniele Scasciafratte @Mte90Net, Mte90.Net

It's me, Mario ehm Daniele!

Me

How it's done?

Handmade

Destroy it

Firebug

It allows you to interact with the DOM, and the page itself, execute and study JavaScript.
Avalaible also for Google Chrome and as a JavaScript snippet.
Slows the browser and is not integrated natively

Obsolete! Retired!

Firefox Developer Edition

Show me the settings!

We want rules ehm ruler!

Demo time

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!

Support for ::before and ::after


jQuery events


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

Screenshot the selected node

JSON Source View

Filter Editor

CSS Docs tooltip


Save your fingers from search and click on Google!

Switch unit size

Drag & Drop the DOM

Highlight all elements by selector

Grid Tool

Animation Editor

Animation proprerty

Geometry Editor

Cubic Bezier Editor

Toggle CSS class

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

Media query


Network Throttling


Console

JavaScript Errors


JavaScript Debugger

Network

Network Stack Trace


Compare perfomance of cache vs no-cache

Profiler

Storage

Scratchpad



Valence (Firefox Developer Tools Adapters)

Addon that add the support for Remote Debugging on browser not Gecko-Based (Chrome, Chrome for Android and Safari for iOS).
https://developer.mozilla.org/en-US/docs/Tools/Valence

Tool's Extensions

WebSocket

About:debugging


DevTools Reload

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

Debugger.html


WebAssebly Explorer

Link

Question?

Red panda (Firefox)
Daniele Scasciafratte | @Mte90Net | Slides: mte90.github.io/Talk-DevTools