Feb

13

Firebug: un tool indispensabile per il web

Pubblicato da Mic in Web

Questo è il primo di una serie di articoli dedicati ad alcuni strumenti utili per lo sviluppo di siti ed applicazioni web.

Firebug Oggi analizzeremo Firebug, un’estensione per Firefox, recentemente arrivata alla versione 1.0, che fornisce strumenti per l’analisi della struttura e della grafica delle pagine web.

All’attivazione, Firebug si apre come un pannello integrato nella parte bassa della finestra di Firefox, ma può anche essere visualizzata in una finestra separata.

L’analisi della pagina visualizzata può essere eseguita a diversi livelli:

  • Console
  • HTML
  • CSS
  • Script
  • DOM
  • Net

Procediamo a descriverli in dettaglio.

Console
Questo strumento permette una visualizzazione degli errori Javascript e dei messaggi di comunicazione con il server, utilizzanti l’oggetto XmlHttpRequest (ciò che è alla base della tecnologia Ajax).
E’ anche possibile visualizzare diversi dettagli per ogni messaggio ed eseguire codice javascript arbitrario, inserito manualmente nel prompt della console.
Questo strumento si rivela molto utile per eseguire verifiche di applicazioni che utilizzano la tencologia Ajax per indagare eventuali errori nella stringa di risposta che viene generata dal server.

HTML
Firebug Sezione HTMLQuesta sezione fornisce una visualizzazione espandibile di tutte le sezioni del codice HTML della pagina. E’ sufficiente far scorrere il mouse sui tag nel sorgente della pagina per vedere evidenziata nella finestrra del browser la zona corrispondente.
Utile anche il sistema “Inspect” che fornisce la funzionalità opposta: muovendo il mouse sulla pagina visualizzata nel browser, vengono evidenziati i tag corrispondenti nel sorgente HTML.
Infine, cliccando su un tag, nella parte destra della finestra di Firebug, sono riportati tutti gli attributi CSS ad esso applicati.
La potenza di questo strumento risiede nella possibilità di modificare sia il codice HTML sia gli attributi CSS e vedere applicate direttamente le modifiche alla pagina visualizzata dal browser, senza più necessità di modificare lo script originale e ricaricare la pagina per vedere il risultato delle nuove modifiche.

CSS
La sezione CSS consente la visualizzazione di tutti i fogli di stile, CSS, a cui fa riferimento la pagina visualizzata.

Script
Lo strumento “Script” rappresenta un vero debugger del codice javascript presente nella pagina visualizzata, con la possibilità di inserire Breakpoints e Watch Expressions.

DOM
In questa sezione è riportata la struttura ad albero del DOM della pagina.

Net
Firebug Sezione NET Utile per l’ottimizzazione del caricamento delle pagine, in questa ultima sezione di Firebug sono riportate tutte le connessioni effettuate con il server, con tempi di caricamento di ogni file, header di richiesta del client e di risposta del server ed anteprima delle immagini caricate.
Se avete un collo di bottiglia nel caricamento di una pagina, con questo strumento lo rileverete immediatamente!

Un’esauriente guida all’utilizzo è disponibile sul sito di Firebug, all’indirizzo: http://getfirebug.com/docs.html.

In conclusione questa estensione di Firefox è uno strumento semplice, ma molto potente, per analizzare, verificare e testare un sito od un’applicazione web.
Personalmente, oltre alla visualizzazione dello stream inviato e ricevuto con l’oggetto XmlHttpRequest, ho trovato utilissimo la possibilità di modificare HTML e CSS al volo con una visualizzazione immediata delle modifiche apportate.

Infine, per chi fosse interessato, recentemente il team di Firebug ha reso disponibile un repository Subversion dei sorgenti dell’estensione.

Mic


Tag: .


Oppure leggi altri nostri articoli:

  • No related posts

Sono presenti 3 commenti all'articolo “Firebug: un tool indispensabile per il web”

  1. da stefac, 13 February 2007 alle 15:20

    Ehi, veramente un bel add-on, lo installo subito.
    Grazie della segnalazione Mic :-P

  2. da Stefano, 7 March 2007 alle 18:19

    Si sembra utile… ma quello che voglio capire e se si possono rendere effettive le modifiche all’html o ai css??? oppure serve solo per debug.
    Grazie

  3. da Mic, 8 March 2007 alle 14:42

    Le modifiche che apporti servono solo per un debug diretto sulla pagina.
    Questo sistema è pensato proprio per eseguire delle prove in diretta, senza dover sempre rimodificare l’originale nel corso dei test, non è un editor della pagina.
    Una volta raggiunta la versione definitiva che ti soddisfa, la devi applicare all’originale.
    Considera comunque che Firebug ti dice la posizione degli attributi nei vari file CSS inclusi dalla pagina che stai modificando, quindi semplifica anche il lavoro di modifica finale.

    Mic

Scrivi un commento