Firebug è il famoso e rivoluzionario add-on per Firefox che aiuta davvero molto web developers e designers per testare e analizzare il codice del front-end. Inutile elencare tutte le funzionalità che Firebug mette a disposizione perché l’elenco sarebbe davvero infinito, ma basta sapere che riesce a fornire strumenti davvero importanti per un’analisi precisa e dettagliata del codice.

Nonostante questo, Firebug è potenziabile con sue personali estensioni che lo completano come strumento e consentono di estendere ancora di più il raggio d’azione.

1. Pixel Perfect

Pixel Perfect è un utile estensione di Firebug che permette di confrontare facilmente un template per Photoshop con la sua controparte HTML. In sostanza, tramite questo add-on possiamo caricare su browser un jpg (preparato precedentemente con Photoshop) che potremo usare come guida durante la creazione dell’HTML della pagina. Qui trovate i punti fondamentali sull’installazione ed utilizzo di Pixel Perfect.

2. Page Speed

Page Speed consente di visualizzare quali elementi della nostra pagina web possono appesantire il rendering della pagina stessa, fornendo utili info aggiuntive su come ottimizzarli.
Ad esempio, se utilizziamo immagini png non compresse, Page Speed ci segnala la versione compressa della nostra immagine, per salvarla direttamente e sostituirla alla precedente. Stesso discorso con i file javascript non compressi. Inoltre, Page Speed fornisce inoltre altri dettagli utili, per esempio avvisa di abilitare la compressione gzip, mostrando il risparmio in termini di kb.

3. CodeBurner

Si tratta di un add-on fornito da SitePoint che permette di aggiungere un manuale di referenze su HTML / CSS che è possibile consultare direttamente dal codice della pagina. Un pratico pannello di ricerca ci permette di ricercare il tag di nostro interesse anche se è possibile cliccare direttamente su un tag presente nel codice per ottenere esempi di utilizzo e specifiche. Comodissimo!

4. FireRainbow

Semplice quanto pratica estensione che funge da vero e proprio Syntax Highlighter. Infatti permette di colorare ed evidenziare la sintassi JavaScript, CSS e HTML aiutandoci a individuare meglio le parti di codice.

5. Firecookie

Nell’elenco non poteva mancare l’estensione dedicata ai cookies. Infatti, Firecookie permette di visualizzare e gestire i cookies direttamente da Firebug. In pratica, con Firecookie vi attiva il tab (la linguetta) “Cookies” di Firebug mostrando tutti i cookies associati al dominio della pagina visualizzata. E’ possibile ispezionare eventi, scadenze, permessi e esportare i dati in un file.