Moderno otklanjanje pogrešaka u JavaScriptu. Druga pogreška: problem s definicijom jezika. Uvjetne prijelomne točke

Zdravo! Nastavljajući temu, razgovarajmo o otklanjanju pogrešaka skripti pomoću preglednika. Za primjer, uzmimo najviše najbolji preglednik na Zemlji - Krom.

U načelu, takvi su alati dostupni u bilo kojem pregledniku, a ako uzmete u obzir da većina preglednika radi na istom motoru kao i Chrome, tada u načelu neće biti velike razlike. Firefox je također vrlo dobar sa svojim alatom Firebug.

Opći pogled na ploču Izvori

Pokrenite preglednik Chrome.

Pritisnite F12 i pokrenut će se Alati za razvojne programere.

Idite na karticu Izvor

Ovdje postoje 3 zone:

Regija izvorne datoteke. Sadrži sve datoteke projekta
Područje teksta. Ovo područje sadrži tekst datoteke
Područje informacija i kontrole. O njoj ćemo kasnije

U pravilu, prilikom otklanjanja pogrešaka, područje izvornih datoteka nije potrebno, tako da ga možete sakriti gumbom.

Opći kontrolni gumbi

3 najčešće korištena kontrolna gumba:

Format Ovaj gumb omogućuje formatiranje koda. Možda će vam zatrebati ako želite formatirati tuđi kod. Konzola Vrlo važan gumb klikom na koji se otvara konzola. U konzoli možete unijeti razne naredbe i operatore u JavaScriptu. Prozor U slučaju velikog dijela koda, omogućuje vam otvaranje koda u zasebnom prozoru.

Prijelomne točke

Pogledajmo datoteku pow.js kao primjer. Ako kliknete na bilo koji redak ove datoteke, na tom retku će se postaviti prijelomna točka.

Trebalo bi izgledati otprilike ovako:

Prijelomna točka se također naziva prijelomna točka; ovo je više žargon koji se asimilirao u naš jezik i doslovno također znači prijelomna točka.

U kodu u kojem ste napravili prijelomnu točku, možete pogledati vrijednosti varijabli u svakom koraku, općenito, pratiti na sve moguće načine.

Informacije o prijelomnoj točki pojavljuju se na kartici Prijelomne točke.

Kartica Prijelomne točke vrlo je korisna kada je kod vrlo velik, omogućuje vam da:

Brzo idite do mjesta u kodu gdje je postavljena prijelomna točka jednostavnim klikom poslati poruku.
Privremeno onemogućite prijelomnu točku klikom na potvrdni okvir.
Brzo uklonite prijelomnu točku desnim klikom na tekst i odabirom Ukloni.

Neke dodatne značajke

