Mini-Guida: Ecco tutto quello che devi conoscere per lavorare con Firebug

In un web dove la quasi totalità delle pagine sono realizzate dall’accoppiata (X)HTML e CSS, Flash e simili a parte, viene di grande aiuto agli sviluppatori ed ai web designer la preziosa utility per Firefox “Firebug“ ad oggi giunta alla versione 1.3.

Grazie a Firebug, prelevabile direttamente dal sito ufficiale, lo sviluppatore avrà la possibilità di modificare in tempo reale una qualsiasi pagina visitata su Firefox.
Avremo infatti accesso diretto al codice HTML, CSS e Javascript, con possibilità di modifica e già in fase di battitura osservare l’effetto delle nuove istruzioni.
E’ facile rendersi conto quanto ciò possa facilitare la vita del web designer che non si troverà più a dover aggiornare decine e decine di volte la stessa pagina ma prima ancora di modificare realmente il file HTML, le sue regole CSS o quant’altro, potrà rendersi conto visivamente dell’effetto creato.

Tutto ciò che devi sapere per lavorare con Firebug

mini guida esaustiva in un unico articolo a cura di Attilio Fiumanò

• A chi può essere utile?
• Devo essere per forza esperto?

Assolutamente no, questa estensione per Firefox tornerà utile agli utenti più esperti quanto, se non di più, a quelli che sono ancora alle prime armi.

Il suo utilizzo è infatti consigliatissimo anche per chi vuole prendere confidenza con tag attributi classi html, regole CSS o codice Java Script.
Tornerà molto utile infatti, visitando un sito web qualsiasi durante la vostra navigazione, la possibilità di vedere le proprietà e le regole CSS di ogni singolo elemento e conseguentemente di imparare a fare web design semplicemente studiando il lavoro altrui.

Requisiti

• Firefox – Consigliata v.3.0.10;
• Mouse;
• Tastiera;
• Tempo per smanettare (non è esattamente un requisito ma più ne avete meglio è)

Insomma, requisiti decisamente alla portata di tutti.

Per inziare a lavorare con Firebug

Effettuare l’installazione del plugin direttamente dal sito ufficiale segnalato all’inizio dell’articolo.
L’installazione è semplice e veloce, basta seguire le istruzioni, riavviare Firefox al termine e siete pronti.

La scheda HTML

A primo impatto dopo l’installazione non sembrerebbe cambiato molto, salvo un piccolo “insetto” collocato nell’angolo in basso a destra del vostro browser.
Sarà proprio da questa piccola nuova icona che avremo accesso a tutte le potenzialità offerte da questa estensione.

Come è chiaro già dall’immagine sarà possibile visualizzare tutto il codice html della pagina in maniera ordinata, con la possibilità di “navigare” nei vari annidamenti dei tag all’interno di html, body e così via.

Scorrendo in profondità tra i vari tag html si noterà subito che al solo passaggio del mouse sul nome del tag l’elemento verrà evidenziato sulla pagina web con vari colori.
Il giallo identificherà il margine dell’oggetto, il viola ne identificherà il padding e in azzurro il contenuto.

Dall’immagine si evince come firebug fornisca una chiara rappresentazione dell’elemento selezionato e del suo box model.

Nella finestra di destra, sotto la scheda Stile, potremo verificare tutte le regole CSS che agiscono sull’oggetto in questione.

Verranno indicate le regole ereditate, quelle sovrascritte in base alla tabella delle priorità CSS e i file di riferimento da dove tali regole vengono caricate.
Come se non bastasse attraverso il doppio click su una regola specifica o attraverso il click destro avremo la possibilità di modificare, annullare o creare nuove regole specifiche per l’elemento selezionato e contemporaneamente verificarne gli effetti.

La stessa operazione può essere fatta in modo analogo nella finestra HTML dove potremo variare le classi, gli attributi, gli id o anche il testo o qualsiasi altro parametro con la corrispondente variazione dinamica della pagina.

Nella scheda Layout avremo un’altra rappresentazione grafica del box model.

Dalla scheda DOM (della finestra di destra) potremo invece accedere a tutta la “genealogia” dell’elemento secondo le regole W3C, molto utile anche per il debugging Java Script.

