X
Skimbu è stato abbandonato, ma è stato sostituito da Tasc.it!

Firebug, il tool magico per modificare CSS/HTML delle pagine

Pubblicato da il giorno 6 maggio 2011

closeQuesto articolo è stato pubblicato 3 anni 4 mesi 12 giorni tempo fa e potrebbe contenere informazioni non più valide.

Firebug è probabilmente uno dei plug-in di Firefox indispensabili per un web designer ma è anche utile a chi vuole iniziare a sperimentare con i CSS, HTML, ecc…

icona
FireBugEstensione Browser GratisMozillaDevelopmentDownload

A cosa serve?

Innanzitutto Firebug non è una vera e propria applicazione ma un plug-in che si integra con Firefox.

Con Firebug possiamo:

  • Vedere e modificare il codice HTML di qualunque sito web
  • Modificare i JavaScript
  • Vedere e modificare il codice CSS di qualunque sito web
  • Visualizzare le metriche dei CSS, ovvero dove inizia e termina ogni parte della nostra pagina
  • Visualizzare i tempi impiegati per il caricamento di ogni singolo file, e quindi iniziare a pensare su cosa dobbiamo lavorare per velocizzare il nostro sito
  • Trovare velocemente gli errori presenti nel nostro codice

Insomma Firebug è utilissimo per modificare, debuggare e monitorare le pagine web nella loro interezza: a partire dal HTML per poi concentrarsi sulla grafica e addirittura la AJAX

E proprio per l’integrazione con il browser Firefox possiamo vedere il risultato di tutte queste modifiche in tempo reale!

Utilizzo pratico:

Dopo aver elencato la maggior parte delle funzionalità offerte da Firebug vediamo come si “comporta” in un ipotetico utilizzo pratico:

Iniziamo aprendo Firefox, l’icona di Firebug si trova in basso a destra e appena ci clicchiamo sopra appare la “finestra” principale.

Da una veloce analisi si capisce che l’interfaccia è molto semplice, si compone di 6 Tab: Console, HTML, CSS, Script, DOM, Net; che adesso analizzeremo singolarmente.

Tab Console:

Il Tab Console permette di inserire del codice JavaScript, come ad esempio jQuery, ed immediatamente Firebug ci segnala se ci sono degli errori.

Con il supporto ai JavaScript, Firebug supporta praticamente tutte le tecniche di programmazione web più moderne.

Tab HTML:

Da questo tab possiamo vedere tutto il codice della pagina (in HTML) e quindi controllare gli id e le class dei div piuttosto che verificare i loro “confini” come si vede nella figura; infatti basta passare il mouse sopra un div per far apparire un rettangolo colorato che ci mostra la sua posizione.

Inoltre si può anche fare l’esatto contrario: se si clicca sulla seconda icona a partire da sinistra (quella che raffigura un puntatore) si può passare il mouse su qualunque elemento della pagina e verrà istantaneamente mostrato il codice nell’ inspector.

E’ possibile addirittura cambiare il codice HTML cliccando su modifica, anche se è piuttosto inutile se si sta sviluppando un tema wordpress o una pagina PHP.

Tab CSS:

Ed è questo il tab, a mio parere, più utile, sia per chi sviluppa siti statici che per chi crea temi per wordpress o comunque siti in php.

Come per il Tab HTML, si può vedere l’intero codice e modificarlo semplicemente cliccando sui valori.

Ad esempio si può provare a modificare la grandezza dei div per pensare ad un nuovo design o cambiare la posizione degli elementi come ho fatto qua sotto spostando il bottone “Argomenti” e alzando la “navbar”.

Tab Script:

Questo tab è un completo Debugger, ovvero permette di scovare e eliminare i bug che spesso sono davvero introvabili soprattutto se si lavora con codici molto lunghi. Quando Firebug trova un errore fornisce un report più che dettagliato per correggerlo facilmente.

DOM:

Il Document Object Model (spesso abbreviato come DOM), letteralmente modello a oggetti del documento, è una forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti.
Il Tab DOM rappresenta gerarchicamente tutta la pagina web dove si possono osservare i gruppi (div) di cui è composto il documento per poi riuscire a compilare un valido CSS:

Net:

E’ la sezione di Firebug che si occupa di monitorare il tempo di accesso ai file coinvolti. Il tempo di accesso è mostrato graficamente ed è pressochè immediato capire qual’è il file che impiega più tempo ad essere caricato. Passando il puntatore sugli URL è possibile ottenere informazioni ancora più dettagliate come l’attesa o il tempo impiegato per la ricezione reale dei dati.

Conclusioni:

Firebug è sicuramente il migliore plug-in per l’editing, il dubugging e l’osservazione dei fogli CSS, HTML e Script; si può addirittura scrivere la maggior parte del codice con Firebug e poi copiarlo in Dreamweaver (o comunque in un text editor) già completato. E la cosa più sorprendente è che tutti questi strumenti sono racchiusi in un semplice plug-in gratuito!

Comunque, come ogni cosa, anche Firebug ha un “contro“; visto che è un plugin per mozilla ogni volta che inseriamo il codice per qualche altro browser non viene mostrato in live; nella pratica: se si scrive -moz-border-radius:10px; i bordi verranno arrotondati perchè è un codice per firefox ma se scriviamo sotto il codice per safari border-radiu:10px; non ci segnalerà l’errore .

Infine lo consiglio a tutti i WebDesigner (per utilizzare le funzioni più avanzate) e soprattutto a chi vuole imparare i codici tipici del web senza “fare danni”.

, 28 articoli pubblicati

Sono da sempre appassionato di tecnologia e da qualche tempo anche di fotografia. Ho 15 anni e vivo a Milano, la frenetica città della moda Italiana.

Visita il sito web di questo autore

Condividi l'articolo!

  • Ok

    Non ho mai capito come si applicano le modifiche fatte con Firebug, cioè se voglio editare l’html di un mio sito web con Firebug, come faccio ad uploadare le modifiche per renderle effettive?

  • giga

    Un bell’articolo su un plugin utilissimo. Grazie per la pubblicazione.
     

Seguici per leggere

Prima di vedere il contenuto che stai cercando seguici su Facebook per scoprire sempre grandi articoli riguardanti la tecnologia, la scienza, l'innovazione, la moda e le tendenze. Abbiamo una filosofia unica e giovane, e ci serve il tuo sostegno.

Se non hai Facebook seguici su Twitter!

Non ho Facebook ne Twitter o vi seguo già