TOOL DI SVILUPPO

Daniele Scasciafratte, CodeMotion Webinar

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

•••••••••

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

•••••••

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 : : b e f o r e e : : a f t e r

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 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

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 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

ESTENSIONI PER I TOOL

AngularJS Inspector

Ember Inspector

Grunt Task Runner

DevTools Prototyper

••••

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

•••••