Tempo di Lettura: 3 minuti
Firebug, è una estensione per Firefox che facilita la vita a chi deve costruire siti e applicazioni web. Tra le centinaia di funzionalità di cui si dispone installando Firebug, come la possibilità di analizzare ed editare il codice HTML, CSS e Javascript, la visualizzazione di tutte le dipendenze, utili strumenti di debug e di esplorazione del DOM e il monitoraggio dettagliato del caricamento delle pagine e degli elementi che le compongono, ve ne è una che, tra tutte, le supera di gran lunga: è la funzione di “Inspect element”.
Questa opzione, che appare nel menu contestuale quando si attiva firebug in corrispondenza dell’elemento identificato dal mouse (oppure cliccando sul pulsante Inspect e poi selezionando con un click del mouse l’elemento che interessa), permette di modificare e testare “a caldo” qualunque pagina HTML, foglio di stile CSS o funzione Javascript di un qualsiasi sito web senza provocare alcun impatto sulla navigazione per i vostri visitatori.
Così facendo nella parte inferiore della finestra sarà possibile visualizzare il codice html e gli stili associati all’elemento selezionato: per esempio, nella sezione css vengono visualizzate le proprietà dell’oggetto, dichiarate direttamente oppure ereditate (le dichiarazioni che trovate barrate sono quelle sovrascritte da dichiarazioni successive). E’ possibile, quindi, modificare il css e l’html e le funzioni javascript agendo direttamente sulla finestra di Inspect e verificare immediatamente gli effetti della variazione; per ritornare alla pagina originale basta fare un semplice refresh da Firefox.
Addirittura è anche possibile, nella finestra relativa ai css, visualizzare un’anteprima dei colori usati semplicemente posizionando il puntatore sopra al valore esadecimale.
Il bello della funzione di INSPECT di Firebug è che è possibile testare velocemente le modifiche al proprio sito online lavorando localmente su Firefox e in tempo reale. Inoltre, è possibile analizzare molto velocemente la struttura di un altro sito di cui magari se ne vuole carpire qualche trucchetto html o css.
Un esempio pratico delle potenzialità dell’INSPECT di Firebug lo trovate nel Video Tutorial su come modificare il proprio tema WordPress in 5 minuti con FireBug di Daniele Salamina
Altri Toolkit simili è possibile trovarli installando a Web Developer Toolbar oppure Venkman, anche se, a mio parere, non sono così completi performanti come Firebug.
Per chi, invece, non usa Firefox, è possibile testare la console di Firebug con Firebug Lite. Si tratta di uno script da inserire nelle pagine che vogliamo testare e che attiva la visualizzazione della console nella parte inferiore della pagina stessa usando il tasto F12 o la combinazione CTRL+SHIFT+L.
Qui, invece, trovate la traduzione dell’articolo Hacking Web 2.0 Applications with Firefox di Shreeraj Shah pubblicato originariamente su SecurityFocus che insegna come fare hacking di applicazioni Web 2.0 con Firefox e Firebug.
Se poi, l’idea di trasformare Firefox in una hacking platform vi alletta molto, allora non dovete fare altro che seguire l’articolo Turning Firefox to an Ethical Hacking Platform pubblicato da Security Database in cui vengono elencate numerose estensioni per Firefox da installare per avere a disposizione tutto il necessario per l’hacking di applicazioni web.
Queste le categorie: Whois and geo-location, Enumeration / fingerprinting, Social engineering, Googling and spidering, Editors, Headers manipulation, Cookies manipulation, Security auditing, Proxy/web utilities, Hacks for fun, Encryption, Malware scanner, Anti Spoof.
Interessante l’articolo… anche il video non è male 😉
Hmmm grazie per il tuo commento imparziale e oggettivo sul video 😛
Ti faccio io, invece, i complimenti per il tuo video chiaro ed esplicativo!
Ciao
Addirittura i complimenti 😉 E’ solo qualche cavolatina che può fare chiunque…
Ho un’altro paio di screencast in cantiere… vediamo se arriverà il momento di pubblicarli!
Uso firebug da qualche mese è indubbiamente lo strumento che velocizzato ed anche migliorato il mio lavoro.
Bel video!
@DesMM: concordo pienamente con te!