Download - Tech Webinar: Firefox Developer Tool
![Page 1: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/1.jpg)
TOOL DI SVILUPPO
Daniele Scasciafratte, CodeMotion Webinar
![Page 2: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/2.jpg)
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
•••••••••
![Page 3: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/3.jpg)
PERCHÈ USARE I TOOL INVECE DI UNALERT()?
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
•••••••
![Page 4: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/4.jpg)
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.
![Page 5: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/5.jpg)
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
![Page 6: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/6.jpg)
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!
••••••
![Page 7: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/7.jpg)
FIREFOX DEVELOPER EDITION
![Page 8: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/8.jpg)
INSPECTOR
Ctrl + Shift + I oppure tasto destro "Analizza elemento"
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
![Page 9: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/9.jpg)
SUPPORTO PER ::BEFORE E ::AFTER
Possiamo ispezionare : : b e f o r e e : : a f t e r
![Page 10: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/10.jpg)
JQUERY EVENTS
Il popup dimostra il codice Javascript e non il wrapper generato da
jQuery
![Page 11: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/11.jpg)
EDITOR DI STILE
Shift + F7
https://developer.mozilla.org/en-US/docs/Tools/Style_Editor
![Page 12: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/12.jpg)
SUPPORTO ALLE SOURCEMAPS
Esempio di configurazione dell'ambiente
![Page 13: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/13.jpg)
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
![Page 14: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/14.jpg)
CONSOLE
Ctrl + Shift + K
https://developer.mozilla.org/en-US/docs/Tools/Web_Console
![Page 15: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/15.jpg)
JAVASCRIPT DEBUGGER
Ctrl + Shift + S
https://developer.mozilla.org/en-US/docs/Tools/Debugger
![Page 16: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/16.jpg)
MONITOR DI RETE
Ctrl + Shift + Q
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
![Page 17: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/17.jpg)
PROFILER
Shift + F5
https://developer.mozilla.org/en-US/docs/Tools/Profiler
Hardware Acceleration Test | PeaceKeeper
![Page 18: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/18.jpg)
STORAGE
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
![Page 19: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/19.jpg)
WEB AUDIO EDITOR
https://developer.mozilla.org/en-US/docs/Tools/Web_Audio_Editor
Violent Theremin
![Page 20: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/20.jpg)
BLOCCO APPUNTI O SCRATCHPAD
Shift + F4
https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
![Page 21: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/21.jpg)
RESPONSIVE VIEW
Ctrl + Shift + M
https://developer.mozilla.org/en-
US/docs/Tools/Responsive_Design_View
![Page 22: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/22.jpg)
3D VIEW
Esempio interattivo
https://developer.mozilla.org/en-US/docs/Tools/3D_View
![Page 24: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/24.jpg)
WEBIDE
https://developer.mozilla.org/en-US/docs/Tools/WebIDE
![Page 25: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/25.jpg)
VALENCE (FIREFOX DEVELOPER TOOLSADAPTERS)
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
![Page 26: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/26.jpg)
ESTENSIONI PER I TOOL
AngularJS Inspector
Ember Inspector
Grunt Task Runner
DevTools Prototyper
••••
![Page 27: Tech Webinar: Firefox Developer Tool](https://reader033.vdocuments.net/reader033/viewer/2022042818/55aa7c521a28ab016d8b4785/html5/thumbnails/27.jpg)
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
•••••