Firebug e’ un plugin di Mozilla Firefox essenzale per chi deve programmare per il web. E’ considerato uno degli strumenti ESSENZIALI e grazie ad esso e’ possibile risparmiare moltissimo tempo per trovare eventuali bugs e correggere in real time errori dovuti a script javascript e/o codici html.
Per usare firebug serve:
Dalla mia esperianza di programmatore andro’ ora a illustrarvi , quali sono secondo me , le funzioni piu’ importati e utili di questo plugin.
Prima di iniziare a esaminare scheda per scheda ricordo che per ogni tipo di scheda di firebug sara’ possibile:
Per aprire questa scheda basta cliccare con il tasto destro del mouse sulla pagina del sito web che si vuole esaminare e selezionare la voce “analizza elemento” posta verso il fondo dell’elenco a cascata.
Attraverso il pulsante “seleziona elemento nella pagina web”, come e’ possibile vedere dallo screenshot, si possono selezionare i campi che piu’ ci interessano e vedere il codice, senza star a cercare nel codice le righe che piu’ ci interessano. E’ anche possibile passare semplicemente il mouse sulla pagina e in automatico il plugin selezionara’ i <div> e i vari tags su cui si e’ passati sopra.
Questa funziona la reputo una delle piu’ importanti perche’ , oltre a far risparmiare un sacco di tempo, e’ in grado di visualizzare e selezionare istantaneamente la parte html che ci interessa.
E’ complementare alla scheda HTML. Una volta selezionata la parte che ci interessa analizzare, come descritto in precedenza per la scheda HTML e possibile avere subito la descrizione del foglio di stile CSS.
Bellissa e utilissa questa funzione, oltre a visualizzare solo i paramenetri del CSS della zona selezionata, ci fornira’ anche una visualizzazione grafica del BOX MODEL cliccando sulla voce Layout. In questo modo possiamo ottenere velocemente le dimensione in px dei box e quindi una visione completa del Layout grafico dell’oggetto con tanto di margin,bording e padding.
Trascurerei la descrizione della voce DOM, visto che e’ analoga alle precedenti, io personalmente la uso dirado. Tuttavia puo’ essere utile per chi scripta in javascript e/o ha bisogno di avere una gerarchia xml degli elementi della pagina.
Di Default questa scheda e’ disabilitata. Per usarla quindi va prima abilitata cliccando sull’icona apposita e confermando l’attivazione. Una volta attiva, quando sarete in una pagina html con degli script, se vi saranno degli errori vi sara’ segnalato l’errore con relativo numero di riga e nome del file dove e’ stato riscontrato. L’errore sara’ segnalato con una bella scritta rossa “errore/i N_errori” ben visibile.
Insieme alla scheda HTML, questa scheda la reputo molto importante per trovare immediatamente l’errore e correggerlo. E’ possibile anche inserire dei breakpoint, mediante doppio click sulla riga di codice che si vuole analizzare.
Grazie ai breakpoint ( su firebug “punti di arresto” ) si puo’ debuggare in tutta tranquillita’ il proprio codice avendo anche informazioni relative ai valori delle variabili come un comune debugger di C/C++/JAVA.
Anche questa scheda deve essere abilitata prima di essere utilizzata. Come e ‘ stato fatto quindi per la precedente scheda, si dovra’ ripetere i medesimi passaggi prima di usarla.
Grazie a questa scheda e’ possibile vedere le velocita’ di download di foto, video, icone, scripts in flash e molto altro presenti nella pagine web sotto esame .
Sara’ quindi possibile ottimizzare al meglio una pagina in modo da renderla piu’ leggera da scaricare. Si ricorda che l’ottimizzazione di una pagina e/o di un sito e’ la parte piu’ importante e piu’ lunga da svolgere.
E’ proprio per questo che consigliamo di utilizzare anche questi tipi di banchmark per capire dove si puo’ ottenere migliori risultati, sempre ricordando che i crawler di Google tengono in considerazione anche la latenza e la velocita’ di risposta di un sito web.
Oltre alla velocita’ di download, che si puo’ notare dallo screenshot, firebug fornisce un riepilogo per ogni files scaricaro. Nel dettagli visualizza l’ip/host del server da dove il file e’ stato scaricato, eventuali messaggi di errore ( specialmente i 404 e 301 ) o i messaggi di risposta se l’esito del download e’ andato a buon fine e la grandezza del pacchetto scaricato.
L’ultima scheda chq questo fantastico plugin di firefox ci mette a disposizione e’ la scheda console.Anche quest’ultima scheda dovra’ essere abilitata come abbiamo fatto per le precedenti.
Se avete la necessita’ di provare degli script run time su una certa pagina web, allora la console e’ quello che fa per voi. Grazie ad essa difatti e’ possibile eseguire codice javascript direttamente dal browser e mandarlo in esecuzione senza bisogno di editare alcun file.
E’ possibile eseguire anche codice jquery. Per far cio’ basta eseguire questi tre semplici passaggi :
Una volta aggiunto alla barra dei segnalibri quando vorrete usare su una pagina la console con jquery, vi bastara’ clickare sul segnalibro che sostanzialmente non fa altro che aggiungere al body il link alle librerie jquery e il gioco e’ fatto : iniziate a scrivere il vostro codice sulla console e la pagina sara’ modificata di conseguenza real time.
E voi che cosa ne pensate ? L’avete gia’ provato o lo usate ? fateci sapere le vostre opinioni.
Alla prossima…
Ciao, guida molto utile, non ho capito però come utilizzare jquerify, per seganlibro intendi quello di firefox?
Ciao Francesco,
Prima di tutto grazie. Per quanto riguarda il segnalibro, lo si puo’ impostare in qualsiasi browser da Firefox a IE e Chrome: basta salvare il segnalibro nella barra dei menu e quando vorrai testare un tuo script jquery prima di scrivere in console di firebug il codice ti devi ricordare di cliccare sul segnalibro per attivare le librerie
.
Se occorre posso fare un video per spiegare meglio, fammi sapere.
Ciao,
Daniele