lug
Estensioni: Sei uno sviluppatore web? Firebug ti da una grande mano
Non vi ho ancora parlato di Firebug, un plugin per Mozilla Firefox che uso già da tempo, recentemente uscito anche per l’ultima versione di firefox (3.0), questo addon vi sarà di molto aiuto, in poche parole, grazie a esso avremo a disposizione una serie di strumenti utili per i nostri lavori di web design e sviluppo web.
Ecco come è caretterizzato questo plugin ricco di potenzialità:
Una volta installato il plugin, quest andrà a creare una voce Firebug all’interno del menu Strumenti di Firefox. Per aprirlo basterà selezionare Open Firebug e questo aprirà una finestra nella parte bassa dello schermo.
Visualizzazione html e css
La finestra del programma è divisa in due parti. La prima mostra il codice html della pagina web con un accurata evidenziazione della sintassi dei tag e attributi e un’ indentazione ben fatta che può tornarci utile. Lavorando sulle icone con i segni + e – a fianco di ciascun tag di apertura è possibile espandere o collassare il blocco relativo. In questo modo è facile mettere in evidenza soltanto la parte di codice su cui si vuole lavorare.
Quindi è molto facile orientarsi nel codice e cio sottolinea il fatto che Firebug è molto valido e intuitivo.Ma non è finita qui, infatti ci sono molte altre funzionalità del plugin accessibili mediante click destro del mouse. Queste le più importanti:
- New Attribute. Aggiunge un attributo al tag html su cui è posizionato il puntatore del mouse.
- Edit. Apre una finestra di editing dove è possibile modificare il tag html corrente, i suoi attributi e il contenuto, ad esempio il testo racchiuso in un tag div o paragrafo.
- Delete Element. Rimuove il tag corrente dal documento.
L’effetto di tutte le modifiche apportate mediante queste funzioni si riflette in tempo reale sull’aspetto della pagina web visualizzata dal nostro browser.
Visualizzazione dei fogli di stile CSS
La seconda parte della finestra (ottimamaente sicronizzata con la prima: le sue modifiche coinvolgono anche la prima e viceversa) del plugin è dedicata ai fogli di stile CSS associati alla pagina web visualizzata,
Da notare che tutte le proprietà impostate in un selettore applicabile al tag html selezionato sono visualizzate in cascata.
Firebug è un ottimo prodotto: gratuito e da qualche anno in costante evoluzione, sicuramente da aggiungere al nostro brower se siamo sviluppatori web, ma anche se vogliamo solo curiosare (o studiare) il codice dei nostri siti preferiti.
Ha detto:
Fantastico, non sapevo fosse già uscito quello per firefox 3…è veramente indispensabile e senza soffrivo un sacco
Ha detto:
Anchio non vedevo l’ora che uscisse…
P.s: davvero interessante il tuo blog, ogni tanto gli dò un occhiata..
Continua a seguire TheNorbaBlog!
Ha detto:
Cavolo pensa che io è da un anno o poco meno che lo uso, l’ho trovato per caso smanettando tra le estensioni di Firefox…beh da quando l’ho provato non l’ho più mollato e tutti gli amici a cui l’ho fatto provare non riescono più a starne senza, anche nel mio lavoro è molto utile senza penso che ci metterei il doppio del tempo a sistema i layout dei siti che sviluppo!
Ha detto:
Hai ragione..
A me la consigliato Napolux e da quando lo ho installato anchio come te non ne posso più fare a meno!
Ha detto:
ciao ti vorri chiedere un aiuto sull utilizzo di questo fantastico plugin …
la parte sinistra fa riferimento all codice html della pagina giusto??
io voglio cambiare uno di quegli attributi ma non riesco a capire quella sezione a che file fa riferimento
per esempio la parte di destra fa rifermimento allo style.css e quella di sinistra??????????
grazie tornero presto a vedere se mi hai dato una risposta..
Ha detto:
Ciao, per capire a quale linea di codice fa riferimento un determinato attributo del layout del tuo sito: ti basta evidenziare l’attributo con la semplice selezione del mouse, e nella parte sinistra (HTML) di Firebug verrà automaticamente evidenziata la linea di condice a cui fa riferimento, alla quale potrai apportare le modifiche che desideri.
Spero di essere stato chiaro.
Ciao!