Le schede CSS e DOM

Com’è facile immaginarsi da queste due schede, avremo accesso rispettivamente all’intero CSS e DOM (Document Object Model) della pagina caricata.

Non mi soffermerò molto su queste due schede poiché il loro funzionamento oltre ad essere facilmente intuibile è analogo alle schede trovate sotto la scheda HTML sopradescritta.

Nella scheda CSS potremo disabilitare le istruzioni (semplicemente clickando sul divieto d’accesso a fianco alle regole), modificarle cliccando due volte sul valore di ogni singola regola, oppure aggiungerne nuove, inserendo manualmente le nuove istruzioni dopo aver cliccato col destro e aver selezionato “Nuova proprietà”.

Nella parte superiore della scheda potremo scegliere quale dei files di stile caricati vogliamo modificare (nel caso ve ne siano più d’uno).
Di default verrà visualizzato l’intero codice CSS caricato.

Come è lecito aspettarsi nella scheda DOM troveremo l’intero Document Object Model della nostra pagina a partire dall’elemento window per poi poter navigare nei vari document, html, body eccetera.
Per ogni elemento sarà possibile visualizzare tutte le proprietà, elementi figlio, padre, fratello e tutto ciò che prevede lo standard W3C.
Interessante anche la possibilità di accedere al contenuto di tutte le variabili globali usate in javascript, utilissimo in fase di debugging.

Anche in questo caso sarà possibile cambiare il contenuto dei vari campi delle variabili ma personalmente sconsiglio di agire direttamente dal DOM per modificare i valori degli oggetti.
Risulta invece molto utile verificare che tali valori corrispondano con l’effetto desiderato dal vostro codice Java Script.

La scheda Java Script

La scheda Java Script come le schede Console e Net sono di default disabilitate.

Questo accade perché potrebbero verificarsi dei cali di prestazione dovuti, in particolari contesti, alle ingenti risorse richieste per il caricamento di alcune pagine web dalle suddette schede.

Una volta abilitate le tre schede potremo accedere alla scheda Java Script come in immagine.

Anche in questo caso avremo la possibilità di muoverci tra i vari file .js caricati dalla pagina e selezionare il file che vorremo analizzare, analogamente a quello che accadeva nella scheda CSS.

Come nei migliori tool di programmazione avremo la possibilità di debuggare il nostro codice con l’inserimento di breakpoint nei punti chiave del nostro codice per analizzare a run-time l’effettivo valore delle variabili e il funzionamento della nostra applicazione Java Script.

Per chi non lo sapesse un breakpoint è un punto del nostro codice in cui noi faremo fermare temporaneamente l’esecuzione del programma, e dal quale potremo controllare istruzione dopo istruzione il suo comportamento con la corrispondente variazione delle variabili associate.

Per impostare un breakpoint nel nostro codice basterà effettuare un doppio click alla sinistra del numero di riga corrente.
Se hai impostato correttamente il breakpoint comparirà un cerchio colorato di rosso accanto alla riga selezionata.

A questo punto una volta che l’esecuzione del codice Java Script raggiungerà la linea selezionata, ammesso che ciò avvenga, l’applicazione andrà in pausa e avremo la possibilità di controllare i valori delle variabili, nella scheda di destra, e di procedere passo passo con le istruzioni successive attraverso l’uso dei pulsanti sulla barra superiore.

Le schede Net e Console

Da queste due schede potremo vedere come “lavora” effettivamente la nostra pagina Web.

Dalla scheda Net otterremo informazioni circa il caricamento dei vari files della pagina.
Con ciò ci riferiamo ad esempio ai file CSS importati per via esterna, oppure alle immagini caricate col tag <img src=”..”/> o ancora i file Java Script esterni, oggetti Flash e tutto ciò che viene caricato nella pagina e il cui contenuto non sia incluso nella pagina html richiesta.

Come da immagine anche questa scheda racchiude informazioni preziose.

Sarà facile rendersi conto se stiamo sovraccaricando il lavoro di acquisizione di files esterni da parte del browser rallentando così il caricamento della pagina stessa.
Il dettaglio dei millisecondi impiegati per ogni singolo file ci darà subito una chiara idea del carico di lavoro affidato al nostro browser.

