Firefox Developer Tool vs Firebug

This article has been written before more than 1 years, information might old.

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!

firebug-logo

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)

Meet-the-Firefox-OS-Mascot-a-Fox-That-s-on-Fire
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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Firefox Developer Tool vs Firebug

time to read: 3 min
0