Firebug: la migliore estensione per lo sviluppo web!

Vi presento un ottima estensione per firefox, che a mio parere rappresenta una delle migliori per gli sviluppatori web: Firebug.
Grazie ad essa potrete eseguire un debug, modificare e monitorare il codice html, css e javascript di un sito, e per di più potrete visualizzare in tempo reale le vostre modifiche direttamente su firefox.
Una volta attivato, si aprirà un pannello nella parte bassa della vostra scheda di firefox, dal quale potrete accedere a 5 tab: Console, Html, Css, Script, Dom, Net. Ma analizziamo meglio ognuno di questi strumenti…

• Console

La console di firebug vi permette di eseguire un debug degli errori Javascript e loggare le richieste XMLHttpRequests (AJAX), e naturalmente modificare manualmente da linea di comando il codice.

• Html

Premendo il pulsante Inspect, selezionate un’area della pagina visualizzata sul browser: verranno evidenziati i tag corrispondenti del codice html, e nel box sulla destra appariranno i relativi attributi css.
Questo è sicuramente lo strumento più interessante per i webdesigner, infatti potrete modificare sia il codice html che gli attributi css e vedere direttamente nel browser le modifiche apportate, senza quindi dover più modificare il codice originale e poi ricaricarlo per vedere il risultato.

• CSS

Da qui visualizzerete tutti i fogli di stile della pagina.

• Script

Lo strumento Script è un debugger del codice javascript, e aggiunge la possibilità di inserire Breakpoints e Watch Expressions.

• DOM

La struttura ad albero del DOM della pagina, permette le operazioni di DOM traversing e DOM hacking direttamente sul codice renderizzato lato client, senza modificare i file lato server.

• NET

Quest’ultimo strumento analizza i tempi di caricamento di ogni file (css, js, immagini), le connessioni effettuate con il server e le richieste del client, utilissimo per ottimizzare i tempi di caricamento della pagina.

Eccovi alcuni video:

Presentazione di Firebug 1.0

Firebug Debugging AJAX Tutorial

Firebug CSS editing Tutorial

Link: Dowanlod Firebug

Ricevi gli aggiornamenti di 4mj.it via Feed