La feature più amata, dagli sviluppatori e non solo, presente in Firefox è senza ombra di dubbio la sua estendibilità grazie a plugin realizzati da terzi. è possibile infatti includere all'interno del browser una quantità pressoché infinita di piccole applicazioni che facilitano l'uso e l'integrazione di Firefox con altri programmi.
Firebug non solo è uno di questi plugin presenti all'interno di questo vasto repository, è IL plugin utilizzato per sviluppare applicazioni web in classico stile web 2.0 utilizzando JavaScript, AJAX e tutte le tecniche di programmazione moderne. Questo articolo cercherà di fare una panoramica su tutte le funzionalità presenti in Firebug (vi assicuro che sono notevoli) e convincerà chiunque ancora non lo utilizzi ad installarlo il prima possibile.
Per installare questo fantastico plugin basta accedere al sito https://addons.mozilla.org e installare il file XPI direttamente dal sito. Per gli utilizzatori di Firefox 3.0 è possibile installare Firebug direttamente dalla finestra add-on presente nel menu tool del browser ricercando appunto “firebug”.
Firebug attualmente è presente in due versioni:
- 1.05 – disponibile solamente per Firefox 2.x
- 1.2 – disponibile solamente per Firefox 3.x
In questo articolo faremo riferimento alla versione 1.2 disponibile per l'ultima release del browser di casa Mozilla (che invito tutti a scaricare e ad installare).
Le caratteristiche vincenti
Analizziamo le numerose caratteristiche e feature di Firebug che hanno permesso al plugin di ottenere così tanti consensi nel mondo dello sviluppo per il web.
Analisi HTML
La prima caratteristica che si nota appena installato il plugin è senza dubbio la possibilità di visualizzare in una vista gerarchica organizzata ad albero, l'intera struttura HTML della pagina corrente. In questo modo sono facilmente identificabili eventuali errori e imprecisioni nel markup.
L'analisi dell'HTML avviene all'interno del tab HTML del plugin.
Eventuali modifiche a run-time dell'HTML originale vengono notificate tramite un evidenziatore giallo.
è inoltre possibile cambiare “al volo” il codice HTML di una pagina semplicemente doppio cliccando sul tag interessato o premendo sul tasto edit e identificare nella pagina un determinato elemento grazie alla comoda funzione di inspect.
L'ultima funzionalità all'interno della categoria relativa all'analisi dell'HTML è la possibilità di copiare nella clipboard un frammento di codice per poi incollarlo e modificarlo tramite un qualsiasi editor di testo.
Analisi CSS
Come tutti sappiamo una pagina web non è solamente composta da markup HTML ma presenta uno o più fogli di stile CSS associati. Firebug permette ovviamente un analisi di essi sulla falsa riga dell'analisi che è possibile fare sul codice HTML.
L'analisi dei CSS avviene all'interno del tab CSS del plugin.
Innanzitutto è possibile vedere la gerarchia delle regole CSS applicate ad un elemento semplicemente selezionandolo dal sorgente o tramite l'inspect.
Questa analisi permette inoltre di visualizzare eventuali regole “overridate” da regole più specifiche (grazie alla riga nera sopra il testo) e di sapere in quale file e in quale riga è definito questo comportamento.
Grazie a Firebug è inoltre possibile creare, modificare o disattivare “al volo” alcune regole regole per avere una sorta di anteprima di come verrà visualizzato un certo elemento senza dover modificare nessun file.
Cliccando sul tab layout nella sezione dedicata all'analisi dell'HTML è inoltre possibile analizzare e modificare nello specifico le misure del box model di ciascun elemento (offset, margin, border, padding e content).
L'ultima feature di questa sezione riguarda la possibilità di utilizzare un vero e proprio righello draggabile per calcolare larghezza e altezza di qualsiasi elemento della pagina in maniera precisa al pixel.
Analisi del DOM
L'ultima componente che manca all'appello riguardo ad un eventuale analisi è il DOM della pagina. Con DOM (Document Object Model) intendiamo la struttura presente all'interno di ciascun oggetto della pagina. è proprio grazie alla modifica del DOM che possiamo nascondere eventuali DIV o creare pagine web animate.
Grazie a Firebug oltre ad analizzare le proprietà di ciascun elemento ed oggetto della pagina, è possibile modificare qualsiasi attributo senza dover per forza conoscere JavaScript.
Si può accedere all'analisi del DOM cliccando sul tab DOM.
Grazie a questo strumento possiamo anche visualizzare una sorta di path (il cosiddetto breadcrumb – briciole di pane) per capire l'intera gerarchia che può esistere al di sopra di un determinato elemento (selezionato sempre tramite lo strumento inspect).
Monitorare le richieste
Firebug non presenta caratteristiche care solamente ai web designer, ma rappresenta uno strumento utile anche per gli sviluppatori nel vero senso del termine che spesso delegano la creazione di interfacce a grafici o comunque ad altre persone.
Cliccando sul tab net è infatti possibile accedere al monitor di rete che permette di tracciare qualsiasi richiesta effettuata con possibilità di filtrare sul tipo di dato richiesto (HTML, CSS, JS, XHR – le famose richieste AJAX -, Images e Flash). Per ciascuna richiesta effettuata è possibile analizzare il tempo richiesto, eventuali codici HTTP riportati, le intestazioni HTTP e i contenuti sia della richiesta che della risposta.
Questo strumento è fondamentale quando si sviluppano applicazioni web che presentano notevoli richieste asincrone da effettuarsi durante il ciclo di vita della pagina. Grazie a Firebug è possibile in maniera rapida e indolore analizzarle per trovare eventuali errori che, in mancanza di uno strumento tale, necessiterebbero di modifiche al codice (per esempio i classici alert) per essere scovati.
Sempre grazie a questo strumento è possibile sapere se una determinata risorsa richiesta è stata effettivamente ottenuta dal server o era stata cachata in precedenza.
JavaScript debugger
Tra tutte le funzionalità precedentemente elencate quella che personalmente ritengo più utile è la possibilità di debuggare il codice JavaScript all'interno di una pagina. Debuggare significa interrompere l'esecuzione del codice ad una determinata riga o in determinate condizioni programmatiche per analizzare lo stato delle variabili e degli oggetti sino a quel momento inizializzate. Grazie al debug è possibile scovare qualsiasi tipo di errore di scripting presente nella pagina.
Firebug presenta tutti i componenti di debug presenti in IDE complessi come per esempio i breakpoint condizionali (attivabili cliccando con il tasto destro su un breakpoint standard), la creazione di “viste” per tenere sotto controllo durante il debug un determinato oggetto (grazie all'analisi del DOM vista in precedenza), la possibilità di eseguire il codice riga per riga tramite dei comodi controlli e la possibilità di avere stracktrace di chiamate ai metodi complete in caso di errori o di eccezioni non catturate.
Tra tutte questa è una delle funzionalità più complete ma anche più difficili da utilizzare e che spesso possono creare problemi agli utenti alle prime armi. Sappiate solo che eventuali interruzioni o modifiche al codice effettuate in run-time non possono minimamente modificare i vostri script. In caso di problemi di qualsiasi tipo, basterà premere F5 e tutto tornerà come prima.
è inoltre possibile, grazie al campo di testo presente nel tab console, scrivere ed eseguire codice JavaScript all'interno della pagina corrente. Questo comportamento è molto utile in fase di test di algoritmi complessi che necessitano svariate prove prima di poter essere messi in produzione.
JavaScript profiler
Lo strumento meno apprezzato in Firebug è senza dubbio il profiler JavaScript, soprattutto per la mancanza di conoscenze nel suo riguardo. Esso permette di tenere traccia di quali e quante volte vengono invocati funzioni e metodi JavaScript e qual è la velocità media di esecuzione degli stessi. Questo facilità eventuali miglioramenti alle performance di una applicazione web in quanto è possibile capire su quale componente intervenire.
Per utilizzare il profiler basta premere sul pulsante profile all'interno della console di Firebug, utilizzare le componenti che si vogliono testare e ricliccare sul pulsante.
Analisi degli errori
Firebug presenta in caso di errori un report avanzato che permette di identificare il problema in tempi rapidi e di correggerlo senza particolari grattacapi. I messaggi di errori spesso sono chiari e autoesplicativi e presentano lo stacktrace dei metodi invocati prima della scatenazione dello stesso.
Console e API
Firebug oltre a tutte le funzionalità descritte in precedenza presenta anche alcune API invocabili direttamente da codice JavaScript che permettono di loggare all'interno della console del plugin informazioni utili durante lo sviluppo di una applicazione.
Lo sviluppatore JavaScript avrà infatti a disposizione in qualsiasi punto del suo script l'oggetto implicito console il quale permette, tramite i metodi definiti, di gestire la console della sua applicazione. Ecco un dettaglio dei metodi invocabili e il relativo significato:
- console.log – stampa un messaggio di log in console
- console.debug – stampa un messaggio di debug in console
- console.info – stampa un messaggio di info in console
- console.warn – stampa un warning in console
- console.error – stampa un errore in console
- console.profile – inizializza una sessione di profiling
- console.profileEnd – termina una sessione di profiling
- console.trace – stampa un frammento di stacktrace dei metodi invocati
- console.group e console.groupEnd – permettono di creare dei gruppi di testo in console per avere le informazioni stampate in maniera più leggibile
- console.dir e console.dirxml – permettono di effettuare un dump di un particolare oggetto per analizzarne le proprietà
Per un maggiore approfondimento di queste API rimando alla pagina del sito ufficiale di Firebug (http://getFirebug.com/logging.html).
Prima però di eseguire il vostro script su altri browser (Internet Explorer in primis) assicuratevi che tutti i riferimenti all'oggetto console siano commentati o incapsulati in qualche oggetto particolare perché altrimenti genereranno errori, in quanto cercheranno di invocare metodi su un oggetto non esistente.
Usabilità
A differenza della maggior parte dei plugin disponibili per Firefox, Firebug presenta una usabilità fuori dal comune. Esso infatti può essere visualizzato sia come pannello posto al di sotto del viewport principale sia come finestra stand-alone rispetto alla finestra del browser.
Può essere richiamato in qualsiasi momento grazie alla pressione del tasto F12 o cliccando sull'iconcina in basso a destra (un cerchio verde in Firebug 1.05 e un insetto in Firebug 1.2).
Inoltre Firebug, in quanto influenza parecchio il rendering delle pagine HTML, può essere disattivato per determinati siti (un classico esempio è Gmail che notifica anche questa possibilità con un banner rosso).
Firebug Lite
Firebug Lite rappresenta un ottimo tentativo di porting di Firebug all'interno di altri browser che non supportano l'estendibilità tramite plugin esterni. Esso è un semplice script JavaScript che permette di emulare il plugin all'interno di altri browser. Il progetto è mantenuto dagli stessi sviluppatori di Firebug e nonostante non presenti tutte le funzionalità presenti nel plugin originale, può senza dubbio dare molti aiuti a chi deve sviluppare applicazioni che siano cross-browser.
Per installare Firebug Lite all'interno di una pagina web già esistente è necessario includere uno script JavaScript con il classico tag <script>.
Una volta inserito lo script nelle nostre pagine sarà possibile accedere alla console, al CSS, HTML e DOM inspector e ad una versione limitata del newtork monitor che in questo caso potrà tracciare solamente le richieste XmlHttpRequest.
Queste limitazioni derivano dal fatto che via JavaScript non è possibile ottenere maggiori informazioni sull'applicazione corrente.
