Ti aiuterà a migliorare le tue conoscenze ma anche capire come iniziare questo viaggio!
Con il rilascio di Firebug 2.0 è ora di riflettere sui developer tool disponibili su Mozilla Firefox e di fare un resoconto.
Uso sia i tool di sviluppo integrati nativamente nel browser Mozilla, che i tool messi a disposizione dall’addon Firebug, quindi con questo articolo (e i suoi eventuali aggiornamenti), stilerò un breve confronto dei pro e contro delle due soluzioni base (le estensioni verranno elencate ma non confrontate).
In poche parole di la tua nei commenti per migliorare questo confronto!
Aggiornamenti: Non sono molto frequenti, spesso introducono piccole novità e sono spesso indipendenti dalla versione di Firefox
Estensioni: Ci sono moltissime estensioni e con il tempo alcune sono state integrate come FireCookie o EventBug.
Io uso:
- FireStorage Plus! per gestire localStorage
- FirePicker per il color picker (non lo hanno mai voluto integrare, avevo creato un ticket specifico)
- FireQuery aggiunge un supporto più avanzato per jQuery
- FireRainbow (non più necessario con la 2)
- Page Speed e YSlow per i test di velocità ed ottimizzazione sulla pagina
- AceBug aggiunge il supporto a Coffeescript nella console e molte altre cose.
Moduli nativi: Console, HTML, CSS, Script, DOM, Net, Resource, Cookie
Funzionalità uniche interessanti: Firebug Lite è un sottoinsieme di Firebug ed utilizza l’API disponibile in tutti i browser (per esempio Internet Explorer) ed è disponibile come file javascript indipendente
Pro:
- Analisi degli eventi (grazie all’integrazione di EventBug)
- Analisi dei cookie (grazie all’integrazione di FireCookie)
- Autocompletamento migliore (per esempio width al posto di widows quando si ha digitato wid)
- Funzionalità abilitate direttamente al caricamento della pagina di default
- Miglior visualizzazione delle richieste Ajax (su Firebug vengono visualizzate nella console solo richieste Ajax, su Firefox tutte le richieste Get/Post nella pagina quindi anche lo scaricamento di immagini)
Aggiornamenti: Aggiornamenti in ogni release di Firefox ed è possibile provarli con la Nightly prima del rilascio pubblico
Estensioni: Al momento solo l’estensione per EmberJS, AngularJS e Grunt, DevTools Prototyper e FireQuery 2 Beta 5
Moduli nativi: Console, Inspector (HTML), Style Editor (CSS), Debugger (Script), Network, Profiler, Canvas editor, Shader Editor, ScratchPad, 3D View, Web Audio Editor, Eye Dropper (Color Picker), Responsive View, Rulers
Funzionalità uniche interessanti: il profiler permette di generare veri report sul tempo passato dall’interprete nelle singole funzioni analizzando e raccogliendo statistiche sulle chiamate, visualizzazione/editing dei commenti html nell’inspector, è possibile debuggare le estensioni e lo stesso Firefox, i tool Canvas Editor/Shader Editor/3D View/Responsive View/Web Audio Editor/Profiler sono veramente unici, nell’inspector se la regola è in una media querie verrà mostrata sopra la stessa
Pro:
- Velocità
- Integrato con i WebIDE
- Supporta le sourcemap di Less, Sass, CoffeeScript
- Supporta lo stile di scrittura Vim, Emacs o Sublime text
- Permette il salvataggio diretto dei file
- Color picker integrato
- Visione dei font totali caricati dalla pagina con le regole
- Possibilità di effettuare screenshot della pagina
- Simulazione degli eventi touch
- Debug dei singoli iframe
- Blocco degli appunti
- Analisi degli eventi nativa
- ScreenShot
- 3D View
- ColorPicker
- Righello
Come si può vedere da questo elenco le caratteristiche sono diverse.
Resoconto
Firebug: su alcune funzionalità risulta ancora ineguagliato, anche grazie alle molte estensioni già presenti. Configurazione non avanzata ma allo stesso tempo è molto duttile.
Developer Tool integrati: sono integrati nell’App Manager permettendone l’uso via debug remoto (che sta diventando un WebIDE integrato nelle Nightly di Firefox), supporta il debug remoto su device Firefox OS e Android (attraverso Firefox for Android), offrono più tool particolari non esistenti in altre soluzioni (Canvas Editor o Web Audio Editor o del Profiler), interfaccia più semplice
I Developer Tool integrati in Firefox non hanno ancora del tutto ricoperto le funzionalità disponibili in Firebug, ciononostante hanno già fatto tantissima strada e presentano diversi spunti originali. Al momento l’uso combinato di entrambi è l’ideale.
Io attualmente uso i nativi principalmente per effettuare questo switch in modo graduale.
Dettaglio da non dimenticare è che i team di sviluppo di entrambi si scambiano idee e codice per migliorarsi a vicenda.
Questa comparazione è basata alla mia esperienza e conoscenza quindi ci potrebbero essere delle lacune, se vuoi aggiungere qualcosa bèh scrivi un commento!
Se vuoi dire la tua sui tool di sviluppo di Firefox, recentemente è stato aperto questo portale.
Chicca: In entrambi è possibile cercare, nell’inspector, usando i selettori CSS
PS: nell’articolo non è presente un confronto con i tool di Chrome perchè non usandoli assiduamente non potrei fare un buon paragone.
Ringrazio Luca Greco (contributor volontario nell’ambito dei Firefox Developer Tools e autore dei port su Firefox delle estensioni di sviluppo “EmberJS Inspector” e “AngularJS Batarang”) per le correzioni ed i chiarimenti.
24/06/2015
Qualche aggiornamento
16/6/2014
Aggiunto nelle differenze uniche dei tool nativi la visualizzazione della media querie
22/10/2014
Aggiunti debug singoli iframe e profiler
