Otkrijte probleme s web-lokacijama pomoću alata za razvojne programere Chrome ili Firebuga

Ako ste pratili moj jQuery Izrada Web Interactive: Uvod u jQuery Izrada Web Interactive: Uvod u jQuery jQuery je biblioteka skripta na strani klijenta koju koristi gotovo svaka moderna web stranica - to čini web stranice interaktivnim. To nije jedina Javascript knjižnica, već je najrazvijenija, najviše podržana i najčešće korištena ... tutorijali jQuery Tutorial - Prvi koraci: Osnove i selektori jQuery Tutorial - Prvi koraci: Osnove i Selektori Prošli tjedan sam razgovarao o tome koliko je važan jQuery je svakom modernom web programeru i zašto je to sjajno. Ovaj tjedan, mislim da je vrijeme da se umažemo rukama s nekim kodom i naučimo kako… do sada ste možda već naišli na neke probleme s kodom i ne znate kako ih riješiti. Kad se suočite s nefunkcionalnim bitnim kodom, vrlo je teško zapravo točno odrediti prijelaznu liniju koda - i tu dolaze alati za uklanjanje pogrešaka i programeri.

Prije nego što nastavim s nekim složenijim jQuery kodom, mislio sam da ćemo ispitati alate dostupne u najpopularnijem svjetskom pregledniku - Chromeu. Ovi alati nisu samo za Javascript - već vam mogu pomoći i u uklanjanju pogrešaka za sve AJAX zahtjeve, resurse koje vaše web mjesto treba učitati, ispitati DOM strukturu i čitav niz drugih stvari.

Nema ljubavi za Firefox?

Iako ću se danas posebno pozivati ​​na alate za razvojne programere Chrome i zbog osobnih postavki i činjenice da su ugrađeni u preglednik, ista je funkcija dostupna u dodatku za Firefox pod nazivom Firebug Kako instalirati Firebug na IE, Safari, Chrome i Opera Kako instalirati Firebug na IE, Safari, Chrome i Opera - sučelje je gotovo identično, tako da ovaj vodič i dalje treba primjenjivati.

Pokretanje Alata za uklanjanje pogrešaka

Ovo ne može biti lakše. U Chromeu jednostavno pritisnite Ctrl-Shift-ja (CMD-ALT-I na Macu) ili desnim klikom bilo gdje i odaberite Pogledajte element. Trebali biste vidjeti nešto slično sljedećem:

Neznatna je razlika između ove dvije metode pokretanja konzole za uklanjanje pogrešaka. Tipka prečaca jednostavno će je otvoriti u zadanom prikazu, dok će Inspect Element usmjeriti stablo DOM na određeni element na koji ste desno kliknuli. Što nas dovodi do prvih nevjerojatnih funkcionalnosti koje dobivamo od ovih alata.

Elementi i CSS

Elementi kartica je podijeljena u dva odjeljka; s lijeve strane je cijelo stablo DOM-a. To je slično izvornom kodu stranice, ali je izrazito korisnije.

Za početak, bilo je raščlaniti u strukturu stabla, tako da se elementi mogu srušiti i proširiti, omogućujući vam da pregledate dječje elemente, roditelje i braću i sestre bliže nego samo čitanje izvornog koda. Drugo, odražava dinamičke promjene na stranici koje su rezultat Javascripta. Na primjer, ako je vaš jQuery trebao dodati klasu određenim elementima na pageLoad, to bi se vidjelo u stablu DOM-a, ali ne i na izvoru stranice.

Tamo također možete urediti DOM jednostavnim dvoklikom miša na nju. Da, to možete koristiti za igranje i uređivanje web stranica kako biste napravili glupe snimke zaslona, ​​tako da je sjajno za jednostavno eksperimentiranje.

Evo me zabrljati s početnom stranicom vijesti o BBC-u ...

Na desnoj strani možete vidjeti sva CSS pravila primijenjena na trenutni element, uključujući i ona koja su poništena pravilima višeg reda (u njima se nalazi linija):

