Pubblicato il 24/05/11e aggiornato il

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)

FIREBUG 

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

firebug firefox

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

classe di stile per titolo del blog

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

titolo blog 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

firebug id e html 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.





6 commenti :

  1. So che questo mio commento non centra un fico secco con l'argomento che hai trattato oggi, ma solo tu puoi aiutarmi a risolvere il mio problema.Da alcuni giorni ho problemi a lasciare commenti su blogger sia se metto come account google sia se provo a lasciarlo come anonimo, inoltre se clicco su esci da blogger l'account non si sgancia e rimango sempre collegata a blogger.Non so se sono stata chiara...non sono pratica di termini informatici. Grazie per tutti i tuoi consigli grazie a te sto imparando tantissimo su questo mondo a me sconosciuto.Un abbraccio Gilda

    RispondiElimina
  2. @Gilda
    Molti account di Blogger stanno avendo problemi da ieri. Se non si risolvessero rivolgiti qui
    http://www.google.com/support/forum/p/blogger?hl=it
    Ciao

    RispondiElimina
  3. Prima di ogni commento, ti ringrazio per l'aiuto disinteressato che più volte mi hai dato.
    ----
    Quanto a Firebug è molto comodo.
    Peccato che ha il "vizietto" di rallentare Firefox del 74% (dati Mozilla).

    RispondiElimina
  4. Puoi verificare qui:
    https://addons.mozilla.org/it/firefox/performance/

    RispondiElimina
  5. @magocamillo
    Infatti io per navigare uso Chrome, mentre Firefox lo utilizzo solo per cose specifiche come appunto questa :)

    RispondiElimina
  6. Mi hai dato un'ottima idea, ho scaricato Firefox portable USB e vi ho inserito FIREBUG.
    Adesso uso separatamente i due browser.
    Grazie,
    T.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.