10 motive pentru care ar trebui să utilizați Firebug

Firebug este unul dintre cele mai populare instrumente folosite de dezvoltatorii web. În acest articol, vom examina mai îndeaproape cele zece dintre cele mai atractive caracteristici.

1. Consola

Primul lucru pe care îl veți observa când deschideți Firebug (fie din
bara de stare sau folosind combinația de taste ctrl + F12) va fi panoul Consola. După o privire rapidă, s-ar putea crede că este o versiune alternativă a Consolei de eroare
(Ctrl + Shift + J). Caracteristicile comune dintre cele două sunt:

• înregistrarea de erori, avertismente și notificări
• capacitatea de a rula codul Javascript

Dar Firebug extinde funcționalitatea Firefox, așa că se poate face
mult mai mult, cum ar fi:

• erori de logare pentru Javascript, CSS, XML, XMLHttpRequest (AJAX) și
  Chrome (interfețe Firefox)
• rulați codul Javascript pe pagina web curentă
• obiecte suplimentare Javascript sunt puse la dispoziție (consola)

Să vedem câteva exemple construite pe obiectul consolei. Imaginați-vă că rulați
după fișierul HTML.

Aceasta va genera următorul rezultat.

2. HTML

Cel de-al doilea panou și cel în care sunt sigur că vei cheltui mult
de timp, este împărțită între mai multe secțiuni pe care le vom examina mai jos.

1. Acest buton este echivalent cu "Inspectați elementul" într-o pagină web
   meniul contextual. În afară de a fi de ajutor cu rapid picking elemente în pagină,
   conturează, de asemenea, elementul selectat în prezent.
2. În această secțiune, avem ierarhia actuală
   elementul selectat și capacitatea de a efectua o serie de acțiuni (pe fiecare
   componentă individuală a ierarhiei), cum ar fi:
   • copierea HTML-ului interior
   • creând expresii XPath
   • atasarea observatorului evenimentului (și conectarea la panoul Consola)
   • element de ștergere
   • elementul de editare și nodurile copilului
   • mutarea elementului în fila DOM pentru verificare
3. Fereastra principală a panoului; util pentru traversarea prin
   Document HTML, modificare rapidă a codului și detectarea codului rupt (cum ar fi
   închiderea unui div prea devreme). Meniul contextual oferă același set de funcționalități
   cum ar fi secțiunea nr. 2
4. În această secțiune, stilul calculat al paginii sau al elementului curent este
   afișat. Abilitatea de a modifica în mod activ stilurile și de a inspecta CSS
   moștenire sunt caracteristicile sale cele mai valoroase.
5. Prin această secțiune se poate examina cu ușurință modelul cutiei
   un element: mărimea conținutului, umplutura, offseturile, marginile și marginea.

6. Secțiunea DOM la acces generează o listă cu toate, în prezent
   elemente selectate, metode și proprietăți.

3. CSS

Principala diferență dintre acest panou și secțiunea Stil sub HTML este
că aici poți lucra pe stiluri necompuse. Voi sublinia și numără secțiunile
(și caracteristici de această dată).

1. Dacă pagina pe care lucrăm conține mai multe stiluri de stil, atunci vom putea selecta foaia de stil dorită.
2. Regiunea principală unde este afișat codul CSS.
3. Modificați cu ușurință proprietățile CSS.
4. Reguli CSS ușor difuzate.

4. Script

Uneori, atunci când scrieți cod Javascript, trebuie să obțineți mâinile
murdar. De cele mai multe ori, veți găsi că lucrați cu
Panoul consolei; numai în condiții extreme vă va face să ajungeți la Script
panou. Având în vedere aceste condiții extreme (care trebuie să se întâmple), să analizăm acest panou și să ne familiarizăm cu el.

1. Butonul derulant din care putem selecta fișierul de script dorit.
2. Funcțiile de depanare: continua, a interveni, pas peste
   și iesi afara. Ei doar lovesc atunci când execuția codului ajunge la a
   breakpoint.
3. Fereastra principala. Aici setăm (și eliminăm) punctele de întrerupere, precum și inspectăm
   Cod Javascript.
4. Similar cu panoul DOM, secțiunea de vizionare imprimă metodele obiectului
   și parametrii pentru codul de depanare curent.
