A cura di Levysoft

Firebug, è una estensione per Firefox che facilita la vita a chi deve costruire siti e applicazioni web. Tra le centinaia di funzionalità di cui si dispone installando Firebug, come la possibilità di analizzare ed editare il codice HTML, CSS e Javascript, la visualizzazione di tutte le dipendenze, utili strumenti di debug e di esplorazione del DOM e il monitoraggio dettagliato del caricamento delle pagine e degli elementi che le compongono, ve ne è una che, tra tutte, le supera di gran lunga: è la funzione di “Inspect element”.

Questa opzione, che appare nel menu contestuale quando si attiva firebug in corrispondenza dell’elemento identificato dal mouse (oppure cliccando sul pulsante Inspect e poi selezionando con un click del mouse l’elemento che interessa), permette di modificare e testare “a caldo” qualunque pagina HTML, foglio di stile CSS o funzione Javascript di un qualsiasi sito web senza provocare alcun impatto sulla navigazione per i vostri visitatori.

Così facendo nella parte inferiore della finestra sarà possibile visualizzare il codice html e gli stili associati all’elemento selezionato: per esempio, nella sezione css vengono visualizzate le proprietà dell’oggetto, dichiarate direttamente oppure ereditate (le dichiarazioni che trovate barrate sono quelle sovrascritte da dichiarazioni successive). E’ possibile, quindi, modificare il css e l’html e le funzioni javascript agendo direttamente sulla finestra di Inspect e verificare immediatamente gli effetti della variazione; per ritornare alla pagina originale basta fare un semplice refresh da Firefox.

Addirittura è anche possibile, nella finestra relativa ai css, visualizzare un’anteprima dei colori usati semplicemente posizionando il puntatore sopra al valore esadecimale.

Il bello della funzione di INSPECT di Firebug è che è possibile testare velocemente le modifiche al proprio sito online lavorando localmente su Firefox e in tempo reale. Inoltre, è possibile analizzare molto velocemente la struttura di un altro sito di cui magari se ne vuole carpire qualche trucchetto html o css.

Un esempio pratico delle potenzialità dell’INSPECT di Firebug lo trovate nel Video Tutorial su come modificare il proprio tema Wordpress in 5 minuti con FireBug di Daniele Salamina

Altri Toolkit simili è possibile trovarli installando a Web Developer Toolbar oppure Venkman, anche se, a mio parere, non sono così completi performanti come Firebug.

Per chi, invece, non usa Firefox, è possibile testare la console di Firebug con Firebug Lite. Si tratta di uno script da inserire nelle pagine che vogliamo testare e che attiva la visualizzazione della console nella parte inferiore della pagina stessa usando il tasto F12 o la combinazione CTRL+SHIFT+L.

Articoli correlati:

Soluzione dei problemi in italiano di Firefox 2 e Thunderbird 2.0

Firefox 3: beta ufficiale rimandata a Settembre

Segnala questo articolo ai tuoi amici su Facebook