Procedendo nel dettaglio per ogni singolo file potremo leggerne l’header http di richiesta e di risposta con tanto di cookie (che nell’immagine ho offuscato per motivi di sicurezza), variabili passate con metodo GET o POST, file non trovati, url che subiscono redirect e tutto ciò che il protocollo http prevede.

Nella scheda Console (l’immagine in alto), troveremo sempre informazioni riguardo a richieste fatte dal browser per l’acquisizione di informazioni o file esterni, ma in questo caso si tratta di richieste che vengono effettuate tramite Ajax e solitamente le informazioni scambiate saranno in formato XML o JSON.

Nello screen allegato è mostrato il risultato di una richiesta Ajax in formato JSON.
Anche qui si può entrare nel dettaglio visualizzando l’header di richiesta, di risposta e le variabili scambiate.

In aggiunta a tutto questo in questa scheda troveremo anche informazioni riguardo a eventuali errori rilevati nel codice Java Script (nell’esempio Firebug ci riporta nel dettaglio l’errore rilevato).

I pulsanti Analizza e Modifica

Per concludere vorrei spendere due parole sui pulsanti Analizza e Modifica che probabilmente avrai notato negli altri screen nella parte superiore della barra di Firebug.

Se da una parte il funzionamento del secondo possa essere facilmente intuibile, è dal primo che con molta probabilità cominceremo quando dovremo analizzare i vari elementi della nostra pagina.

Una volta selezionato il pulsante Analizza, infatti, non dovremo far altro che portare il mouse sull’oggetto che ci interessa all’interno della finestra di navigazione e dinamicamente comparirà un rettangolo attorno all’elemento puntato.

Prima ancora di effettuare il click verranno evidenziate nella scheda Html e Css le relative caratteristiche e regole.
Se quello è veramente l’oggetto che ci interessa allora effettuiamo un normale click col sinistro, l’oggetto verrà selezionato e tranquillamente potremo analizzarne i contenuti come già spiegato in precedenza.

Personalmente faccio un forte uso del pulsante Analizza perché permetterà in pochi passaggi di analizzare un determinato oggetto e studiarne le caratteristiche, evitando la perdita di tempo di navigare tra i vari annidamenti dei tag.

Il pulsante Modifica rappresenta un altro modo per modificare i contenuti HTML o CSS (a seconda della scheda in cui ci troviamo) di un determinato elemento.

Tuttavia consiglio di modificare tali contenuti tramite il doppio click o click destro nelle relative schede, poiché non correremo il rischio di snaturare la sintassi HTML o CSS.
In questo modo, infatti, nel caso dovessimo scrivere delle istruzioni scorrette Firebug sarà in grado di riconoscerle e semplicemente le ignorerà.

Dal pulsante Modifica noi potremo testualmente modificare ogni singola parentesi graffa o tag quindi, sebbene ciò aumenti il nostro “potere” di modifica, Firebug non sarà più in grado di riconoscere i nostri eventuali errori e quindi di correggerli.

Conclusioni

Come avrai dedotto leggendo questo articolo le potenzialità offerte da questo plugin sono veramente vaste.
Con tutta probabilità una volta installato non vi separerete più e lo terrete sempre a portata di mano ogni volta che vorrete studiare un layout, un codice Java Script o semplicemente per testare le vostre applicazioni Web.

Con ciò concludo il mio primo articolo su Blographik.it, e invito tutti i lettori a rilasciare nei commenti il loro parere sull’articolo, sulla sua utilità o per eventuali dubbi e chiarimenti.
Sono inoltre ben accette critiche costruttive a partire dalle quali possa migliorare la qualità dei miei articoli.

Un ringraziamento particolare a Mirko D’Isidoro che mi ha dato la possibilità di condividere questo argomento con voi.

Un saluto a tutti gli appassionati lettori di Blographik.it

Autore:  Attilio Fiumanò, studente di Ingegneria Informatica al Politecnico di Milano, appassionato di programmazione e sviluppo applicativi basati su C# e Java.
Ottime conoscenze di PHP, MySql, JavaScript oltre ai più tradizionali xHTML e CSS.