Daniele Scasciafratte ci mostra le caratteristiche dei vari tool di Firefox e di come possono semplificare la vita ad uno sviluppatore, anche in ambito web.
Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD
Scrivici a: training@codemotion.it
Tw: @CodemotionTR
2. IT'S ME, MARIO EHM DANIELE!
Co-Founder Codeat
Fanatico Open Source
Sviluppatore
Geek
Debian user dal 2009
Wordpress Developer
Redattore per il network AndMore
Redattore per ChimeraRevo
Mozillian
•
•
•
•
•
•
•
•
•
3. 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
•
•
•
•
•
•
•
4. 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.
5. 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
6. 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!
•
•
•
•
•
•
13. SUPPORTO A VIM/EMACS
In a b o u t : c o n f i g impostare d e v t o o l s . e d i t o r . k e y m a p come
v i m o e m a c s o s u b l i m e t e x t
14. CONSOLE
Ctrl + Shift + K
https://developer.mozilla.org/en-US/docs/Tools/Web_Console
25. 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
26. ESTENSIONI PER I TOOL
AngularJS Inspector
Ember Inspector
Grunt Task Runner
DevTools Prototyper
•
•
•
•
27. LINK
Combinazioni di tasti
FirefoxDevTools su twitter
Template per lo sviluppo di estensioni per i tools
Mozilla Hacks - Categoria dedicata ai tools
FF Dev Tools User Voice
•
•
•
•
•