Che cosa fare per Firebug per Firefox?

September 23

Firebug è un'estensione di sviluppo web open-source per il browser web Mozilla Firefox. Progettato da Joe Hewitt, uno degli sviluppatori originali di Firefox, Firebug è un aiuto prezioso per gli sviluppatori Web e offre una vasta gamma di strumenti per aiutare nella progettazione di pagine Web e il debug. Il gruppo di lavoro Firebug ora controlla Firebug, e rilascia aggiornamenti regolari e miglioramenti.

Che cosa è Firebug?

Firebug è un plugin per Firefox che aggiunge una serie di strumenti utili per il browser per l'editing e il debugging HTML, CSS e JavaScript in tempo reale e reporting sulle prestazioni della pagina Web. Ad esempio, utilizzando la scheda Net si può vedere ogni richiesta Web da parte della pagina per caricare completamente. Firebug mostra ogni richiesta in dettaglio, insieme con la dimensione e il tempo necessario per la richiesta per completare. Questo ti aiuta a trovare eventuali colli di bottiglia adatto per l'ottimizzazione, e migliorare il tempo di caricamento del sito. È anche possibile visualizzare i file browser recupera dalla cache, e quali file vengono caricati dal server ad ogni richiesta di pagina.

Caratteristiche HTML

Quando una pagina Web viene caricato con il pannello di Firebug aperto, Firebug visualizza il codice sorgente HTML della pagina in una struttura ad albero, che consente di espandere e comprimere le aree di vedere codice specifico. Quando si sposta il puntatore del mouse sopra il codice sorgente HTML, Firebug mette in evidenza le aree corrispondenti nella pagina Web. Un editor HTML in tempo reale consente di modificare il codice sorgente HTML per una pagina web e vedere gli effetti dei cambiamenti visualizzati immediatamente nella finestra del browser. Questo rende i layout HTML debug più facile, come si può cambiare le misurazioni in pixel vivono, per esempio, con i risultati visualizzati all'istante.

Caratteristiche CSS

Quando si seleziona un elemento HTML nella vista origine HTML, Firebug visualizza automaticamente tutti gli stili CSS che si applicano a tale elemento, compresi quelli che colpiscono l'oggetto specifico, e stili che influenzano l'elemento attraverso una regola generale. Come diversi file CSS possono essere caricati in una pagina Web, Firebug aggrega gli stili di ogni foglio prima di visualizzare gli stili che si applicano per l'elemento selezionato. È possibile modificare gli attributi di stile in tempo reale con i risultati mostrati dal vivo nella finestra del browser, e disabilitare gli stili o gli attributi, se necessario. Ciò consente di monitorare rapidamente tutti gli stili che causano problemi di visualizzazione, e cambiare i loro attributi fino ad ottenere l'output desiderato.

Caratteristiche JavaScript

La console JavaScript Firebug è utilizzato per eseguire il debug di eventuali script inclusi nella tua pagina. Firebug compila in un elenco tutti gli script della pagina, sia interni che esterni, vi aiuta a individuare e saltare tra le sezioni di codice JavaScript in fretta. JavaScript sulla pagina può essere interrotto manualmente, o con l'uso di punti di interruzione personalizzati, che interrompono il codice quando l'esecuzione raggiunge un certo punto. È quindi possibile eseguire il codice linea per linea, con l'effetto del codice trasmesso in diretta, che consente di vedere il percorso intrapreso attraverso la struttura del programma. È anche possibile visualizzare il contenuto delle variabili di codice come il codice è in esecuzione, per controllare che il codice si comporta nel modo desiderato. Il codice JavaScript può essere inserito direttamente nella console e giustiziati, che consente di creare interazioni one-off con i vostri script per il debug.