Firefox Developer Tools

Gabriele Falasca

Firefox Developer Tools

Gabriele Falasca

Perchè non alert()?

  1. Perchè console.log() è più figo
alert

Developer Tools vs Firebug

Firebug

Developer Tools Nativi

DEVELOPER TOOLS OVERVIEW

INSPECTOR (shortcut Cmd/Ctrl + shift + I)

L'inspector ci permette di studiare tra l'altro ::before e ::after e gli eventi javascript/jQuery

DEVELOPER TOOLS OVERVIEW

STYLE EDITOR (shortcut shift + F7)

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

DEVELOPER TOOLS OVERVIEW

STYLE EDITOR (shortcut shift + F7)

L'editor di stile offre anche il supporto alle sourcemap dei preprocessori CSS (SASS/LESS) Esempio

DEVELOPER TOOLS OVERVIEW

CONSOLE (shortcut Cmd/Ctrl + shift + k)

https://developer.mozilla.org/en-US/docs/Tools/Web_Console

DEVELOPER TOOLS OVERVIEW

JAVASCRIPT DEBUGGER (shortcut Cmd/Ctrl + Shift + S)

https://developer.mozilla.org/en-US/docs/Tools/Debugger

DEVELOPER TOOLS OVERVIEW

MONITOR DI RETE (shortcut Cmd/Ctrl + Shift + q)

https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

DEVELOPER TOOLS OVERVIEW

PROFILER (shortcut Shift + F5)

https://developer.mozilla.org/en-US/docs/Tools/Profiler

DEMO

DEVELOPER TOOLS OVERVIEW

STORAGE

https://developer.mozilla.org/en-US/docs/Tools/Debugger

DEVELOPER TOOLS OVERVIEW

WEB AUDIO EDITOR

https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor

DEMO

DEVELOPER TOOLS OVERVIEW

SCRATCHPAD (shortcut Shift + F4)

https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

DEVELOPER TOOLS OVERVIEW

RESPONSIVE VIEW (shortcut Cmd/Ctrl + Shift + m)

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

DEVELOPER TOOLS OVERVIEW

3D VIEW

https://developer.mozilla.org/en-US/docs/Tools/3D_View

DEMO

DEVELOPER TOOLS OVERVIEW

CANVAS DEBUGGER

WebGL

DEMO

DEVELOPER TOOLS OVERVIEW

WEBIDE

https://developer.mozilla.org/en-US/docs/Tools/WebIDE

DEVELOPER TOOLS OVERVIEW

SUPPORTO A VIM/EMACS/SUBLIME

In about:config impostare devtools.editor.keymap come vim emacs o sublime text

DEVELOPER TOOLS OVERVIEW

VALENCE

Valence è un addon sperimentale che permette di utilizzare i developer tools di Firefox non solo con browser basati su Gecko, attraverso il debug remoto permetterà di testare e debuggare le nostre applicazioni su Chrome, Chrome per Android, Safari e Safari per iOS

https://developer.mozilla.org/en-US/docs/Tools/Valence