FireBug

Se mi facessero la fatidica domanda “quale strumento salveresti dalla distruzione nucleare?” io senza dubbi o esitazioni risponderei urlando: “FIREBUG!!!!!!!!!!!!!!!”

Da quando faccio uso di questo magnifico esempio della potenza delle  estensioni per FireFox i tempi di debugging, modifica, ottimizzazione del codice sono drammaticamente calati. Oserei dire crollati…

L’incipit di questo post dice non a caso “oscuro oggetto del desiderio”, in quanto (nella mia esperienza) è inspiegabilmente alto il numero di persone che tutti i giorni si rotolano -- per passione e per lavoro -- nelle pagine web, senza  tuttavia conoscere questo strumento.

Per noi accatiemmellari (mi si passi il termine) le pagine web si fanno ogni giorno più intricate: individuare con prontezza e precisione la classica triade “chi fa cosa dove” è ormai questione di sopravvivenza. E FireBug è un po’ come il Settimo Cavalleggeri.

Una volta installata l’estensione e riavviato il browser, troverete nella apposita barra in basso l’inquietante icona di un bacarozzo . È lui. Ovviamente sarà presente anche in una più istituzionale posizione nel menu “Strumenti”.

Lasciamo la presentazione generale a questo lungo e utile video di Rob Campbell (canadese, uno degli esponenti di spicco del progetto di casa Mozilla, che si autodefinisce “piroentomologo“, con ovvi riferimenti alla sua creatura), tenutosi al Google Tech Talk del maggio scorso:

www.youtube.com/watch?v=7p24bC8ZR3U

e concentriamoci sulle succose funzionalità più avanzate.

Live editing dei CSS

Trovare gli stili associati, la cascata delle regole CSS e delle specificità delle definizioni è solo il primo passo. Se volete, potete anche iniziare subito a fare live testing sull’output, senza toccare i vostri sorgenti: vi basterà editare direttamente quanto presente nella finestra degli stili, ed anche il vostro browser mostrerà all’istante le modifiche. Ovviamente, ricaricando la pagina ve le perdete.

Se non vi basta, possiede un’eccellente funzione di autocompletamento di tag, attributi e valori, unita ad un controllo formale per cui se scrivete qualcosa di storto non ve lo accetta, o se eliminate il valore di un attributo, anche quest’ultimo scomparirà dal codice stesso.

Gli elementi CSS coinvolti vengono dinamicamente variati in funzione della porzione di markup individuato, ed ordinati secondo il doppio criterio cascata/specificità, avendo cura di marcare le sovrascritture con testo barrato. Ancora, di ogni regola vengono date le posizioni (foglio di stile esterno e relativa riga, riga dell’header della pagina se si tratta di stili incorporati, indicazione esplicita se abbiamo invece a che fare con stili inline).

FireBug - Screenshot su ereditarietà e sovrascrittura regole CSS

Potete variare, inserire, interpolare intere stringhe di codice, classi, pezzi di markup. Se non avete a che fare con CSS sottoposti a un qualche tipo di parsing ma statici, potreste addirittura concedervi il lusso di fare tutte le vostre modifiche live, per poi acchiapparvi l’intero foglio di stile modificato e sovrascriverlo all’originale. Goduria…

Un esempio che casca a fagiolo, già che in questo sito si parla anche di WordPress, è nel video seguente di Ricky Lounge, «Come modificare i temi di WordPress con Firebug»:

www.youtube.com/watch?v=DcD4eGm4Oiw

Proxy serving

Conoscete Fiddler? Quel simpatico tool che, facendosi gli affaracci del vostro browser ed infilandosi nel mezzo funge da proxy e vi da un sacco di utili informazioni su tutto ciò che richiedete e vi viene risposto dal server? Ecco: FireBug lo fa. Vi dà qualche dettaglio in meno, ma a meno che non siate Abby Sciuto dell’NCIS o Marshall Flinkman di Alias difficilmente vi serviranno.

FireBug - Screenshot sull'uso del pannello Net

Extensions

http://getfirebug.com/downloads#extensions

http://getfirebug.com/firebuglite

]]> http://www.stefanocastelli.info/2010/firebug/feed/ 0