Firebug è forse il miglior amico dello sviluppatore web. Per chi non lo sapesse, Firebug è un plugin per Firefox che permette di visualizzare e debuggare i principali elementi di una pagina web: HTML, CSS, Javascript e chiamate Ajax. Il plugin è talmente ben fatto che la maggior parte degli sviluppatori impara ad usarlo in modo intuitivo, senza studiarne la documentazione.
La funzionalità più conosciuta e popolare di Firebug è il pulsante Inspect, tradotto in italiano come Analizza, che permette di selezionare visualmente un qualsiasi elemento della pagina web per andare a scovare la corrispondente sezione HTML.
Firebug per Firefox
La funzionalità è talmente comoda che spesso è l'unica ad essere utilizzata. Con questo articolo vogliamo introdurre altre funzionalità di Firebug che a volte rimangono sconosciute anche a chi utilizza il plugin da moltissimo tempo. Lo scopo è presentare le diverse funzionalità velocemente, senza scendere nei dettagli, rimandando alla documentazione ufficiale per eventuali approfondimenti.
Posizionare gli elementi coi tasti cursore
Dopo avere selezionato un elemento HTML, questo risulterà visualizzato nella sezione HTML del pannello di Firebug (poco a destra del pulsante Inspect). Sulla destra avremo alcuni tab, che dovrebbero essere: Stile, Elaborato, Layout e DOM.
Nel tab Stile vedremo le regole CSS applicate all'elemento HTML che abbiamo selezionato. Alcune di queste proprietà potrebbero riguardare la posizione dell'elemento, come ad esempio margin, top, left, line-height ecc. Consideriamo ad esempio
height: 800px;
Se clicchiamo sulla cifra “800”, il suo sfondo dovrebbe diventare blu. A questo punto potremo cambiare dinamicamente il valore premendo i tasti cursore su e giù. E' una funzione comodissima quando dobbiamo decidere i valori esatti del nostro layout, senza dover ricaricare decine di volte la pagina. La funzionalità può essere usata su qualsiasi valore numerico, come ad esempio
border: 2px solid black;
anche in questo caso, cliccando sulla sulla cifra “2px” sarà possibile cambiare le dimensioni del bordo usando i tasti cursore. Ma non finisce qui: possiamo usare i tasti cursore destra e sinistra per spostarci tra le varie proprietà, selezionando ad esempio il valore “black” del bordo. In questo modo potremo usare i tasti su e giù per cambiare il colore del bordo, scorrendo (in ordine alfabetico) la lista dei colori più utilizzati!
Controllare gli header HTTP
La tab Net del pannello principale può essere usata per sbirciare gli header di tutte le chiamate nate dalla nostra pagina, comprese le chiamate Ajax. In questo modo diventa più facile capire quali cookies sono stati inviati, se il valore del referer è corretto ecc. ecc.
Box Model colorato
Ogni volta che selezioniamo un elemento HTML un simpatico set di colori ci aiuterà a riconoscere i componenti del box model, usando la seguente convenzione:
- giallo = margine
- viola = padding
- azzurro = contenuto
Layout e righelli
Se dopo avere selezionato un elemento apriamo il tab Layout nel pannello di destra, verrà mostrata una rappresentazione grafica del box model applicato a quell'elemento, assieme ad alcuni righelli che ci aiutano a visualizzare le dimensioni del box model (in cima alla pagina). Anche in questo caso possiamo cliccare sulle cifre disegnate attorno al padding, bordo o margine per aggiustare o sperimentare il layout al variare dei vari parametri.
Breakpoint condizionati
Nella sezione Javascript possiamo inserire breakpoint come in un normale IDE. Inoltre, cliccando col tasto destro su un breakpoint possiamo renderlo condizionato, ovvero farlo diventare effettivo solamente se una certa espressione è verificata.
Riga di comando
Cliccando sul pulsante Console avremo a disposizione (in basso) una riga di comando, identificata dal “cursore” marcato come >>>. Qui possiamo eseguire comandi Javascript al volo, come se avessimo a disposizione una “shell javascript”, con tanto di completamento (tasto TAB).
Profila Javascript
La funzione profilazione Javascript va attivata dal menu principale di Firebug, cliccando sulla “coccinella” vicino al tasto Inspect. Cliccando poi su Console – Profila attiveremo una sessione di benchmark. Da questo momento in poi, qualsiasi nostra attività (o del browser) verrà misurata. Per vedere il report delle nostre azioni (e terminare la sessione di profilazione) basta cliccare nuovamente su Profila.
Console logging
Quando utilizziamo Firebug avremo a disposizione un oggetto console che permette di scrivere messaggi di log nella Console di Firebug, ad esempio
console.log(“Hello World!”) ;
Attenzione però: l'oggetto Javascript console è creato da Firebug, quindi non è cross-browser, anzi: se un'altra istanza di Firefox (sprovvista del plugin Firebug) tentasse di eseguire il comando qui sopra avremmo un errore a run-time. Per ulteriori dettagli sul funzionamento dell'oggetto console rimandiamo alla documentazione ufficiale di Firebug.
