CMS  »  Articoli  »  Joomla 

Firebug

Firebug è un'estensione di Firefox, ovvero un programma pensato per essere eseguito all'interno di Firefox. Questo add-on tra le altre cose consente di modificare l'aspetto della pagina visualizzata all'interno del browser, applicando i cambiamenti nell'istante in cui vengono eseguiti.

Un grande risparmio di tempo, confrontato al consueto metodo di sviluppo che consiste nel modificare un file, salvarlo, aprire il browser ed effettuare il reload di una pagina. La velocità di questo metodo viene messa in risalto quando la pagina è generata in modo dinamico, e nel modo "classico" occorrerebbe inviare nuovamente i dati di una form.

Altre feature di Firebug includono:

• Monitoraggio dettagliato del tempo di caricamento di una pagina
• Debug di codice JavaScript
• Esplorazione del DOM (Document Object Model)
• Command line e log per JavaScript

Insomma, un vero coltellino svizzero per sviluppatori Web. L'installazione è molto semplice: basta aprire il sito ufficiale di Firebug e cliccare sul collegamento "Install Firebug 1.2".

Figura 3. Installiamo Firebug

Verrà aperta una pagina del sito Firefox Add-ons, nella quale dovremo cliccare il link "Aggiungi a Firefox". L'estensione verrà installata e dopo il riavvio del browser sarà disponibile e funzionante.

Panoramica

Lanciare Firefox ed aprire la home page del sito Joomla. Aprire Firebug cliccando in basso a destra, nella status bar, l'icona che raffigura un piccolo insetto.

Figura 4. Il pannello di Firebug

Viene visualizzato Firebug. Cliccare il pulsante in alto a sinistra "Analizza". Scorrendo con il mouse sulla pagina visualizzata nel browser, ogni elemento viene circondato da un rettangolo che identifica la parte di pagina di cui vogliamo avere informazioni.

Focalizzandoci ad esempio sul titolo "Welcome to the Frontpage" Firebug mostrerà il codice XHTML e le direttive CSS che la riguardano.

Clicchiamo il titolo per indicare a Firebug di analizzarlo più a fondo: portiamoci con il mouse nel pannello destro di Firebug, dove sono elencati gli stili CSS applicati. Per primi sono elencati gli stili diretti, ovvero applicati direttamente ai tag XHTML che compongono la zona selezionata, quindi sono mostrati gli stili ereditati, dal tag più specifico (div#ja-content) al tag più generale ()

Figura 5. Il pannello di Firebug

Una importante informazione è il file e la riga corrispondente dove viene definito questo stile, in modo che sia possibile trovarlo facilmente all'interno del file system.

Altri articoli

Altre guide

Altre newsletter