Firebug È uno strumento essenziale per chi programma o ottimizza siti web, siano essi designer o webmaster. Così possiamo eliminare gli errori di programmazione o di progettazione, sapere come funzionano e com'è la struttura di una pagina web, come tutti gli elementi che la compongono.
Installiamo il plugin Firebug
Per installare il plug-in andiamo sul sito Web di download di firebug e lì cerchiamo l'ultima versione dello strumento per il download.
Scheda Console
Console Firebug È dove verranno visualizzati i messaggi di ciò che fa il web e gli errori che si verificano. Possiamo vedere messaggi sulle chiamate a funzioni o pagine che il web fa mentre interagiamo, mostrandoci funzioni, invocazioni a callback o servizi web e i valori che vengono scambiati in fase di runtime mentre si controlla il flusso dell'applicazione.
Vediamo alcuni esempi, accediamo al web motores.com.ar, clicchiamo con il tasto destro e attiviamo Firebug.
Possiamo anche vedere come quando aggiungi un prodotto al carrello, invia i seguenti parametri: funzione, quantità del prodotto e ID del prodotto.
Funzione Ajax invocata insertItem cant 1 Id 5850326Anche se possiamo vedere che verrà aggiunto solo se abbiamo effettuato l'accesso come utenti, altrimenti richiederà la registrazione.
Quindi possiamo vedere come funziona l'applicazione e quale parametro invia o riceve e quali risposte fornisce e qual è stato il tempo di risposta, ad esempio per aggiungere un prodotto che ha richiesto 335 millisecondi.
Scheda HTML
ti permette di vedere la struttura del web e modificare il codice della pagina web in tempo reale. Possiamo ad esempio modificare il codice HTML del sito Web o del codice CSS e visualizzarlo direttamente senza che tali modifiche siano permanenti. Ad esempio, se accediamo al sito Ebay, possiamo utilizzare Firebug per cambiare il colore del blocco principale o del contenuto web.
sfondo: rosso nessuno ripeti scroll 0 0;Quando finisci di scrivere il blocco centrale diventerà rosso, se aggiorniamo la pagina le modifiche andranno perse e tornerà al suo design originale.
Possiamo anche provare a manipolare il codice html e il codice css per cambiare il logo Ebay per quello di Google, si fa cambiando l'url dell'immagine del logo Ebay per un altro url di un'immagine che vogliamo.
Questa funzionalità non funziona per modificare un progetto completo ma per eseguire piccoli test e visualizzare le modifiche, senza dover accedere a un editor.
Scheda CSS
La scheda del pannello CSS Mostra tutte le classi e gli identificatori CSS che creiamo o che ha il web che stiamo analizzando. Da questo pannello possiamo modificare le nostre classi e frasi CSS come abbiamo fatto in precedenza nella scheda Stili del pannello HTML.
Scheda Script
Questo pannello è per il debug del codice JavaScript o jQuery. Ci mostra tutto ciò che fa uno script, le sue variabili, le sue funzioni, il debug per breakpoint, l'esecuzione passo passo di uno script, una schermata per controllare lo stack delle variabili e possiamo anche vedere il comportamento delle funzioni.
Scheda DOM
Il pannello SOLE o Modalità oggetto documentoÈ quello che ottiene informazioni su tutte le varie proprietà DOM e sui loro metodi. Il DOM fa parte degli elementi di un web e consente ai programmatori di accedere e manipolare le pagine web XHTML.
JQuery fornisce metodi per manipolare il DOM in modo efficiente. Possiamo accedere a qualsiasi attributo di qualsiasi elemento o estrarre il codice HTML da un paragrafo o un blocco. Oltre a questo fornisce metodi come .attr(), .HTML(), sì .val() Agiscono come getter e recupero di informazioni dagli elementi DOM per un uso successivo.
Vediamo in questo esempio jQuery e DOM come controllare un div ed estrarre un testo:
Jquery e DOMEstrai il testo dal blocco:
Questo è un testo di prova DOM
I tag HTML Si accede all'elemento tramite la classe css o id e quindi la proprietà che può essere text o qualche altra che consenta jQuery e DOM.
Scheda Rete
Lo scopo del pannello Rete è monitorare il traffico web e il carico e consumo di ogni richiesta web HTTP, questo report è composto da un elenco di voci, dove ognuna di queste rappresenta una richiesta/risposta di andata e ritorno effettuata dalla pagina.
La finestra del pannello di rete presenta un elenco di richieste, man mano che il Web viene caricato e utilizzato. Ogni voce dell'elenco mostra le informazioni prodotte dalla richiesta e una timeline grafica mostra i byte consumati, il tempo impiegato per rispondere, che rappresenta le fasi di carico nel tempo. Di seguito è riportato un elenco delle informazioni, che vengono visualizzate per ogni richiesta:
- Metodo di richiesta HTTP
- Codice di risposta HTTP e descrizione (200,301,404, ecc.)
- Nome del file che viene invocato
- Nome di dominio da cui proviene la risposta
- Dimensione della risposta in byte
- Tempo in millisecondi necessario per rispondere.
