✅ Strumento per sviluppatori Web Firebug

Sommario

È 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.