Firebug è un componente aggiuntivo gratuito per il browser Mozilla Firefox, sviluppato da Joe Hewitt (uno dei creatori di Firefox) e mantenuto da una vasta community.

Secondo le statistiche di Firefox, all'inizio 2009 quasi due milioni di utenti avevano installato Firebug. Lo si può installare con un semplice click dalla pagina https://addons.mozilla.org/it/firefox/, digitando “firebug” nella ricerca, oppure dal menu di Firefox Strumenti → Componenti aggiuntivi.

La sua funzione principale è quella di permettere all'utente di analizzare il codice di una pagina web aperta sul browser, e visualizzarne il codice HTML, gli stili CSS, gli script e la rappresentazione a oggetti del documento (DOM). Con il componente Firebug attivato sarà possibile accedere a queste funzionalità cliccando sull'icona del componente, posizionata in basso a destra nel browser.

Comparirà una finestra nella sezione inferiore del browser, permettendo di visualizzare sia la pagina web d'interesse che le opzioni di Firebug.
L'utente può comunque aprire Firebug in un'altra finestra, modificando l'opzione predefinita dal menu indicato dal logo dell'applicazione.
Sono inoltre modificabili le dimensioni del testo per una più comoda visualizzazione.

Cliccando sul tab HTML la schermata di Firebug sarà suddivisa in due parti, visualizzando a sinistra il codice HTML della pagina, e a destra gli stili CSS.

 

Come usare Firebug

Analizza elemento

Selezionando “Analizza elemento” dal menu di Firebug (o cliccando sull'icona con la freccia accanto al menu) sarà possibile evidenziare i vari elementi della pagina web al solo passaggio del mouse. Nella finestra di Firebug saranno evidenziate a loro volta le parti di codice corrispondenti, sia in HTML che negli stili CSS.
Accanto ad ogni attributo CSS è presente un simbolo di stop, che se cliccato disattiva le istruzioni per quell'attributo. Attivando e disattivando l'opzione si ottiene un'anteprima istantanea di come apparirebbe la pagina modificandone lo stile.

Inoltre accanto agli attributi è sempre specificata la riga di codice del file template (foglio di stile CSS associato alla pagina) e l'indirizzo in cui si trova il template stesso. È sufficiente posizionare il mouse sopra l'indicazione di riga, ed apparirà un'etichetta con la url del template.
Provare diverse soluzioni di stile e applicare le modifiche diventa quindi un'operazione molto più facile. Non è più necessario essere un esperto di HTML o CSS per modificare il proprio sito!
Naturalmente è possibile tornare a visualizzare il sito originale in qualsiasi momento, aggiornando la pagina.

Completamento automatico

Immettendo nuovi elementi di codice si noterà come il programma suggerisca delle soluzioni di completamento automatico, rendendo da un lato più veloce l'operazione, e facilitando dall'altro l'utente che potrebbe non ricordare perfettamente la scrittura di un attributo.
Inoltre cliccando su una proprietà di stile e usando le frecce da tastiera sarà possibile scorrere l'elenco delle proprietà di quell'elemento in ordine alfabetico.


Selezionando una casella di testo, per esempio, si potrebbe immettere un nuovo attributo di stile relativo al carattere.
Perché le nostre modifiche abbiano effetto è necessario in ogni caso immetterle nel livello corretto del template. Se per esempio desidero modificare un attributo relativo all'allineamento del testo o al suo colore, potrebbero esserci altre proprietà di livello più specifico che annullano gli effetti della nostra modifica. Firebug provvederà comunque ad indicarle nelle righe sottostanti, rendendole disponibili alle modifiche.

il riquadro di testo relativo a Joomla si può vedere come gli unici settaggi non controllati da altre sezioni siano quelli relativi alla posizione.

Scheda Net

Un'altra funzione molto utile (specialmente agli sviluppatori) è il tab Net, che permette di osservare i tempi di risposta delle diverse sezioni di un sito e dei diversi elementi della pagina, indicandone anche il peso in KB. Rilevare la causa di eventuali errori 404 diventa molto più semplice!
I diversi colori delle barre, inoltre, indicano se per il caricamento si sta usando la memoria cache.

Errori

Visualizzando la scheda “Console” e navigando all'interno del proprio sito web verranno segnalati eventuali errori di visualizzazione.

Con Firebug minimizzato sulla barra basterà cliccare sul messaggio di errore per aprire la Console e verificare a cosa si riferisce. Dal menu della scheda è comunque possibile impostare che errori visualizzare, per poter esaminare separatamente il codice XML, o gli stili CSS o ancora gli script.