Smontiamo il Web con i Tool di Firefox!

Ovvero conoscere gli strumenti e come usarli al meglio

Tool di sviluppo

It's me, Mario ehm Daniele!

Me
  • Co-Founder Codeat
  • Fanatico Open Source
  • Sviluppatore
  • Geek
  • Debian user dal 2009
  • Wordpress Developer
  • Redattore per il network AndMore
  • Redattore per ChimeraRevo
  • Mozillian

Perchè usare i tool invece di un alert()?

  • Perchè è pessimo
  • Il valore è in formato stringa
  • Non si può studiare il contenuto del parametro
  • Perchè in produzione non è bello
  • Perchè si faceva prima del Web 2.0
  • Usiamo console.log/warn/trace/ecc [documentazione]
  • Con i tool possiamo studiare/analizzare la pagina

Firebug

Permette di interagire con il DOM e la pagina stessa, eseguire e studiare codice JavaScript.
Disponibile per Google Chrome e come snippet JavaScript.
Rallenta il browser e non è integrato nativamente (ancora per poco)

Elenco estensioni per FireBug
Alcune estensioni:
FireStorage Plus!, FirePicker, FireQuery,
FireLess/FireSASS, PageSpeed o YSlow.

Firebug.Next (Firebug 3)

La nuova versione è integrata con i tool di Firefox.






Espande i tool nativi con le funzionalità di Firebug.
Supporto per le estensioni di Firebug? Può darsi
Firebug.Next
  • Come possiamo fare debug su Firefox for Android o Firefox OS?
  • Come possiamo vedere le pagine in 3D?
  • Come possiamo studiare un'animazione WebGL?
  • Come possiamo testare il responsive?
  • Come possiamo fare tutte queste cose in remoto?
  • Con i tool integrati!

Firefox Developer Edition

Inspector










Ctrl + Shift + I oppure tasto destro "Analizza elemento" https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Supporto per ::before e ::after











Possiamo ispezionare ::before e ::after

jQuery events








Il popup dimostra il codice Javascript e non il wrapper generato da jQuery

Editor di stile










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

Supporto alle SourceMaps










Esempio di configurazione dell'ambiente

Supporto a VIM/Emacs










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

Console










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

JavaScript Debugger










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

Monitor di rete









Ctrl + Shift + Q
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

Profiler









Shift + F5
https://developer.mozilla.org/en-US/docs/Tools/Profiler
Hardware Acceleration Test | PeaceKeeper

Storage









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

Web Audio Editor










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

Blocco appunti o Scratchpad









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

Responsive View









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

3D View










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

Canvas debugger











Get WebGL - WebGL Water

WebIDE










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

Valence (Firefox Developer Tools Adapters)

Addon sperimentale che permette di utilizzare i tool di Firefox non solo con browser Gecko-Based.
Sfruttando il debug remoto al momento è possibile fare debug per Chrome, Chrome per Android e Safari per iOS
https://developer.mozilla.org/en-US/docs/Tools/Valence

Estensioni per i tool

Domande?

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