Prijelomna točka također se može pokrenuti izravno iz skripte pomoću naredbe debuggera: function pow(x, n) ( ... debugger; //<-- отладчик остановится тут... }

Desni klik na broj retka u pow.js omogućit će vam stvaranje takozvane uvjetne prijelomne točke, tj. postavite uvjet pod kojim će se prekidna točka pokrenuti.

Stani i pogledaj okolo

Budući da se naša funkcija izvodi istovremeno s učitavanjem stranice, najlakši način da aktivirate program za ispravljanje pogrešaka JavaScripta je da ga ponovno učitate. Da biste to učinili, pritisnite F5. I u isto vrijeme, izvršenje skripte će biti zaustavljeno na 6. retku.

Obratite pozornost na kartice s informacijama:

Gledajte izraze– ovdje možete vidjeti trenutnu vrijednost varijabli koje pratite u skripti.
Stog poziva– prikazuje hrpu poziva - to su svi pozivi koji su doveli do ove linije koda.
Varijable opsega– prikazuje varijable. Štoviše, prikazuje i globalne i lokalne varijable.

Upravljanje izvršenjem

Sada pokrenimo skriptu i pratimo njen rad. Obratite pozornost na ploču na vrhu ima 6 gumba, čiji ćemo rad razmotriti.

– nastavak izvršenja ili možete pritisnuti tipku F8. Ovaj gumb nastavlja izvršavanje skripte. Na taj način možemo koračati kroz našu skriptu kao da se izvodi u pregledniku. – napravite korak bez odlaska u funkcije ili tipku F10.

Izvršite jedan korak skripte bez ulaska u funkciju.

– napravite korak unutar funkcije, tipka F11. Izvršava jedan korak skripte i istovremeno ulazi u funkciju. – izvršavanje do izlaska iz trenutne funkcije, tipka Shift+F11.

izvršava cijeli kod sadržan u funkciji.

– onemogući/omogući sve prijelomne točke. Ovaj gumb jednostavno onemogućuje i, kada se ponovno pritisne, omogućuje sve prijelomne točke. – omogućite/onemogućite automatsko zaustavljanje kada se pojavi greška. Ovaj je gumb vrlo koristan pri uklanjanju pogrešaka i omogućuje vam da omogućite ili onemogućite automatsko zaustavljanje kada se pojavi pogreška.

Sam proces otklanjanja pogrešaka sastoji se od prolaska kroz program korak po korak i promatranja vrijednosti varijabli.

Konzola preglednika

Prilikom otklanjanja pogrešaka u kodu skripte, može biti korisno otići na karticu Konzola i vidjeti ima li tamo grešaka. Također možete ispisati informacije na konzolu koristeći console.log().

Na primjer:

// rezultat će biti vidljiv u konzoli za (var i = 0; i< 6; i++) { console.log("значение", i); }

Konzola je dostupna u bilo kojem pregledniku

Greške konzole

Greške JavaScript skripte mogu se vidjeti u konzoli.

U konzoli možete vidjeti:

Crvena linija je stvarna poruka o pogrešci.

Ukupno

Alat za ispravljanje pogrešaka omogućuje vam sljedeće:

Zaustavite se na označenoj točki (prijelomnoj točki) ili na naredbi debuggera.
Izvršite kod - ispravljajte program jedan po jedan redak ili do određene točke.
Pratite varijable, izvršavajte naredbe u konzoli itd.

U alatima za razvojne programere postoje druge kartice poput Elements koja vam omogućuje pregled HTML koda stranice, Timeline pokazuje koliko datoteka preglednik preuzima i koliko je vremena potrebno. Ali ti nam tabovi još nisu jako zanimljivi.

Firebug sadrži moćan AvaScript debugger koji vam daje mogućnost pauziranja izvršenja u bilo kojem trenutku i pregledavanja svake varijable u tom trenutku. Ako je vaš kôd trom, upotrijebite JavaScript profiler za mjerenje izvedbe i brzo pronalaženje uskih grla.

Pronađite skripte s lakoćom

Mnoge web aplikacije sastoje se od velikog broja datoteka, a pronalaženje one za otklanjanje pogrešaka može biti rutinski i dosadan zadatak. Firebugov izbornik za odabir skripte razvrstava i organizira datoteke u jasan, lako razumljiv popis koji vam pomaže pronaći bilo koju datoteku jednim klikom prsta.

Pauziraj izvršenje u bilo kojem retku

Firebug vam omogućuje da postavite prijelomne točke, koje govore debuggeru da prestane izvršavati skriptu kada dosegne određeni redak. Dok je izvođenje obustavljeno, možete vidjeti vrijednosti bilo koje varijable i pregledati objekte.

Da biste postavili prijelomnu točku, kliknite na bilo koji broj retka i tamo će se pojaviti crvena točka koja označava da je prijelomna točka postavljena. Ponovno kliknite na crvenu točku kako biste uklonili prijelomnu točku.

Pauziraj izvršenje samo ako...

Prijelomne točke mogu uzrokovati probleme ako se pokreću prečesto. Ponekad želimo pauzirati izvršenje samo kada su ispunjeni određeni uvjeti. Firebug vam omogućuje postavljanje "uvjetnih" prijelomnih točaka. Provjeravaju izraz koji mora biti istinit da bi prijelomna točka radila.

Za postavljanje uvjetne prijelomne točke jednostavno desnom tipkom miša kliknite bilo koji broj retka. Pojavit će se oblačić koji od vas traži da unesete javascript izraz. U bilo kojem trenutku možete ponovno kliknuti desnom tipkom da biste promijenili izraz ili kliknuti lijevom tipkom da biste se riješili prijelomne točke.

Korak po korak

Kada je program za ispravljanje pogrešaka pauzirao izvođenje, možete nastaviti s skriptom korak po korak. To vam omogućuje da jasno vidite kako izvođenje određene linije utječe na varijable i objekte.

Također možete nastaviti s izvođenjem za više od jednog retka. Odaberite "Pokreni do ove linije" u kontekstnom izborniku željene linije za nastavak izvršenja do ove linije.

Prekidaju me kad pogriješim

Ne birate uvijek program za ispravljanje pogrešaka... Ponekad program za ispravljanje pogrešaka izabere vas. Firebug vam daje mogućnost da automatski uskočite u program za ispravljanje pogrešaka kada se pojavi pogreška, tako da možete istražiti uvjete pod kojima se problem pojavio.

Otklopljeni hrp

Kada program za ispravljanje pogrešaka pauzira, Firebug vam prikazuje hrpu poziva, što je zbirka ugniježđenih poziva funkcija koje se trenutno izvode i čekaju na povratak.

Stog poziva predstavljen je kompaktnom trakom gumba na ploči, od kojih svaki ima naziv funkcije na nizu. Možete kliknuti bilo koji gumb za skok na redak u kojem je funkcija pauzirana i pogledati vrijednosti lokalnih varijabli unutar funkcije.

Promatranje izraza

Prilikom otklanjanja pogrešaka često želite vidjeti značenje složenih izraza ili objekata koji su zakopani u DOM-u. Firebug vam omogućuje ispis proizvoljnog javascript izraza, čija će se vrijednost ažurirati pri svakom koraku programa za ispravljanje pogrešaka.

Kada upisujete izraze, ne zaboravite da možete koristiti tipku Tab za automatsko dovršavanje svojstava objekta.

Varijabilni savjeti

Dok je izvođenje pauzirano, možete pomicati miš preko bilo koje varijable trenutne funkcije, pregledavajući opise s vrijednostima. Ovo je sjajan način da zadržite pogled na kodu i dobijete odgovore dok čitate.

Izvedba JavaScripta profila

Vaša je web aplikacija gotovo savršena. Ispravili ste sve pogreške, stvorili ste moderan dizajn i korisnicima se sviđa. Samo jedan problem - neke značajke su spore i niste sigurni zašto...

S Firebugom se više ne morate pitati zašto vaš kod radi sporo. Koristeći Firebug profiler, možete odvojiti muhe od kotleta u doslovno nekoliko sekundi.

Da biste koristili profiler, jednostavno idite na karticu Konzola i kliknite gumb "Profil". Zatim neko vrijeme koristite svoju aplikaciju ili ponovno učitajte stranicu i ponovno kliknite "Profil". Vidjet ćete detaljno izvješće koje pokazuje koje su funkcije pozvane i koliko im je vremena trebalo.

Zapisivanje poziva funkcija

Ponekad se problematična funkcija poziva toliko puta da ne možete svaki put otvoriti program za ispravljanje pogrešaka. Samo želite znati kada se poziva i s kojim parametrima.

Da biste pratili sve pozive funkcija, jednostavno desnom tipkom miša kliknite karticu Skripta i odaberite "Zapis poziva na "naziv funkcije"". Zatim idite na konzolu i gledajte kako se pozivi pojavljuju u zapisniku...

Idite ravno na liniju 108

Često želite jasno ići do željenog retka svoje skripte. Nema ništa lakše, samo upišite broj retka u okvir za brzo pretraživanje, stavljajući # na prvo mjesto, kao što je prikazano na lijevoj snimci zaslona.

U posljednjih nekoliko godina, zahvaljujući pojavi raznih biblioteka kao što su jQuery i Prototype, JavaScript je stekao vodeću poziciju među jezicima za izradu skripti za web projekte. Rastuća popularnost i jednostavnost korištenja doveli su do pojave potpunih aplikacija, poput Gmaila, koje sadrže tisuće JavaScript nizovi, postavljajući povećane zahtjeve razvojnom timu u pogledu razine znanja alata.

Rezultat sve veće složenosti aplikacije je potreba za moćni alati alate za otklanjanje pogrešaka koji vam omogućuju brzo i učinkovito pronalaženje izvora pogreške. Jednostavan izlaz varijabilnih vrijednosti pomoću funkcije upozorenje() izgubila na važnosti.

U ovu lekciju održanog kratki osvrt prilike moderni instrumenti programeri koji pomažu u poboljšanju otklanjanja pogrešaka u JavaScript kodu jednostavan proces. Fokus će biti na mogućnostima preglednika Chrome i dodatka Firebug za FireFox, no većina opisanih značajki dostupna je i u drugim alatima, kao što je Dragonfly za Operu.

Konzola - opći pogled

U većini razvojnih programa, najviše najbolji prijatelj Programer će imati konzolu. Višenamjenska ploča koja se koristi za bilježenje poruka o pogreškama, pregled DOM-a, otklanjanje pogrešaka JavaScript kod i mnoge druge zadatke. Ovisno o pregledniku poziva se konzola različite ekipe(osim izravnog odabira putem izbornika):

V Chrome preglednik i Dragonfly za Operu - Ctrl + Shift + I
Firebug - F12

Konzola automatski prikazuje greške u kodu koje su otkrivene tijekom izvođenja skripte. Datoteka i redak navedeni su pokraj pogreške, a klik na pogrešku pomiče fokus unosa na odgovarajuće mjesto.

Izbacujemo podatke na konzolu

Konzola ne može prikazati samo greške u kodu skripte. Koristeći API konzole i API naredbenog retka, možete kontrolirati izlaz podataka na konzolu. Najpoznatiji i korisna naredba .log().

Kada razvijate kod obrasca, vrlo je korisno znati vrijednosti varijabli kako biste mogli provjeriti radi li kod ispravno. Uobičajena praksa je korištenje funkcije upozorenje() za vizualni pregled. Međutim, korištenje ove metode blokira izvršenje ostatka koda dok se ne klikne gumb u dijaloškom okviru.

Moderno rješenje je korištenje metode konzola.log, koji šalje varijabilne vrijednosti na konzolnu ploču:

Console.log("Kapetanov dnevnik"); // prikazuje "Kapetanov dnevnik" na konzolnoj ploči

Metoda se može koristiti za izlaz izračunatih vrijednosti:

Funkcija calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // Ispis vrijednosti varijabli na konzolu console.log(total_photos_diff); )

Prednost ovog pristupa u usporedbi s metodom korištenja dijaloga upozorenje() je da se izvršavanje koda ne prekida, a programer može ispisati varijable vrijednosti više puta kako bi promatrao promjene podataka u stvarnom vremenu.

Var t = 3, p = 1; funkcija calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Izlaz vrijednosti u konzolu console.log(total_photos_diff); // Ažuriraj vrijednosti t = t*1.3; p = p*1.1 ; ) setInterval(funkcija() ( calcPhotos(t,p); ),100);

Označavanje poruka

U gornjem primjeru, petlja će ispisati mnogo varijabilnih vrijednosti na konzolu. Međutim, često je zgodno vizualno odvojiti različite podatke kako bi se učinkovito istaknula mjesta u kodu koja zahtijevaju povećana pozornost. Za rješavanje takvih problema, API konzole ima nekoliko metoda.

konzola.info(): Prikazuje ikonu "informacije" i boje informacije koje se prikazuju. Ova metoda pogodan za korištenje za upozoravanje na razne događaje.

console.warn(): Prikazuje ikonu upozorenja i boje informacije koje se prikazuju. Zgodan za korištenje za informacije o parametrima koji prelaze ograničenja.

console.error(): Prikazuje ikonu "greška" i boje informacije koje se prikazuju. Korisno za prijavu pogrešaka i kritičnih stanja.

Napomena: alat Chrome programer nema sredstva za drugačije predstavljanje informacija u konzoli.

Korištenje razne metode za izlaz informacija na konzolu omogućuje prikaz podataka u vizualnom obliku. Prezentacija informacija može se poboljšati blokiranjem. Korištena metoda console.group() :

// Prva grupa console.group("Izračun fotografija"); console.info("Ukupna razlika je sada " + total_photos_diff); console.log(total_photos_diff); konzola.groupEnd(); // Druga grupa console.group("Povećanje varijable"); console.log("Ukupan broj fotografija sada je: " + t); console.log("Ukupan broj prethodnih fotografija sada je: " + p); konzola.groupEnd();

Ovaj primjer će grupirati informacije u konzoli. Vizualni izgled će se razlikovati ovisno o različitim preglednicima, slika ispod prikazuje pogled u Dragonfly za Operu:

Gore navedeni primjeri predstavljaju mali popis dostupne metode iz API-ja konzole. Postoje mnoge druge korisne metode, koje su opisane na službenoj stranici Firebuga.

Prekid izvršenja skripte

Ispis informacija na konzolu je korisna značajka, ali kod se može izvoditi vrlo brzo i još uvijek pratiti mnoge varijable.

Kako biste olakšali proces otklanjanja pogrešaka, možete prekinuti izvođenje koda u određenom trenutku kako biste dobili pristup podacima. Za to se koriste prijelomne točke.

Rad s prijelomnim točkama

Za postavljanje prijelomne točke idite na karticu "Skripte" i odaberite potrebna skripta s popisa. Sada tražimo liniju u kojoj trebamo prekinuti izvršavanje skripte, te kliknemo na polje s brojem linije za aktivaciju - pojavit će se vizualni indikator. Sada ponovno učitavamo stranicu i izvršenje koda će biti prekinuto u danoj točki:

Kada se izvođenje prekine, možete postaviti pokazivač miša preko bilo koje varijable i program za ispravljanje pogrešaka prikazat će opis s trenutnom vrijednošću.

Zatim možete nastaviti s izvršavanjem koda pomoću posebne tipke, koji se nalaze na vrhu bočne trake:

Bočna traka omogućuje vam praćenje promjena u stanju koda, uključujući dinamiku lokalnih i globalnih varijabli.

Uvjetne prijelomne točke

Prilikom otklanjanja pogrešaka koda, ponekad želite zaustaviti izvršavanje koda samo kada su ispunjeni određeni uvjeti. Na primjer, ako vaša skripta ima petlju kojoj je potrebno 50 milisekundi da dovrši svaku iteraciju, bilo bi vrlo nezgodno započeti proces izvršenja nakon zaustavljanja na svakom koraku kada nam treba samo 300 iteracija. Za takve slučajeve postoje uvjetni prekidi.

U primjeru na slici, izvršenje koda neće biti prekinuto sve dok vrijednost varijable ukupna_razlika_fotografija neće biti više od 200.

Da biste aktivirali uvjetni prekid, trebate desnom tipkom miša kliknuti na točku prekida i odabrati "Uredi točku prekida" kako bi se prikazao dijaloški okvir za uređivanje uvjeta za generiranje prekida.

Postavljanje prijelomne točke u kodu

Nije uvijek zgodno postavljati prijelomne točke pomoću sučelja alata za razvojne programere u pregledniku. Ponekad je lakše pokrenuti program za ispravljanje pogrešaka iz koda posebna ekipa. Primjer u nastavku pokazuje kako možete prekinuti kod kada su ispunjeni određeni uvjeti:

If (total_photos_diff > 300) (program za ispravljanje pogrešaka; // pokretanje programa za ispravljanje pogrešaka i prekid izvršenja koda)

Drugi načini prekidanja izvršavanja koda

Uz korištenje prijelomne točke, alat za razvojne programere pruža druge opcije za zaustavljanje izvršavanja koda u različitim slučajevima.

Zaustavljanje kada se DOM promijeni

Ako trebate ispraviti pogrešku u dijelu koda koji rukuje promjenama DOM-a, alat za razvojne programere pruža način za zaustavljanje izvršavanja koda kada se DOM čvor promijeni.

Na ploči HTML koda kada se klikne desni gumb mišem na željeni element, možete odabrati uvjete za zaustavljanje koda (promjena atributa, dodavanje/uklanjanje potomaka, brisanje elementa) kada se DOM promijeni. Preopteretiti kod i kada se elementi promijene, izvršenje koda će se zaustaviti.

Zaustavite kada se pojave sve ili neobrađene iznimke

Većina alata za razvojne programere omogućuje vam da zaustavite izvršavanje skripte kada se pojave iznimke. U Krom dao Funkcionalnost se može omogućiti pomoću ikone "Pauza" u donjem retku sučelja.

Možete odabrati koje će iznimke zaustaviti izvršavanje koda. Primjer ispod pokazuje jednu neobrađenu iznimku i jednu obrađenu (try|catch block) iznimku:

Var t = 3, p = 1; funkcija calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Prva grupa console.info("Ukupna razlika je sada " + total_photos_diff); // Ažuriraj vrijednosti t = t+5; p = p+1 ;// Neobrađena iznimka if (total_photos_diff > 300) ( throw 0; ) // Obrađena iznimka if (total_photos_diff > 200) ( try ( $$("#nonexistent-element").hide(); ) catch(e) ( console.error(e) ); ) ) ) setInterval(funkcija() ( calcPhotos(t,p); ),50);

Uvod u skup poziva

Ako se pojavi pogreška tijekom izvođenja vaše skripte, gore opisane metode pomoći će vam da zaustavite program kako biste analizirali pogrešku. Ali nije uvijek odmah jasno gdje leži razlog.

Kada je izvršenje skripte prekinuto, obratite pozornost na desni panel, koji predstavlja korisne informacije, koji sadrži skup poziva.

Prikazuje se skup poziva puni put, što je dovelo do točke u kojoj je došlo do pogreške i zaustavljanja izvršenja koda.

Na donjoj slici pogreška je namjerno generirana u funkciji povećanjeVrijednosti(), što je uzrokovalo prestanak izvršavanja koda. Alat za razvojne programere prikazuje cijeli niz poziva, što vam omogućuje prepoznavanje potencijalno opasnih mjesta.

Zaključak

Ova je lekcija polazište za detaljnije proučavanje dokumentacije za alat koji planirate aktivno koristiti.

S vremena na vrijeme programeri pogriješe u kodiranju. Pogreška u programu ili skripti naziva se bug.

Proces pronalaženja i ispravljanja pogrešaka naziva se debugging i uobičajeni je dio razvojnog procesa. Ovaj odjeljak govori o alatima i tehnikama koje vam mogu pomoći u otklanjanju pogrešaka u zadacima.

Poruke o pogrešci u IE

Najlakši način za praćenje pogrešaka je uključivanje izvješća o pogreškama u vašem pregledniku. Po zadani internet Explorer prikazuje ikonu pogreške na statusnoj traci kada se na stranici pojavi pogreška.

Dvostruki klik na ovu ikonu odvest će vas do dijaloškog okvira koji prikazuje informacije o određenoj pogrešci.

Budući da je ovu ikonu lako previdjeti, Internet Explorer daje vam mogućnost automatskog prikazivanja dijaloškog okvira pogreške kad god se pojavi pogreška.

Kako biste omogućili ovu opciju, odaberite Alati → Internetske mogućnosti → kartica Napredno. i zatim konačno potvrdite okvir "Prikaži obavijest na svakoj skripti" kao što je prikazano u nastavku -

Poruke o pogrešci u Firefoxu ili Mozilli

Drugi preglednici, kao što su Firefox, Netscape i Mozilla, šalju poruke o pogrešci posebnom prozoru pod nazivom JavaScript konzola ili Error Console. Za pregled konzole odaberite Alati → Konzola za pogreške ili Web razvoj.

Nažalost, budući da ovi preglednici ne pružaju vizualne informacije kada se pojavi pogreška, morate držati otvorenu konzolu i pratiti pogreške dok se vaša skripta izvodi.

Obavijesti o pogreškama

Obavijesti o pogreškama prikazane na konzoli ili kroz dijaloške okvire Internetski prozori Explorer rezultat je i sintaksičkih i pogrešaka u vremenu izvođenja. Ove obavijesti o pogrešci uključuju broj retka u kojem se pogreška dogodila.

Ako koristite Firefox, možete kliknuti na grešku dostupnu u konzoli grešaka da biste je otvorili točna linija u skripti s greškom.

Kako otkloniti pogreške u skripti

postojati razne načine otklanjanje pogrešaka u vašem JavaScriptu - koristite JavaScript Validator

Jedan od načina testiranja JavaScript koda za čudne greške- pokrenuti ga kroz program koji ga provjerava kako bi se uvjerio da je valjan i da slijedi službena pravila sintakse jezika. Ti se programi nazivaju parseri ili skraćeno samo validatori i često dolaze s reklamom HTML uređivači i JavaScript.

Najprikladniji validator za JavaScript je Douglas Crockfordov JavaScript Lint, koji je besplatno dostupan u Douglas Crockfordovom JavaScript Lintu.

Jednostavno posjetite ovu web-stranicu, zalijepite JavaScript kôd (samo JavaScript) u predviđeno područje teksta i kliknite gumb jslint. Ovaj program će analizirati vaš JavaScript kod, osiguravajući da sve definicije varijabli i funkcija slijede ispravnu sintaksu. Također će provjeriti JavaScript upute, kao što su if i while, tako da također slijede ispravan format

Dodajte kod za otklanjanje pogrešaka svojim programima

Možete koristiti metode alert() ili document.write() u svom programu za otklanjanje pogrešaka koda. Na primjer, možete napisati nešto poput ovoga:

var debugging = istina; var whichImage = "widget"; if(debugging) alert("Poziva swapImage() s argumentom: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Izlaz iz swapImage() sa swapStatus=" + swapStatus);

Proučavanjem sadržaja i redoslijeda alert() kako se pojavljuju, možete jednostavno testirati funkcionalnost vašeg programa.

Kako koristiti JavaScript program za ispravljanje pogrešaka

Debugger je aplikacija u kojoj su svi aspekti izvršavanja skripte pod kontrolom programera. Programi za ispravljanje pogrešaka pružaju preciznu kontrolu nad stanjem skripte putem sučelja koje vam omogućuje pregled i postavljanje vrijednosti te kontrolu tijeka izvršenja.

Nakon što se skripta učita u program za ispravljanje pogrešaka, može se pokretati jedan po jedan redak ili joj se može dati uputa da se zaustavi na određenom kontrolne točke. Kada se izvođenje zaustavi, programer može provjeriti stanje skripte i njezinih varijabli kako bi utvrdio je li nešto pogrešno. Također možete vidjeti varijable da biste promijenili njihove vrijednosti.

Koristite puno komentara. Komentari vam omogućuju da objasnite zašto ste napisali skriptu na način na koji ste to učinili i da objasnite posebno teške dijelove koda.
Uvijek koristite uvlake kako bi vaš kôd bio lak za čitanje. Uvlačenje vam također olakšava spajanje početnih i završnih oznaka, vitičaste zagrade i drugi HTML elementi i skripta.
Napišite modularni kod. Kad god je moguće, grupirajte svoje izjave u funkcije. Funkcije vam omogućuju grupiranje pridruženi operateri, te testirati i ponovno koristiti dijelove koda uz minimalan napor.
Budite dosljedni u imenovanju svojih varijabli i funkcija. Pokušajte koristiti imena koja su dovoljno dugačka da budu smislena i opisuju sadržaj varijable ili svrhu funkcije.
Koristite dosljednu sintaksu pri imenovanju varijabli i funkcija. Drugim riječima, zadržite ih unutra mala slova ili u velika slova; ako više volite Camel-Back notaciju, koristite je dosljedno.
Provjerite dugačke skripte na modularan način. Drugim riječima, ne pokušavajte napisati cijelu skriptu prije testiranja bilo kojeg njezinog dijela. Napišite dio i pokrenite ga prije dodavanja sljedećeg dijela koda.
Koristite opisne nazive za varijable i funkcije i izbjegavajte korištenje naziva od jednog znaka.
Pripazite na navodnike. Upamtite da se navodnici koriste u parovima oko nizova i da oba navodnika moraju biti istog stila (jedan ili dva).
Pratite svoje znakove jednakosti. Ne biste trebali koristiti jedan = u svrhu usporedbe.
Izričito deklariram varijable pomoću ključna riječ var.

U posljednjih nekoliko godina, zahvaljujući pojavi raznih biblioteka kao što su jQuery i Prototype, JavaScript je stekao vodeću poziciju među jezicima za izradu skripti za web projekte. Sve veća popularnost i jednostavnost korištenja doveli su do pojave cjelovitih aplikacija, kao što je Gmail, koje sadrže tisuće redaka JavaScripta, postavljajući povećane zahtjeve pred razvojni tim u smislu znanja alata.

Rezultat sve veće složenosti aplikacija je potreba za snažnim alatima za otklanjanje pogrešaka koji mogu brzo i učinkovito pronaći izvor pogreške. Jednostavan izlaz varijabilnih vrijednosti pomoću funkcije upozorenje() izgubila na važnosti.

Ova lekcija pruža kratak pregled mogućnosti modernih alata za razvojne programere koji olakšavaju proces otklanjanja pogrešaka JavaScript koda. Fokus će biti na mogućnostima preglednika Chrome i dodatka Firebug za FireFox, no većina opisanih značajki dostupna je i u drugim alatima, kao što je Dragonfly za Operu.

Konzola - opći pogled

U većini razvojnih programa, konzola je programerov najbolji prijatelj. Višenamjenska ploča koristi se za bilježenje poruka o pogreškama, DOM inspekciju, otklanjanje pogrešaka JavaScript koda i mnoge druge zadatke. Ovisno o pregledniku, konzola se poziva različitim naredbama (osim izravnog odabira kroz izbornik):

u pregledniku Chrome i Dragonfly za Operu - Ctrl + Shift + I
Firebug - F12

Izbacujemo podatke na konzolu

Konzola ne može prikazati samo greške u kodu skripte. Koristeći API konzole i API naredbenog retka, možete kontrolirati izlaz podataka na konzolu. Najpoznatija i najkorisnija naredba .log().

Moderno rješenje je korištenje metode konzola.log, koji šalje varijabilne vrijednosti na konzolnu ploču:

Console.log("Kapetanov dnevnik"); // prikazuje "Kapetanov dnevnik" na konzolnoj ploči

Metoda se može koristiti za izlaz izračunatih vrijednosti:

Funkcija calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // Ispis vrijednosti varijabli na konzolu console.log(total_photos_diff); )

Označavanje poruka

U gornjem primjeru, petlja će ispisati mnogo varijabilnih vrijednosti na konzolu. Međutim, često je korisno vizualno odvojiti različite podatke kako bi se učinkovito istaknula područja u kodu koja zahtijevaju više pažnje. Za rješavanje takvih problema, API konzole ima nekoliko metoda.

konzola.info(): Prikazuje ikonu "informacije" i boje informacije koje se prikazuju. Ova metoda je prikladna za upozoravanje na razne događaje.

console.warn(): Prikazuje ikonu upozorenja i boje informacije koje se prikazuju. Zgodan za korištenje za informacije o parametrima koji prelaze ograničenja.

console.error(): Prikazuje ikonu "greška" i boje informacije koje se prikazuju. Korisno za prijavu pogrešaka i kritičnih stanja.

Napomena: Chromeov alat za razvojne programere nema mogućnost drugačijeg prikaza informacija u konzoli.

Korištenje različitih metoda za ispisivanje informacija na konzolu omogućuje prikaz podataka u vizualnom obliku. Prezentacija informacija može se poboljšati blokiranjem. Korištena metoda console.group() :

Ovaj primjer će grupirati informacije u konzoli. Vizualna prezentacija će se razlikovati u različitim preglednicima, slika ispod prikazuje prikaz u Dragonfly za Operu:

Gore navedeni primjeri predstavljaju mali popis dostupnih metoda iz API-ja konzole. Postoje mnoge druge korisne metode, koje su opisane na službenoj stranici Firebuga.

Prekid izvršenja skripte

Ispis informacija na konzolu je korisna značajka, ali kod se može izvoditi vrlo brzo i još uvijek pratiti mnoge varijable.

Kako biste olakšali proces otklanjanja pogrešaka, možete prekinuti izvođenje koda u određenom trenutku kako biste dobili pristup podacima. Za to se koriste prijelomne točke.

Rad s prijelomnim točkama

Da biste postavili prijelomnu točku, morate otići na karticu "Skripte" i odabrati željenu skriptu s popisa. Sada tražimo liniju u kojoj trebamo prekinuti izvršavanje skripte, te kliknemo na polje s brojem linije za aktivaciju - pojavit će se vizualni indikator. Sada ponovno učitavamo stranicu i izvršenje koda će biti prekinuto u danoj točki:

Kada se izvođenje prekine, možete postaviti pokazivač miša preko bilo koje varijable i program za ispravljanje pogrešaka prikazat će opis s trenutnom vrijednošću.

Zatim možete nastaviti s izvršavanjem koda pomoću posebnih gumba koji se nalaze na vrhu bočne trake:

Bočna traka omogućuje vam praćenje promjena u stanju koda, uključujući dinamiku lokalnih i globalnih varijabli.

Uvjetne prijelomne točke

U primjeru na slici, izvršenje koda neće biti prekinuto sve dok vrijednost varijable ukupna_razlika_fotografija neće biti više od 200.

Postavljanje prijelomne točke u kodu

Nije uvijek zgodno postavljati prijelomne točke pomoću sučelja alata za razvojne programere u pregledniku. Ponekad je lakše pokrenuti program za ispravljanje pogrešaka iz koda pomoću posebne naredbe. Primjer u nastavku pokazuje kako možete prekinuti kod kada su ispunjeni određeni uvjeti:

If (total_photos_diff > 300) (program za ispravljanje pogrešaka; // pokretanje programa za ispravljanje pogrešaka i prekid izvršenja koda)

Drugi načini prekidanja izvršavanja koda

Uz korištenje prijelomne točke, alat za razvojne programere pruža druge opcije za zaustavljanje izvršavanja koda u različitim slučajevima.

Zaustavljanje kada se DOM promijeni

Ako trebate ispraviti pogrešku u dijelu koda koji rukuje promjenama DOM-a, alat za razvojne programere pruža način za zaustavljanje izvršavanja koda kada se DOM čvor promijeni.

U panelu HTML koda, kada desnom tipkom miša kliknete na željeni element, možete odabrati uvjete za zaustavljanje koda (promjena atributa, dodavanje/uklanjanje djece, brisanje elementa) kada se promijeni DOM. Preopteretiti kod i kada se elementi promijene, izvršenje koda će se zaustaviti.

Zaustavite kada se pojave sve ili neobrađene iznimke

Većina alata za razvojne programere omogućuje vam da zaustavite izvršavanje skripte kada se pojave iznimke. U Chromeu se ova funkcija može omogućiti pomoću ikone "Pauza" u donjem retku sučelja.

Možete odabrati koje će iznimke zaustaviti izvršavanje koda. Primjer ispod pokazuje jednu neobrađenu iznimku i jednu obrađenu (try|catch block) iznimku:

Var t = 3, p = 1; funkcija calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // Prva grupa console.info("Ukupna razlika je sada " + total_photos_diff); // Ažuriraj vrijednosti t = t+5; p = p+1 ; / / Neobrađena iznimka if (total_photos_diff > 300) ( throw 0; ) // Obrađena iznimka if (total_photos_diff > 200) ( try ( $$("#nonexistent-element").hide(); ) catch(e) ( konzola. pogreška(e); ) ) ) setInterval(funkcija() ( calcPhotos(t,p); ),50);

Uvod u skup poziva

Ako se pojavi pogreška tijekom izvođenja vaše skripte, gore opisane metode pomoći će vam da zaustavite program kako biste analizirali pogrešku. Ali nije uvijek odmah jasno gdje leži razlog.

Kada se izvođenje skripte prekine, obratite pozornost na desnu ploču koja pruža korisne informacije, uključujući i skup poziva.

Stog poziva prikazuje puni put koji je doveo do točke gdje je došlo do pogreške i zaustavljanja izvršenja koda.