Firebug è un'estensione di sviluppo Web open source per il browser Web Mozilla Firefox. Disegnata da Joe Hewitt, uno per gli sviluppatori di Firefox originali, Firebug è un aiuto inestimabile per gli sviluppatori Web e offre una vasta gamma di strumenti per aiutarci quando progettazione pagine Web e il debug. Il gruppo di lavoro di Firebug ora controlla Firebug e rilascia miglioramenti e aggiornamenti regolari.

Che cosa è Firebug?

Firebug è un plugin per Firefox che aggiunge una serie di strumenti utili al browser per l'editing e il debug di HTML, CSS e JavaScript in tempo reale e reporting sulle prestazioni della tua pagina Web. Ad esempio, utilizzando la scheda di rete si vede ogni richiesta Web effettuata dalla pagina al fine di caricare completamente. Firebug Visualizza ogni richiesta nel dettaglio, insieme con la dimensione e il tempo impiegato per il completamento della richiesta. Ciò consente di individuare eventuali colli di bottiglia adatto per ottimizzazione e migliorare i tempi di caricamento del sito. Inoltre potrai vedere i file che il browser recupera dalla sua cache e i file che vengono caricati dal server con ogni richiesta di pagina.

Caratteristiche HTML

Quando una pagina Web viene caricata con il pannello di Firebug aperto, Firebug Visualizza il codice sorgente HTML della pagina in una struttura ad albero, consente di espandere e comprimere le aree per visualizzare codice specifico. Come si sposta il puntatore del mouse sopra il codice sorgente HTML, Firebug evidenzia le aree corrispondenti sulla pagina Web. Un editor HTML in tempo reale consente di modificare il codice sorgente HTML di una pagina Web e vedere gli effetti delle modifiche visualizzate immediatamente nella finestra del browser. Questo rende il debug HTML layout più semplice, in quanto è possibile modificare misurazioni in pixel dal vivo, ad esempio, con i risultati visualizzati istantaneamente.

Funzionalità CSS

Quando si seleziona un elemento HTML nella visualizzazione origine HTML, Firebug visualizza automaticamente tutti gli stili CSS che si applicano a tale elemento, compresi quelli destinati all'oggetto specificamente e stili che influiscono sull'elemento attraverso una regola generale. Come diversi file CSS possono essere caricati in una pagina Web, Firebug aggrega gli stili da ogni foglio prima di visualizzare gli stili che si applicano all'elemento selezionato. È possibile modificare gli attributi di stile in tempo reale con i risultati mostrati vivere nella finestra del browser e disattivare gli stili o gli attributi, se necessario. Ciò consente di rapidamente rintracciare eventuali stili causando problemi di visualizzazione e modificare i loro attributi fino ad ottenere l'output desiderato.

Funzionalità JavaScript

La console JavaScript in Firebug è utilizzata per il debug di qualsiasi script inclusi nella tua pagina. Firebug compila in un elenco di tutti gli script nella pagina, sia interni che esterni, aiutandovi ad individuare rapidamente e saltare tra le sezioni di codice JavaScript. JavaScript sulla pagina può essere messo in pausa manualmente o con l'uso di punti di interruzione personalizzati, che interrompono il codice quando l'esecuzione raggiunge un certo punto. È quindi possibile scorrere il codice riga-per-riga, con l'effetto del codice trasmesso in diretta, permettendo di vedere il percorso intrapreso attraverso la struttura del programma. Inoltre potrai vedere il contenuto delle variabili del codice come il codice è in esecuzione, per verificare che il codice si comporta nel modo desiderato. Codice JavaScript può essere inserito direttamente nella console ed eseguito, permettendo di creare una tantum interazioni con gli script per il debug.