Come utilizzare Firebug

tramite: O2O
Difficoltà: media
17

Introduzione

Qualsiasi sviluppatore di pagine web desidera possedere uno strumento che gli consenta di analizzare il rendering di esse sul browser (andando a selezionare un loro singolo elemento), effettuare il debug per gli scripts in JavaScript ed esaminare la struttura DOM. Joe Hewitt, uno degli sviluppatori di "Mozilla Firefox", sviluppò un plugin chiamato "Firebug", che permette tutto ciò ed è attualmente presente anche in "Google Chrome" (come applicazione aggiuntiva): un facile Wizard guiderà lo sviluppatore nel suo download e nella propria installazione, che si concluderà soltanto al riavvio del browser impiegato. Nella seguente semplice e rapida guida che vi andrò ad enunciare immediatamente nei passaggi successivi, vi spiegherò molto brevemente, ma comunque dettagliatamente, come bisogna utilizzare "Firebug"!!!

27

Occorrente

  • Firebug
  • Mozilla Firefox o Google Chrome
37

Plugin Firebug

Dopo aver installato il plugin "Firebug", nel browser che state utilizzando, troverete la relativa icona rappresentata da un simpatico scarafaggio: selezionandolo e muovendo il mouse sulla pagina web che state visualizzando, potrete vedere che il cursore evidenzia l'elemento su cui è posizionato (se, ad esempio, il mouse si trova su un pulsante, il plugin evidenzierà l'elemento HTML relativo ad esso). Selezionando un elemento della pagina internet con il tasto destro della seguente periferica di input, tra le alternative possibili c'è la voce "Ispeziona l'elemento con Firebug".

47

Blocchi del file

Adesso, premendo sull'elemento della pagina web, si aprirà una finestra che mostrerà la porzione dell'HTML che state valutando (sulla parte destra dello schermo) e tutti i blocchi del file "CSS" che intervengono per definire lo stile dell'elemento ispezionato (sulla sinistra del monitor). Per fare delle modificazioni non persistenti (ma soltanto temporanee), sarà possibile intervenire sia sul codice HTML che su quello "CSS": questa funzionalità consente di vedere on fly come apparirebbe la pagina internet, eseguendo effettivamente quella modifica.

Continua la lettura
57

Script

Nella parte alta della finestra di "Firebug", c'è un menù con le altre funzionalità offerte dal plugin, ovvero: quella "Script", che permette di vedere il codice "Javascript" (e, conseguentemente, definire dei punti di debug) immerso nella pagina web e, dopo averla selezionata, sarà necessario ricaricare quest'ultima; quella "DOM", che vi consente di osservare la struttura della pagina internet esaminata. Quando viene eseguito il codice "JavaScript" prescelto, il caricamento della pagina web s'interrompe, per consentire all'utente di vedere cosa viene eseguito.

67

Guarda il video

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.