Strumento per sviluppatori Web Firebug

È un pacchetto di utilità con cui è possibile analizzare e testare la velocità di caricamento in base a ciascun componente, file, possiamo anche modificare, monitorare ed eseguire il debug del codice sorgente, CSS, HTML e Javascript di una pagina web istantaneamente e in tempo reale osservare il cambiamento In rete. Serve anche ad analizzare il comportamento di una variabile o url con parametri, potendo vedere quali parametri vengono inviati e cosa risponde il server.
Alcune delle caratteristiche che porta Firebug:

• Modifica HTML in tempo reale.
• Modifica CSS in tempo reale.
• Modifica Javascript in tempo reale.
• Layout CSS.
• Debugger Javascript.
• Motore di ricerca integrato.
• Monitoraggio dell'attività di rete.
• Esploratore del DOM.
• Gestore errori in Javascript, CSS e XML

Inizieremo scaricando e installando il plugin Firebug:
[color = # 2f4f4f] Scarica Firebug [/ color]

Dal sito web dei componenti aggiuntivi di Mozilla, ci sarà permesso di accedere e installare il componente aggiuntivo
Una volta installato Firebug e riavviato Firefox, possiamo accedere rapidamente a Firebug facendo clic con il tasto destro del mouse sullo schermo del Web su cui vogliamo lavorare o dal menu degli strumenti
Prendiamo il web dell'esempio delle nazioni unite http://www.un.org/en/, facciamo una lic a destra sullo schermo e si aprirà una schermata con Firebug.

INGRANDIRE

In questo caso, nella scheda rete vediamo il peso in kb e in quale sequenza il browser ha reso gli elementi e quanto tempo ha impiegato ogni elemento per essere visualizzato, è interessante notare che dei 6,61 secondi impiega la pagina per render, due secondi corrispondono a una singola immagine, che è la barra della lingua, quindi potremmo pensare se può essere ottimizzata.
Nella scheda HTML e CSS possiamo puntare a un blocco della struttura e ci mostrerà il codice.

INGRANDIRE

Qui, ad esempio, indichiamo il div banner superiore che corrisponde all'id #topbanner nel file style.css. Se clicchiamo sul codice CSS possiamo modificarlo e questo si rifletterà temporaneamente sul web. La scheda della console è quella che ci permetterà di vedere e monitorare le chiamate javascript e gli errori in caso di errore. In caso di errore, mostrerà i file e il numero della riga di codice in cui si verifica l'errore.

INGRANDIRE

Firebug ci aiuta a trovare rapidamente gli oggetti DOM e quindi a modificarli al volo. Consente di eseguire l'ispezione DOM.
Il Document Object Model o DOM ("Modello a oggetti documento" o "Modello a oggetti per la rappresentazione del documento") è essenzialmente un'interfaccia di programmazione di applicazioni che fornisce un insieme standard di oggetti per il rendering di documenti HTML e XML.