10 motivi per cui dovresti usare Firebug

Firebug è uno degli strumenti più utilizzati dagli sviluppatori web. In questo articolo, daremo un'occhiata più da vicino a dieci delle sue caratteristiche più interessanti.

1. Console

La prima cosa che noterai quando aprirai Firebug (o dal
barra di stato o utilizzando la combinazione di tasti ctrl + F12) sarà il pannello della console. Dopo un rapido sguardo, si potrebbe pensare che si tratti di una versione alternativa di Error Console
(Ctrl + Shift + J). Le caratteristiche comuni tra i due sono:

• registrazione di errori, avvisi e notifiche
• possibilità di eseguire il codice Javascript

Ma Firebug estende la funzionalità di Firefox, quindi può farlo
molto di più, come ad esempio:

• errori di registrazione per Javascript, CSS, XML, XMLHttpRequest (AJAX) e
  Chrome (interni di Firefox)
• eseguire il codice Javascript sulla pagina Web corrente
• oggetto Javascript aggiuntivo è messo a disposizione (console)

Esaminiamo alcuni esempi creati sull'oggetto console. Immagina di eseguire il
seguente file HTML.

Questo genererà il seguente risultato.

2. HTML

Il secondo pannello, e quello in cui sono sicuro che spenderai molto
di tempo, è diviso tra diverse sezioni che esamineremo di seguito.

1. Questo pulsante è equivalente a "Ispeziona elemento" in una pagina web
   menù contestuale. Oltre ad essere d'aiuto nel selezionare rapidamente elementi nella pagina,
   inoltre delinea l'elemento attualmente selezionato.
2. In questa sezione, abbiamo la gerarchia del corrente
   elemento selezionato e la possibilità di eseguire una serie di azioni (su ogni
   componente individuale della gerarchia), come:
   • copia HTML interno
   • creare espressioni XPath
   • allegare un osservatore di eventi (e accedere al pannello della console)
   • eliminazione elemento
   • modifica di elementi e nodi figlio
   • spostare l'elemento nella scheda DOM per l'ispezione
3. La finestra principale del pannello; utile per attraversare il
   Documento HTML, modifica rapida del codice e individuazione del codice danneggiato (come
   chiudere un div troppo presto). Il menu contestuale offre lo stesso set di funzionalità
   come la sezione n. 2
4. In questa sezione lo stile calcolato della pagina o dell'elemento corrente sono
   visualizzato. La possibilità di modificare attivamente gli stili e ispezionare i CSS
   l'ereditarietà sono le sue caratteristiche più preziose.
5. Attraverso questa sezione si può facilmente esaminare il modello di scatola di
   un elemento: dimensione del contenuto, spaziatura, offset, margini e bordi.

6. La sezione DOM all'accesso genera una lista con tutti, al momento
   elementi, metodi e proprietà selezionati.

3. CSS

La principale differenza tra questo pannello e la sezione Stile in HTML è
che qui puoi lavorare su stili non caricati. Traccerò e numererò le sezioni
(e presenta questa volta).

1. Se la pagina su cui stiamo lavorando contiene più fogli di stile, saremo in grado di selezionare il foglio di stile desiderato.
2. La regione principale in cui viene visualizzato il codice CSS.
3. Modificare facilmente le proprietà CSS.
4. Dissolvi facilmente le regole CSS.

4. Script

A volte, quando scrivi il codice Javascript, devi ottenere le tue mani
sporco. La maggior parte delle volte ti troverai a lavorare con
Pannello della console; solo in condizioni estreme questo ti farà saltare allo Script
pannello. Date queste condizioni estreme (che sono destinate ad accadere), rivediamo questo pannello e iniziamo a familiarizzare con esso.

1. Pulsante a discesa da cui è possibile selezionare il file di script desiderato.
2. Funzioni di debug: Continua, entrare, scavalcare
   e uscire. Si attivano solo quando l'esecuzione del codice raggiunge a
   punto di rottura.
3. Finestra principale. Qui impostiamo (e rimuoviamo) i breakpoint, oltre che ispezioniamo
   Codice Javascript.
4. Simile al pannello DOM, la sezione Orologio stampa i metodi degli oggetti
   e parametri per il codice di debug corrente.
