giapox

Oggi vi presento uno strumento fondamentale per tutti gli sviluppatori web: Firebug per Firefox.

Questo utilissimo add-on si integra alla perfezione con Firefox, permette di effettuare il debug di una pagina web e di monitorare il codice HTML, i CSS e i JavaScript presenti nella pagina. Questo strumento potentissimo velocizza di parecchiom il lavoro di Web Designer e Web Developer. Di seguito andiamo a vedere nello specifico tutte le potenzialità di questo, a dir poco utilissimo, plugin per Firefox.

Analisi dell'HTML

Appena installato il plugin salta subito all'occhio la possibilità di visualizzare, in una vista ad albero, l'intera struttura HTML della pagina corrente; questo permette allo sviluppatore di identificare facilmente eventuali errori e imprecisioni nel codice. L'analisi dell'HTML avviene all'interno del tab HTML del plugin.
Tutte le eventuali modifiche a run-time dell'HTML originale verrano notificate da Firebug tramite un evidenziatore giallo.
Inoltre è possibile identificare nella pagina un determinato elemento grazie alla comoda funzione di inspect e copiare nella clipboard un frammento di codice per poi incollarlo e modificarlo tramite un qualsiasi editor di testo.

Analisi dei CSS

Firebug permette un'analisi dei CSS sulla falsa riga dell'analisi sul codice HTML. Questa analisi avviene all'interno del tab CSS del plugin. E' possibile vedere la gerarchia delle regole CSS applicate ad un elemento semplicemente selezionandolo dal sorgente o tramite l'inspect. Con l'aiuto di Firebug si può creare, modificare e disattivare alcune regole CSS, in modo da visualizzare un'anteprima di come verrà visualizzato un dato elemento, senza la necessità di dover modificare alcun file. L'analisi effettuata tramite Firebug permette, inoltre, di visualizzare eventuali regole "overridate" da regole più specifiche e di sapere in quale file e in quale riga è definito questo comportamento: personalmente trovo questa la funzione più utile di questo add-on, grazie alla quale il Web Designer può evitare di "sbattere la testa" per ore su un errore banale ma nascosto.
Altra peculiarità è rappresentata dalla possibilità di utilizzare un vero e proprio righello trascinabile per calcolare larghezza e altezza di qualsiasi elemento della pagina (e dei suoi margine padding) in maniera precisa al pixel.

Analisi del DOM

Altro componente è l'analisi del DOM della pagina web: con DOM (Document Object Model) si intende la struttura presente all'interno di ciascun oggetto della pagina. Si può accedere all'analisi del DOM cliccando sul tab DOM. Grazie a questo strumento si può visualizzare una sorta di path per capire l'intera gerarchia che può esistere al di sopra di un determinato elemento.

Monitoraggio delle richieste

Oltre a presentare caratteristiche care ai web designer, Firebug rappresenta uno strumento utile anche per gli sviluppatori nel vero senso del termine. Infatti, cliccando sul tab Net è  possibile accedere al monitor di rete e  tracciare qualsiasi richiesta effettuata con possibilità di filtrare sul tipo di dato richiesto (HTML, CSS, JS, XHR – le famose richieste AJAX -, Images e Flash). Questo strumento diventa indispensabile quando si sviluppano applicazioni web che presentano notevoli richieste asincrone da effettuarsi durante il ciclo di vita della pagina. Inoltre Firebug ci permette di sapere se una determinata risorsa richiesta è stata effettivamente ottenuta dal server o era stata cachata in precedenza.

JavaScript debugger

Molto utile è la possibilità di debuggare il codice JavaScript all'interno di una pagina. Grazie al debugugger di Firebug si possono trovare tutti gli errori di scripting presenti in una determinata pagina web. Firebug presenta tutti i componenti di debug presenti in IDE complessi.

Profiler JavaScript

Altro strumento interessante di Firebug è il profiler JavaScript: permette di tenere traccia di quali e quante volte vengono invocati funzioni e metodi JavaScript e qual è la velocità media di esecuzione degli stessi; tutto questo facilita eventuali miglioramenti alle performance di un'applicazione web in quanto è possibile capire su quale componente intervenire.

Analisi degli errori

In caso di errori, Firebug presenta un report avanzato che permette di identificare il problema rapidamente e di correggerlo in maniera semplice; i messaggi di errore spesso sono chiari e autoesplicativi e presentano lo stacktrace dei metodi invocati prima della scanzione dello stesso.

Ecco il link per il download: Firebug.