Firebug Este un instrument esențial pentru cei care programează sau optimizează site-uri web, indiferent dacă sunt designeri sau webmasteri. Astfel, putem elimina eșecurile de programare sau de proiectare, să știm cum funcționează și cum este structura unei pagini web, cum sunt toate elementele care o compun.
Instalăm pluginul Firebug
Pentru a instala pluginul, mergem pe site-ul de descărcare firebug și acolo căutăm cea mai recentă versiune a instrumentului pentru descărcare.
Fila Consolă
Consolă Firebug Aici vor fi afișate mesajele despre ceea ce face webul și erorile care apar. Putem vedea mesaje despre apelurile către funcții sau pagini pe care le efectuează web pe măsură ce interacționăm, arătându-ne funcții, invocații de apel invers sau servicii web și valorile care sunt schimbate în timpul rulării în timp ce controlăm fluxul aplicației.
Să vedem câteva exemple, accesăm web motores.com.ar, facem clic dreapta și activăm Firebug.
De asemenea, putem vedea cum, atunci când adaugă un produs în coșul de cumpărături, acesta trimite următorii parametri: funcția, cantitatea produsului și codul produsului.
Funcția Ajax a invocat insertItem cant 1 Id 5850326Deși putem vedea că va fi adăugat numai dacă suntem conectați ca utilizatori, în caz contrar ne va solicita să ne înregistrăm.
Deci, putem vedea cum funcționează aplicația și ce parametru trimite sau primește și ce răspunsuri oferă și care a fost timpul de răspuns, de exemplu pentru a adăuga un produs care a durat 335 de milisecunde.
Fila HTML
vă permite să vedeți structura web și să editați codul paginii web în timp real. De exemplu, putem modifica codul HTML a site-ului web sau a codului CSS și vizualizați-l direct fără ca aceste modificări să fie permanente. De exemplu, dacă accesăm site-ul web Ebay, putem folosi Firebug pentru a schimba culoarea blocului de conținut principal sau web.
fundal: roșu niciunul repetă scroll 0 0;Când terminați de scris blocul central va deveni roșu, dacă actualizăm pagina, modificările se vor pierde și va reveni la designul original.
De asemenea, putem încerca să manipulăm codul html și codul css pentru a schimba sigla Ebay pentru cea Google, se face schimbând adresa URL a imaginii logo-ului Ebay pentru o altă adresă URL a unei imagini pe care o dorim.
Această funcționalitate nu funcționează pentru a schimba un design complet, ci pentru a face mici teste și a vizualiza modificările, fără a fi nevoie să accesați un editor.
Fila CSS
Fila panoului CSS Afișează toate clasele și identificatorii CSS pe care îi creăm sau pe care îl are web-ul pe care îl analizăm. Din acest panou ne putem modifica clasele și propozițiile CSS așa cum am făcut anterior în fila Stiluri a panoului HTML.
Fila Script
Acest panou este destinat depanării codului JavaScript sau jQuery. Ne arată tot ceea ce face un script, variabilele sale, funcțiile sale, depanarea prin puncte de întrerupere, execuția pas cu pas a unui script, un ecran pentru controlul stivei de variabile și putem vedea, de asemenea, comportamentul funcțiilor.
Fila DOM
Panoul SOARE sau Mod obiect documentEl este cel care primește informații despre toate proprietățile DOM și metodele lor. DOM face parte din elementele unui web și permite programatorilor să acceseze și să manipuleze paginile web XHTML.
JQuery oferă metode de manipulare eficientă a DOM. Putem accesa orice atribut al oricărui element sau pentru a extrage codul HTML dintr-un paragraf sau bloc. În plus, oferă metode precum .attr (), .HTML (), Da .val () Aceștia acționează ca recuperatori de informații și de recuperare a informațiilor din elementele DOM pentru o utilizare ulterioară.
Să vedem în acest exemplu jQuery și DOM cum să controlăm un div și să extragem un text:
Jquery și DOMExtrageți textul din bloc:
Acesta este un text de testare DOM
Etichetele HTML Elementul este accesat prin clasa css sau id și apoi proprietatea care poate fi text sau altele care permit jQuery și DOM.
Fila Rețea
Scopul panoului de rețea este de a monitoriza traficul web și încărcarea și consumul fiecărei cereri web HTTP, acest raport este alcătuit dintr-o listă de intrări, în care fiecare dintre acestea reprezintă o cerere / răspuns efectuată de către pagină.
Fereastra panoului de rețea prezintă o listă de solicitări, deoarece web-ul este încărcat și utilizat. Fiecare element din listă prezintă informații produse de cerere și o cronologie grafică arată octeții consumați, timpul necesar pentru a răspunde, care reprezintă fazele de încărcare în timp. Următoarea este o listă a informațiilor, care sunt afișate pentru fiecare cerere:
- Metoda de solicitare HTTP
- Cod de răspuns HTTP și descriere (200.301.404 etc.)
- Numele fișierului care este invocat
- Numele de domeniu de unde a fost răspunsul
- Dimensiunea răspunsului în octeți
- Timpul în milisecunde necesar pentru a răspunde.