Možete ih prilagoditi ili samo poništiti odabir određenog pravila da biste vidjeli što će se dogoditi.

Odmotavanje odjeljka “izračunati stilovi” prikazat će vam sažetak svakog CSS pravila koje se trenutno primjenjuje. Broj retka i veza datoteke krajnje desne strane preusmjerit će vas ravno na datoteku resursa s koje je učitana, mada u nekim slučajevima može biti umanjena datoteka (tako da je sve u jednom retku).

Imajte to na umu niti jedna promjena koju ovdje unesete neće biti spremljena, pa će se sljedeći put kad osvježite stranicu vratiti u normalu. Ako igrate sa CSS-om, obavezno zabilježite što ste točno promijenili kada postignete željeni rezultat.

Konzola pogreške

Druga najvažnija kartica, što se tiče svakodnevnog korištenja ovih fantastičnih alata, jeste konzola za pogreške i uklanjanje pogrešaka, zadnja kartica na popisu. Za početak će se ovdje prikazati sve pogreške JavaScripta. Kad prvi put započinjete s jQueryjem, možete pronaći nekoliko primjeraka “$ nije definirano” ili “jQuery nije definiran” - uobičajena greška koja znači da ste zaboravili na vezu do jQuery u zaglavlju. Ako uočite pogrešku koju ne možete dešifrirati, samo je kopirajte u Googleovo polje za pretraživanje i vjerojatno ćete naći puno drugih ljudi koji imaju isti problem.

Pogreška će također ukazati na točan redak koda u kojem se pogreška prvi put dogodila; kliknite na to da biste skočili pravo na taj redak i odjeljak koda. Ako se to nalazi u nekoj od vlastitih skripti, često vas može odrediti prema počinitelju - ako je pogreška ipak nejasnija, može ukazivati ​​na izvorni kôd jQuery koji je potpuno nečitljiv..

Dovoljno je reći da je konzola prvo što biste trebali provjeriti kada nešto ne radi kako treba, jer je tamo više nego vjerojatno otisnuta pogreška.

Druga namjena konzole je za ispis vlastitih prilagođenih izjava za uklanjanje pogrešaka. Možete poslati malo teksta, na primjer, da ste obavijestili da je skripta dosegla određenu točku:

console.log ("stigao do ovog bitnog koda u redu, sad pokušavam ...");

Ili možete iznijeti čitave predmete i varijable jednostavne kao:

console.log (myVar);

Pokušajte sada pomoću osnovnih jQueryja odabrati neke elemente, a zatim ih ispišite kako biste vidjeli kako izgledaju. Možete ga koristiti za provjeru, na primjer, vaših odabirača.

Mreža

Konačni alat u alatu za programere koji sam vam danas želio pokazati je Mreža kartica. Da bi ova kartica funkcionirala, morate se usredotočiti na nju i osvježiti stranicu - tada će zabilježiti sve zahtjeve koje stranica čini, za oglašavanje, Javascript, CSS, slike - sve - i pružiti vam raščlambu podataka o toj interakciji, uključujući:

• naziv datoteke.
• vrsta zahtjeva (GET ili POST).
• kôd odgovora koji je poslužitelj poslao natrag (200 U redu, 304 Nije izmijenjeno itd.).
• veličina datoteke.
• vrijeme.

Ako kliknete na pojedinačnu datoteku, dobit ćete još detaljnije informacije o interakciji između preglednika i poslužitelja. Za mene je ovo posebno korisno kod uklanjanja pogrešaka AJAX zahtjeva - možete točno vidjeti kakve su podatke poslani sa zahtjevom i puni izlaz odgovora koji daje skripta na strani poslužitelja koja prima..

Sažetak

Nadam se da sam naoružao razvojne programere nekim dodatnim alatima. Ako smatrate da je ovaj post koristan, zaista bih cijenio dio, jer me iznutra čini toplim i nejasnim i govori mi da želite da pišem više poput njega. Također pozdravljam komentare i povratne informacije - posebno, koje druge alate koristite kao web programer? Imate li na raspolaganju arsenal Firefox dodataka?