5. Mostra la pila di funzioni in tempo reale.
6. Elenco dei punti di interruzione attualmente attivi. È possibile eseguire solo la rimozione del punto di interruzione
   da qui.

5. DOM

Lo stesso di HTML-> DOM. Dato che nulla è diverso da ciò che è stato menzionato prima, salteremo alla prossima sezione.

6. Net

Sei curioso di sapere quanto tempo impiega la tua pagina a caricare? O tu
vuoi sapere quale richiesta richiede più tempo per completare? Fortunatamente, anche questo può essere ottenuto tramite il pannello Rete.

1. Le richieste possono essere filtrate in base al loro tipo.
2. Ogni richiesta è mostrata in questa sezione. Alla fine della lista delle richieste
   ne vediamo un riepilogo: numero di richieste, dimensioni, quanto è stato memorizzato nella cache
   già e tempo totale hanno preso per completare.
3. Maggiori dettagli possono essere rivelati, come: intestazioni HTTP, risposta e cache (stessa
   come risposta)

Test delle prestazioni

Hai bisogno di testare le prestazioni di una specifica funzione o loop? Usa la funzione "timer" di Firebug.

 function TimeTracker () console.time ("MyTimer"); per (x = 5000; x> 0; x -)  console.timeEnd ("MyTimer"); 

Tre passi. Iniziamo chiamando "console.time" e passiamo in una chiave univoca. Successivamente, inseriamo il nostro codice. Infine, chiamiamo console.timeEnd e, ancora una volta, passiamo nella nostra chiave univoca.

7. Riferimento

Questo è un pannello aggiuntivo fornito da CodeBurner, un Firebug
Aggiungi su. Come dice il nome, attraverso questo pannello avrai un rapido accesso al tuo codice HTML
e il codice CSS. Anche se il pannello è auto-esplicativo, continueremo a guardare oltre
esso.

1. La sezione di ricerca e filtraggio.
2. Qui i risultati si accumulano, nel nostro caso c'è solo un risultato.
3. Pannello di compatibilità per le ultime versioni principali del browser. Sì, Chrome è
   non in questo elenco, ma Chrome utilizza lo stesso motore di Safari, vale a dire Webkit, quindi se
   è compatibile con Safari funzionerà anche in Chrome.
4. E se le informazioni visualizzate in questo pannello non sono sufficienti, puoi trovare maggiori informazioni accedendo a questo link, come: esempi, compatibilità in più browser
   versioni, descrizione, ecc.

8. PixelPerfect

Se hai mai fatto il taglio PSD, sai quanto tempo richiede la misurazione
di spaziatura tra elementi di composizione può essere. Ecco dove PixelPerfect lo dimostra
energia. Avere questo componente aggiuntivo nella tua casella degli strumenti ti aiuterà a eseguire la fetta perfetta.

1. Con questo pulsante possiamo aggiungere più immagini di sovrapposizione per la pagina corrente.
2. Elenco delle sovrapposizioni, da qui applichiamo o eliminiamo l'overlay.
3. Sezione delle impostazioni di sovrapposizione.

9. YSlow

Un altro componente aggiuntivo Firebug sviluppato da Yahoo !, che può suggerire miglioramenti della velocità
basato su una serie di test eseguiti.

Attraverso YSlow, possiamo valutare le prestazioni generali del nostro sito web. Possiamo facilmente
problemi specifici che possono essere migliorati e sono disponibili una serie di raccomandazioni
anche.

Oltre alle statistiche relative ai grafici a torta, abbiamo a nostra disposizione anche JSLint e Smush.it.

10. FirePHP

Il nostro ultimo, ma non meno importante, componente Firebug è FirePHP. Con questo
add-on, possiamo inviare informazioni in modo trasparente (avvisi, errori, registrazione, informazioni)
al pannello della console dal nostro codice PHP. Esempio di utilizzo dal sito Web di FirePHP:

Chiusura

Spero che questa piccola lista di pannelli / componenti aggiuntivi di Firebug renderà la tua vita un vero successo
la persona del web è più facile - come ha fatto per me. Alla fine, lo sappiamo tutti
i bug sono destinati a succedere, quindi non ci sono scuse per non essere preparati.

Segui questi link per scaricare i componenti aggiuntivi:

• Firebug,
• CodeBurner,
• PixelPerfect,
• YSlow
• FirePHP