5. Afișează stivuirea funcțiilor în timp real.
6. Lista punctelor de întrerupere active. Este posibilă numai îndepărtarea punctelor de rupere
   de aici.

5. DOM

La fel ca HTML-> DOM. Având în vedere faptul că nimic nu diferă de ceea ce sa menționat mai devreme, vom trece la secțiunea următoare.

6. Net

Cunoașteți cât timp a fost încărcat pagina dvs.? Sau tu
doriți să aflați ce solicitare are cel mai mare timp pentru a finaliza? Din fericire, și acest lucru poate fi realizat prin panoul Net.

1. Solicitările pot fi filtrate în funcție de tipul lor.
2. Fiecare solicitare este afișată în această secțiune. La sfârșitul listei de solicitări
   vedem un rezumat al acestora: numărul de solicitări, dimensiunea, cât a fost stocat în memoria cache
   deja și timpul total pe care l-au luat pentru a finaliza.
3. Mai multe detalii pot fi dezvăluite, ca: anteturi HTTP, răspuns și cache (același
   ca răspuns)

Test de performanta

Trebuie să testați performanța unei anumite funcții sau a unei buclă? Utilizați caracteristica "Timer" a Firebug-ului.

 funcția TimeTracker () console.time ("MyTimer"); pentru (x = 5000; x> 0; x -)  console.timeEnd ("MyTimer"); 

Trei etape. Începem prin apelarea "console.time" și transmitem o cheie unică. Apoi, introducem codul nostru. În cele din urmă, sună console.timeEnd, și încă o dată, treci în cheia noastră unică.

7. Referință

Acesta este un panou suplimentar furnizat de CodeBurner, un Firebug
add-on. După cum indică numele său, prin acest panou veți avea acces rapid la codul dvs. HTML
și codul CSS. Chiar dacă panoul este auto-explicativ, ne vom uita în continuare
aceasta.

1. Secțiunea de căutare și filtrare.
2. Rezultatele stivuite aici, în cazul nostru, există doar un singur rezultat.
3. Panoul de compatibilitate pentru cele mai recente versiuni de browser majore. Da, Chrome este
   nu în această listă, dar Chrome folosește același motor ca și Safari, și anume Webkit, deci dacă
   este compatibil Safari și va funcționa și în Chrome.
4. Și dacă informațiile afișate în acest panou nu sunt suficiente, puteți găsi mai multe informații accesând acest link, cum ar fi: exemple, compatibilitate în mai multe browsere
   versiuni, descriere, etc.

8. PixelPerfect

Dacă ați făcut vreodată felierea PSD, știți cât timp consumați măsurarea
de spațiere între elementele de compoziție poate fi. Aici PixelPerfect dovedește că este
putere. Având acest add-on în caseta de instrumente vă va ajuta să efectuați felie perfectă.

1. Cu acest buton putem adăuga mai multe imagini suprapuse pentru pagina curentă.
2. Lista de suprapuneri, de aici aplicăm sau ștergem suprapunerea.
3. Setările pentru suprapunere.

9. YSlow

Un alt add-on Firebug dezvoltat de Yahoo !, care poate sugera îmbunătățiri ale vitezei
pe baza unei serii de teste efectuate.

Prin YSlow, putem nota performanța generală a site-ului nostru. Putem cu ușurință
probleme la fața locului care pot fi îmbunătățite și sunt disponibile o serie de recomandări
de asemenea.

Pe lângă statisticile mapate pe placă, avem și JSLint și Smush.it la dispoziția noastră.

10. FirePHP

Ultima noastră componentă Firebug, dar nu mai puțin importantă, este FirePHP. Cu asta
add-on, putem trimite în mod transparent informații (avertismente, erori, înregistrări, informații)
la panoul Consola din codul PHP. Exemplu de utilizare de pe site-ul FirePHP:

Închidere

Sper că această listă mică de panouri Firebug / add-on vă va face viața ca pe o
persoana web mai ușor - așa cum mi-a făcut-o. În final, cu toții știm asta
bug-uri sunt obligate să se întâmple, așa că nu există nici o scuză pentru a nu fi pregătit.

Urmați aceste linkuri pentru a descărca programele de completare:

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