Firebug è una estensione di Firefox per ispezionare le pagine web e modificare il template.

In molti dei commenti mi viene chiesto di come procedere per effettuare delle modifiche al sito, come posizionare meglio un widget, come aumentare delle dimensioni di alcuni elementi, come centrarne altri e altre richieste analoghe. L'aspetto del layout del blog è determinato dal codice HTML e dai CSS presenti nel modello. Una prima idea delle operazioni da fare si può avere andando a dare una occhiata al codice sorgente della pagina. Su Firefox si va su Visualizza > Sorgente pagina, su Chrome invece si clicca con il destro del mouse sulla pagina e si sceglie Visualizza sorgente pagina. In tutti i browser si può accedere alla Sorgente pagina con la scorciatoia da tastiera Ctrl+U (OS Windows).

Visualizzando il modello non è detto però che si trovi subito il blocco di codice che interessa quel particolare elemento. Per esempio non è così immediato andare sul CSS che determina l'aspetto della data o del titolo del post. Bisogna anche dire che nei modelli personalizzati, ogni programmatore fa un po' come gli pare e nomina le classi di stile secondo una sua particolare preferenza.

Firebug è una estensione di Firefox che è essenziale per i professionisti del web ma che può essere utile anche ai blogger dilettanti o semiprofessionisti senza bisogno che questi ultimi abbiano particolari conoscenze tecniche. Dopo l'installazione di Firebug e il riavvio di Firefox, si visualizzerà l'icona di Firebug in basso a sinistra (versione 4 di Firefox)

 

con la caratteristica forma di un insetto. Se ci si reca nella pagina che si vuole ispezionare e si clicca sopra all'icona, si aprirà una finestra nella parte bassa che mostrerà un sacco di informazioni sulla pagina che è aperta in quel momento

Oltre alla Console ci sono 5 schede: HTML, CSS, Script, DOM e  Net. Mi occuperò solo delle prime due ricordando che Net è utile per determinare i tempi di caricamento della pagina e può essere usata insieme a Page Speed. Firebug consente si visualizzare il codice HTML e i CSS di un singolo elemento quando questo viene selezionato. Per poterlo fare si clicca sulla seconda icona a partire da sinistra, in inglese si chiama Inspect, e si porta il mouse sull'elemento di cui vogliamo scoprire il codice che sarà evidenziato all'interno di un rettangolo celeste

Dal precedente screenshot si vede per esempio che, selezionando il titolo del blog, viene evidenziata la riga corrispondente

<div class="titlewrapper">

Se volessi per esempio mettere il titolo del blog in una posizione centrale, dovrei andare in Design > Modifica HTML e, sopra la riga

]]></b:skin>

che indica la fine dei CSS del blog, incollare il codice

.titlewrapper {
text-align:center;
}

Dopo aver salvato il modello, si vedrebbe che il titolo è in posizione centrale

Questo è solo un modesto esempio della potenza di questa estensione di Firefox. Ho anche postato un breve video su Youtube per rendere più chiaro come usare Firebug e come cercare il codice di un singolo elemento o widget del blog

 

Si può ricavare anche con facilità il codice HTML e l'ID di ciascun widget

 

Si tratta di uno strumento per esperti ma che può ritornare utile anche per i blogger con conoscenze informatiche limitate. Nei prossimi giorni illustrerò come utilizzare questo tool per effettuare delle modifiche al layout del blog. Risulta essere indispensabile quando il codice del nostro modello è diverso da quelli ufficiali di blogger.