venerdì 30 novembre 2007

Firebug: Plugin Firefox per Sviluppatori

Firebug è un plugin per Mozilla Firefox che mette a disposizione una serie di strumenti utili per disegnatori di siti web e sviluppatori.

La documentazione ufficiale è piuttosto scarna per cui ho pensato fosse utile spendere alcune parole su come utilizzarlo.

Nota preliminare: se le immagini non sono chiare cliccatele per visualizzarle a pieno schermo

Una volta installato il plugin crea una voce Firebug all'interno del menu Strumenti di Firefox. Selezionando Open Firebug il plugin apre una finestra nella parte bassa dello schermo.

Visualizzazione html e css

La finestra è divisa in due parti. La parte sinistra mostra il codice html della pagina web con evidenziazione in diversi colori della sintassi dei tag e attributi e una corretta indentazione dei vari blocchi per migliorare la leggibilità del codice. Agendo sulle icone con i segni + e - a fianco di ciascun tag di apertura è possibile espandere o collassare il blocco relativo. In questo modo è facile mettere in evidenza soltanto la parte di codice su cui si vuole lavorare.

Muovendo il puntatore al di sopra di un tag html, la parte di pagina web generata da quel blocco di codice viene evidenziata in un diverso colore.

Si può anche seguire il percorso inverso, partire cioè dalla pagina web visualizzata per arrivare al codice. Basta premere il pulsante Inspect sulla barra strumenti di Firebug e muovere il puntatore del mouse sulla porzione visibile della pagina web. Una volta posizionatisi sulla parte che ci interessa, (un bordo viene disegnato intorno ai vari blocchi per facilitarci il posizionamento) basta cliccare e il codice corrispondente a quella parte di pagina verrà visualizzato nella finestra del plugin.

In questo modo è molto facile orientarsi nel codice e questo è uno dei motivi per cui l'uso di Firebug è estremamente intuitivo.

Restando sulla finestra di visualizzazione del codice html, altre funzionalità del plugin sono accessibili premendo il pulsante destro del mouse. Vediamo le più importanti

  • New Attribute. Aggiunge un attributo al tag html su cui è posizionato il puntatore del mouse.
  • Edit. Apre una finestra di editing dove è possibile modificare il tag html corrente, i suoi attributi e il contenuto, ad esempio il testo racchiuso in un tag div o paragrafo.
  • Delete Element. Rimuove il tag corrente dal documento.

L'effetto di tutte le modifiche apportate mediante queste funzioni si riflette in tempo reale sull'aspetto della pagina web visualizzata. Naturalmente ciò che viene modificato è solo la versione del documento nella memoria del browser, una volta soddisfatti del risultato occorre aprire il documento html con un editor e riportarvi le modifiche o queste verranno perse quando la pagina viene ricaricata.

Visualizzazione dei fogli di stile CSS

La parte destra della finestra del plugin mostra i fogli di stile CSS associati alla pagina web visualizzata. Le due viste, html e css sono automaticamente sincronizzate tra loro. Se si seleziona con il mouse un tag html nella finestra del codice, la finestra CSS mostra le proprietà impostate nel foglio di stile ed applicabili a quel tag.

Da notare che tutte le proprietà impostate in un selettore applicabile al tag html selezionato sono visualizzate in cascata. Un esempio è necessario.

Supponiamo di aver creato un foglio di stile con alcune proprietà in un selettore per tutti i paragrafi del documento e altre in un selettore specifico per i paragrafi di una certa classe. In questo modo.

p {
  margin: 15px;
  font-size: 10pt;
}

p.small {
  font-size: 8pt;
}

Una volta assegnato questo foglio di stile ad un documento, il codice viene mostrato da Firebug come nella immagine sottostante.

Quando il tag del paragrafo di classe small è selezionato nella vista del codice html, si può notare come la vista css riporti sia il selettore paragrafo sia il selettore più specifico per i paragrafi di classe small. La proprietà font-size all'interno del primo selettore è sbarrata ad indicare che è stata sovrascritta dalla proprietà impostata nel selettore più specifico.

La possibilità di individuare a colpo d'occhio quali proprietà sono applicabili alla parte di codice html in esame e in quali selettori sono impostate è utilissima quando si vuole modificare l'aspetto di pagine web con fogli di stile complessi.

Firebug rende molto semplice vedere l'effetto che avrebbe la rimozione di una determinata proprietà da un selettore. Se posizionamo il puntatore del mouse a fianco della proprietà font-size nel selettore p.small e premiamo il pulsante sinistro compare il simbolo () e la proprietà viene disabilitata. Allo stesso tempo la proprietà font-size nel selettore p non è più sbarrata e la pagina web si aggiorna per riflettere la nuova dimensione di font assegnata al paragrafo.

Sempre restando all'interno della vista css sono disponibili ulteriori funzioni

  • Modifica di una proprietà. Facendo click sul valore di una proprietà si apre un piccolo campo di testo dove si può impostare il nuovo valore.
  • Inserimento di nuova proprietà. Fare click con il pulsante destro all'interno del selettore e selezionare New Property.
  • Cancellazione di una proprietà. Fare click con il pulsante destro sul nome o valore della proprietà e selezionare Delete.

Vale anche in questo caso quanto detto per la modifica del sorgente html della pagina. Modificare il css tramite Firebug è utile per vedere in tempo reale l'effetto delle modifiche sull'aspetto del documento quando è visualizzato nel browser, ma il plugin in sè non è un editor, una volta che si è soddisfatti del risultato si dovrà editare il file css e riportarvi le modifiche effettuate.

Debugging di script Javascript

Premendo il pulsante Script sulla barra strumenti si visualizza il sorgente di tutti gli script Javascript attivi sulla pagina corrente sia quelli incorporati nel sorgente che quelli richiamati da file esterni.

Facendo click su un numero di riga del sorgente si ha la possibilità di impostare dei punti di interruzione. Quando si ricarica la pagina l'esecuzione dello script si ferma al primo punto di interruzione. Si può quindi continuare l'esecuzione passo passo o far proseguire lo script fino al successivo punto di interruzione. La parte destra dello schermo (finestra Watch) mostra i valori aggiornati di tutte le variabili, inclusi gli oggetti, dichiarate nel codice.

Non abbiamo esaurito tutte le funzioni di Firebug, ma le rimanenti possono essere facilmente apprese installando il plugin e facendo qualche esperimento.

Firebug è un ottimo prodotto. Il debugger Javascript a volte risulta un po' instabile e può provocare il blocco di Firefox, le funzioni per esplorare html e css sono comunque, anche da sole, una ragione più che sufficiente per installare questo plugin.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.