Otklanjanje pogrešaka na web stranici. Otklanjanje pogreške web stranice. Greške skripte u Internet Exploreru. Uzroci i rješenja. Profiliranje SQL upita. Otklanjanje pogrešaka u JavaScriptu pomoću programa za ispravljanje pogrešaka i konzole

Korištenje alata za razvojne programere F12 za otklanjanje pogrešaka u JavaScriptu

Ovaj sadržaj povezuje na više stara verzija F12 razvojni alati. Preuzmite najnoviju dokumentaciju F12 Tools.

F12 alati omogućuju programerima brzo otklanjanje pogrešaka u JavaScript kodu bez napuštanja preglednika. Ugrađen u svaku instancu Windows Internet Explorer 9 F12 alati za razvojne programere pružaju alate za otklanjanje pogrešaka kao što su prijelomne točke, kontrola pregleda i lokalne varijable, kao i konzola za poruke i trenutačno izvršavanje koda.

Ovaj članak govori o tome kako koristiti alate za razvojne programere F12 za otklanjanje pogrešaka koda JavaScripta. Ovaj članak nije namijenjen da bude sveobuhvatan vodič za otklanjanje pogrešaka, već da istakne alate koji mogu pomoći razvojnom programeru da započne s kodom. U Internet Exploreru 9 pritisnite F12 da biste otvorili alate za razvojne programere i kliknite karticu Skripta da biste započeli.

Na kartici Skripta s lijeve strane je područje izvorni kod, gdje programer može pregledati svoj JavaScript kod, postaviti prijelomne točke i proći kroz svoje funkcije. U desnom oknu možete se prebacivati između kartica za konzolu, varijable praćenja, lokalne varijable, skup praćenja i prijelomne točke.

Pokretanje i zaustavljanje programa za ispravljanje pogrešaka

Kada prvi put otvorite F12 Developer Tools i kliknete karticu Script, vaš kod se pojavljuje na lijevoj strani, a konzola na desnoj. Možda ćete vidjeti poruku na konzoli koja kaže: "Osvježite stranicu kako biste vidjeli poruke primljene prije nego ste otvorili F12 Developer Tool." Kada osvježite web stranicu, konzola će prikazati sve pogreške ili upozorenja uzrokovana preglednikom.

Za postavljanje prijelomnih točaka, pregled kontrolnih i lokalnih varijabli i pregled poziva niza funkcija kliknite gumb Pokreni ispravljanje pogrešaka. Klikom na gumb Pokreni ispravljanje pogrešaka osvježava se web-stranica i ponovno pokreće kod u alatu za ispravljanje pogrešaka.

Korištenje konzole za otkrivanje pogrešaka u sintaksi i drugim kodovima

U većini programskih projekata pogreške se dijele na sintaktičke, logičke i pogreške pri unosu podataka. Prikaz konzole prikazuje JavaScript pogreške i iznimke, kao i DOM iznimke. Unutar svog koda, možete koristiti objekt konzole za izvješćivanje o statusu programa i porukama o pogreškama konzoli umjesto "alert()" poziva ili dostupnog prostora na zaslonu. Na primjer, možete dodati liniju

Window.console.log("Datoteka je uspješno otvorena");

U svom JavaScript kodu da biste dobili informacije o stanju skripte bez prekidanja njezinog izvođenja. Dodatne informacije: .

Ispravak izgled scenariji

Alati za razvojne programere F12 mogu otkloniti pogreške u JavaScriptu na razini retka ili izjave, bez obzira na to kako je kod prikazan. Možete čak i proći kroz skripte koje su komprimirane tako da izgledaju kao veliki blokovi koda. Ali ponekad je teško slijediti logiku kada je kod jedan blok.

Za formatiranje skripte kliknite gumb Konfiguracija i odaberite Formatiraj JavaScript. Sljedeće snimke zaslona prikazuju blok JavaScript koda prije i nakon formatiranja.

Prekid izvršenja koda

Postavljanje prijelomnih točaka u alatima za razvojne programere F12 slično je njihovom postavljanju u binarnim programima za ispravljanje pogrešaka kao što je Microsoft Visual Studio. U lijevom oknu kliknite lijevo od retka koda gdje želite stati. Prijelomne točke se mogu mijenjati, tako da klikom dodajete prijelomnu točku, a ponovnim klikom je uklanjate.

U svoj kod možete dodati onoliko prijelomnih točaka koliko vam je potrebno. Možete ili desnom tipkom miša kliknuti redak koda i odabrati Umetni prijelomnu točku ili kliknuti lijevu marginu pokraj naredbe gdje želite postaviti prijelomnu točku.

Koristeći F12 autorske alate, možete postaviti prijelomnu točku na razini naredbe, čak i ako su te naredbe u bloku ili retku s više naredbi. To vam omogućuje stvaranje prijelomne točke u komprimiranom segmentu koda. Najbolji način za postavljanje prijelomne točke u ovim uvjetima je da desnom tipkom miša kliknete kod i odaberete Umetni prijelomnu točku iz kontekstnog izbornika. Također možete koristiti formatiranje skripte (lijepo tipkanje) opisano ranije, formatirajući retke kako biste ih lakše kliknuli na marginama.

Upravljajte višestrukim prijelomnim točkama pomoću kartice Prijelomne točke

Ako imate veliku količinu koda s mnogo prijelomnih točaka ili čak više datoteka, možete koristiti karticu Prijelomne točke da biste pratili sve prijelomne točke koje su vam potrebne. Na kartici Skripta kliknite karticu Prijelomne točke u svojstvu ili desnom oknu. Pogledajte sljedeću sliku za primjer:

Kartica Prijelomne točke omogućuje programeru da omogući ili onemogući, izbriše, odabere i kopira prijelomne točke bez potrebe za navigacijom do točnih lokacija prijelomnih točaka. Da biste omogućili ili onemogućili prijelomnu točku, odaberite ili poništite potvrdni okvir pokraj opcije koju želite promijeniti. Također možete skočiti izravno na prijelomnu točku u svom kodu dvostrukim klikom na nju na popisu. Možete odabrati više prijelomnih točaka odjednom pritiskom na tipku CTRL i klikom na prijelomne točke koje želite.

Kartica Prijelomne točke također nudi kontekstni izbornik (koji se otvara desnim klikom) koji vam omogućuje brisanje, omogućavanje, onemogućavanje ili kopiranje grupa prijelomnih točaka. Ovi parametri prikazani su u sljedećoj tablici.

Stavka izbornika Akcija

Izbrisati	Trajno brisanje prijelomne točke.
izbrisati sve	Trajno uklanja sve prijelomne točke.
Omogući sve	Odaberite sve potvrdne okvire na popisu.
Onemogući sve	Briše sve potvrdne okvire na popisu.
Stanje	Omogućuje postavljanje uvjetne prijelomne točke za jednu točku. Ova opcija nije dostupna ako je odabrano više prijelomnih točaka.
Kopirati	Kopira tekst opisa odabranih prijelomnih točaka.
Odaberi sve	Označava sve prijelomne točke na popisu.
Na izvorni kod	Pomiče se u lijevo područje koda za prikaz odabrane prijelomne točke. Ova opcija nije dostupna ako je odabrano više prijelomnih točaka.

Uvjetne prijelomne točke

Bezuvjetno zaustavljanje na liniji koda je korisno, ali zaustavljanje kada svojstvo ili varijabla dosegne određenu vrijednost još je snažnije. Za zaustavljanje kada se dosegne ili postavi određena vrijednost, stvorite prijelomnu točku, a zatim otvorite karticu Prijelomne točke. Desnom tipkom miša kliknite prijelomnu točku koju želite i odaberite Uvjet.

U dijaloškom okviru uvjeta dodajte ispravne JavaScript operator. Izvršni kod će se zaustaviti na ovoj prijelomnoj točki kada se iskaz ocijeni istinitim. Na primjer, na sljedećoj slici, izvršavanje koda se zaustavlja kada vrijednost svojstva oAudio.paused postane lažna.

Možete navesti jedan uvjet ili koristiti logičke operatore za stvaranje više teško stanje Stop. Ali imajte na umu da će opseg varijabli i objekata ostati isti kao kad su bili prikazani u prozoru za pregled prijelomne točke. Uvjet koji nije u opsegu neće biti ocijenjen kao istinit.

Prolazak kroz kod

Kada se izvršavanje koda zaustavi na prijelomnoj točki, možete koristiti gumbe za skok za nastavak izvođenja (F5), prekid izvođenja (CTRL+SHIFT+B), ulazak u funkciju (F11), preskakanje funkcije (F10) ili izlaz iz funkcije (SHIFT+F11). Kada se izvođenje zaustavi na točki prekida ili tijekom postupnog izvođenja, prozor za ispravljanje pogrešaka postaje modalan.

Stoga, prije nastavka interakcije s web stranicom, morate zaustaviti ispravljanje pogrešaka (SHIFT+F5) ili nastaviti s izvođenjem (F5). Ovo je nešto što treba imati na umu ako se čini da je web stranica prestala reagirati. Ako, kada je otvoreno više prozora, prozor programa za ispravljanje pogrešaka nije na vrhu, možda čeka odgovor na točki prekida. U tom slučaju, da biste vratili kontrolu nad web stranicom, pronađite prozor za ispravljanje pogrešaka za tu web stranicu i pritisnite F5 za nastavak ili pritisnite SHIFT+F5 za prekid otklanjanja pogrešaka.

Pogledajte varijable pomoću kartica Watch i Local

Kartica Watch omogućuje vam definiranje i pregled varijabli praćenja u kodu koji ispravljate. Sadrži ime, vrijednost i tip navedenih varijabli. Možete kliknuti redak s oznakom Click to add... na kartici Watches i unijeti naziv varijable. Ako ne želite upisati naziv varijable, možete ga kopirati i zalijepiti na popis kontrolnih varijabli.

Vrijednosti na popisu kontrolnih varijabli prikazuju se bez obzira na to ispravljate li pogreške ovaj trenutak kod ili ne. Kada omogućite otklanjanje pogrešaka i praćenje koda ili postavite prijelomne točke, opseg vrijednosti varijable na popisu određen je trenutnom točkom u izvršavanju skripte. Ako je otklanjanje pogrešaka onemogućeno, opseg je globalan i bit će prikazane samo vrijednosti globalne varijable.

Za razliku od kartice Watch values koja prikazuje vrijednosti bez obzira na to jesu li odgovarajuće varijable u opsegu, kartica Lokalno prikazuje samo varijable u trenutnom opsegu. Nema potrebe dodavati varijable za prikaz jer kada se opseg promijeni, kartica se ažurira kako bi prikazala sve dostupne varijable.

Da biste vidjeli razliku, otvorite sljedeći primjer u Internet Exploreru 9 i slijedite ove korake.

Primjer otklanjanja pogrešaka u JavaScriptu //stvorimo globalnu varijablu za naš prikaz varijable; funkcija init() ( //inicijaliziraj samo nakon što se HTML učita display = document.getElementById("results"); ) funkcija firstParam() ( //postavi prijelomnu točku ovdje var a = 5; secondParam(a); ) funkcija secondParam (a) ( var b = 10; thirdParam(a, b); ) funkcija thirdParam(a, b) ( var c = 15; var d = a + b + c; //prikaži na konzoli ako su F12 alati otvoreni ako (window.console && window.console.log) ( window.console.log(a + " + " + b + " + " + c + " = " + d); ) else ( display.innerText = a + " + " + b + " + " + c + " = " + d; ) )

Trčanje

Preuzmite primjer u Internet Exploreru 9.

Pritisnite tipku F12 da biste otvorili F12 Developer Tools i kliknite karticu Script.

U lijevom oknu pomaknite se do prve funkcije, desnom tipkom miša kliknite redak "var a = 5;" i odaberite Umetni prijelomnu točku.

Kliknite gumb Pokreni otklanjanje pogrešaka, a zatim na web stranici u pregledniku kliknite gumb Pokreni.

U alatima za razvojne programere F12 kliknite karticu Watches na desnoj strani i dodajte varijable "a, b, c i d.".

Prođite kroz kôd pritiskom na F11 ili gumbom Step In i pogledajte varijable na kartici Watches.

Dok prolazite kroz svaku funkciju, vrijednosti koje se gledaju trebale bi se promijeniti iz nedefiniranih u neke vrijednosti.

Kako biste osjetili razlike s kartice Lokalno, pritisnite F5 za nastavak s F12 alata za razvojne programere. Na web stranici u vašem pregledniku kliknite gumb Pokreni za ponovno pokretanje koda i povratak na F12 alate za razvojne programere. U desnom oknu kartice Skripta kliknite karticu Lokalno i pritisnite F11 da biste ponovno prolazili kroz funkcije. Imajte na umu da popis lokalnih varijabli sadrži samo varijable koje imaju vrijednosti. Lokalni prikaz također prikazuje argumente proslijeđene funkciji, njihovu vrijednost i njihov tip.

Pregledajte skup poziva

Kartica Stog poziva omogućuje vam pregled putanje koju ste prošli prilikom pozivanja funkcija iz koda. To može pomoći u otkrivanju neočekivanih puteva izvršavanja koda koji su rezultat pogreške. Na kartici Nig poziva možete dvaput kliknuti bilo koju funkciju i otići do njezina poziva u izvornom kodu.

Isprobajte gornji primjer i pazite na karticu Call Stack dok prolazite kroz kod do funkcija.

Na kartici Skup poziva, trenutna funkcija ili lokacija uvijek je na vrhu (označena je strelicom na kartici Skup poziva i u poljima koda). Na dvostruki klik Za bilo koju od funkcija na popisu, označen je operator koji poziva funkciju.

Otklanjanje pogrešaka s više skripti

Velike web stranice obično koriste više JavaScript datoteka. Alati za razvojne programere F12 omogućuju vam da radite s višestrukim skriptnim datotekama, baš kao što biste to učinili kada otklanjate pogreške koda. Za pregled druge datoteke kliknite strelicu prema dolje pored gumba Pokreni ispravljanje pogrešaka kako biste prikazali popis skripti povezanih s ovom web stranicom. Kada koristite alate za razvojne programere F12, kod će se proći kroz sve datoteke. Možete dodati varijable iz bilo koje datoteke skripte za pregled, a prikaz snopa poziva prikazat će put izvršenja kroz funkcije sadržane u različitim datotekama skripte.

Promjena postavke Document Mode

Postavka Način rada s dokumentima na desnoj strani trake izbornika dostupna je na svakoj F12 kartici Alati za razvojne programere, ali ova je postavka posebno korisna pri uklanjanju pogrešaka koda na kartici Skripte. Internet Explorer 9 omogućuje vam da promijenite način rada dokumenta tako da oponaša standarde prethodne verzije Windows Internet Explorer. U Internet Exploreru 9, izlazak iz deklaracije postavlja vrstu dokumenta na način kompatibilnosti prema zadanim postavkama. Kada radite s novom značajkom ili novim standardom, kao što je HTML5, neke pogreške mogu izgledati kao programske pogreške, ali su zapravo uzrokovane nedostatkom ili netočnom deklaracijom tipa dokumenta.

Alati za razvojne programere F12 za Internet Explorer 9 ne mogu umjesto vas popraviti vaš kôd, ali olakšavaju pronalaženje JavaScript pogrešaka.

Ažurirano: studeni 2007

Platforma ASP.NET pruža opsežnu podršku za otklanjanje pogrešaka u web aplikacijama. Međutim, zbog distribuirane prirode web aplikacija, otklanjanje pogrešaka u njima se na neki način razlikuje.

Općenito, web aplikacije otklanjaju se pogreške na isti način kao i druge Visual Studio aplikacije. Možete postaviti prijelomne točke, pokrenuti program za ispravljanje pogrešaka, pauzirati kod, ispitati vrijednosti varijabli i izvršiti sve funkcije povezane s programom za ispravljanje pogrešaka Visual Studio. Za više informacija pogledajte. Osim toga, platforma ASP.NET podržava način praćenja koji vam omogućuje umetanje instrumentalnih poruka u obrasce. pojedinosti vidi odjeljke i.

Za više informacija o daljinskom otklanjanju pogrešaka pogledajte .

Bez obzira gdje će se otklanjanje pogrešaka obaviti - na lokalno računalo ili daljinski, morate biti sigurni da je otklanjanje pogrešaka dopušteno posebno za ovu web aplikaciju. Da biste omogućili otklanjanje pogrešaka, koristite element datoteke Web.config koji je dio projekta web aplikacije. Ova opcija nalaže prevoditelju da umetne simbole za otklanjanje pogrešaka u kompilirani kod aplikacije tako da ga može koristiti program za ispravljanje pogrešaka. Možete omogućiti otklanjanje pogrešaka pomoću alata za administraciju stranice. Za više informacija pogledajte.

Ima, naravno, i drugih – svakako ću ih spomenuti.

Firebug za Firefox

Ne znam sa sigurnošću je li FireBug predak drugih alata za programere, ali je definitivno najpopularniji, najprikladniji i funkcionalniji u .

Firebug je dodatak za Firefox, što znači da ga trebate preuzeti s web stranice Firefox dodataka i instalirati.

Da biste pokrenuli firebug, samo pritisnite F12.

Značajke ovog dodatka:

Provjera i uređivanje dinamički promjenjivog HTML-a;
CSS uređivanje u hodu;
Debugging JavaScript, naredbeni redak za izvršavanje skripti;
Praćenje mrežnih zahtjeva - možete vidjeti veličine i vremena preuzimanja datoteka i skripti, zaglavlja zahtjeva;
DOM parser.

Možemo dugo govoriti o ovim mogućnostima u detalje, ali mislim da ih svi naši čitatelji znaju, a ako ne - detaljne informacije nalazi se na Firebugovoj početnoj stranici ili ista stvar u prijevodu Ilye Kantora.

Osim samog firebuga, možda će vam trebati i koristan dodatak za njega - FireCookie, s kojim (iznenađenje :-) možete pregledavati i mijenjati kolačiće.

Alatna traka za web programere za Firefox

Još jedan koristan dodatak Ognelisu. Ovako izgleda:

Pogledajmo točku po točku.

Onemogući

Omogućuje vam da isključite JavaScript i onemogućite korištenje predmemorije, što je vrlo korisno tijekom razvoja (omogućuje vam da budete sigurni da se stranica učitala zajedno s najnovija ažuriranja), poništiti boje korištene na stranici i zamijeniti ih standardnim, zabraniti slanje u referrer headeru (stranici s koje je upućena preporuka).

Kolačići

Korisna opcija za rad s kolačićima: možete ih pregledavati, brisati, odbijati i dodavati.

CSS

Ovaj izbornik pohranjuje najbolju značajku alatne trake za razvojne programere - uređivanje CSS-a u hodu. Osim toga, moguće je vidjeti css, onemogućiti i tako dalje i tako dalje. Po mom mišljenju, vrlo je korisno imati tipke prečaca(CTRL+SHIFT+C vam, na primjer, omogućuje odlazak izravno na prikaz stilova stranice)

Obrasci

Sve za rad s obrascima: prikaz lozinki, prikaz informacija o obrascima, pretvaranje metoda obrazaca (GET »POST i obrnuto) i još mnogo toga. Korisna funkcija "Popunjavanje polja obrazaca" za automatsko punjenje polja obrasca (na primjer, prilikom testiranja stranice, kada je funkcija pamćenja lozinki onemogućena. Inače, ne vidim ništa korisno u ovoj stavci.

Slike

Postoji korisna funkcija za onemogućavanje slika - da vidite kako vaša stranica izgleda bez slika. Možete zaokružiti slike, prikazati njihove veličine i prikazati alt atribute.

Informacija

Postoji mnogo opcija u ovom izborniku. Funkcija prikaza klase i id atributa na stranici može biti korisna. Osim toga, zanimljiva je stavka "Prikaz informacija o boji" - za brzo dobivanje informacija o bojama koje se koriste na stranici. “Prikaži veličinu dokumenta” - pogledajte veličinu stranice. “View Response Headers” - pregled zaglavlja stranica.

Razno

Najčešće korištena funkcija je brisanje predmemorije. Osim toga, ovdje dostupne funkcije su "Page ruler" - ravnalo, "Page Magnifier" - povećalo i "Line guides" - nekoliko linija koje mogu biti korisne za rezanje predloška.

Obris

Izbor različite elemente stranice - tablice, naslovi, veze, okviri, blokovi. Promjena veličine omogućuje promjenu veličine prozora preglednika kako bi odgovarao svim standardnim proširenjima zaslona. Ovdje su pohranjene značajke alata za provjeru valjanosti stranice. I lokalno i vanjsko. Povoljno i brz pristup za provjeru valjanosti HTML-a, CSS-a itd. Za provjeru valjanosti HTML-a možete koristiti tipkovni prečac CTRL+SHIFT+H.

Pogledaj izvor

Pogledajte izvorni kod. Mogućnost razgledavanja u vanjska primjena, gledajući generirani kod.

Najviše mi se sviđa onaj u desnom uglu. To je brzi HTML, CSS validator i JavaScript indikator pogrešaka. Ako nema problema, ikona je zelena, a ako ima problema, ikona je crvena.

Alatna traka za programere Internet Explorera

Počevši od 8.0, otklanjanje pogrešaka već je ugrađeno u ovaj preglednik. Lako se poziva pritiskom na tipku F12. Istina, jadan je kao program iz 90-ih.

Ali za ovaj preglednik postoji puno cool alat, takozvana Internet Explorer Developer Toolbar, koju možete preuzeti s poveznice.

Izgledom ova alatna traka, naravno, izgleda kao firebug, ali, nažalost, još nije sazrela za to. Iako, s druge strane, ima neke mogućnosti koje firebug nema. Internet Explorer Developer Toolbar nazvao bih nekom vrstom hibrida Firebuga i FireFox WEB Alatna traka za razvojne programere.

Kao iu firebugu, moguće je pregledati element jednostavnim klikom. Ali, ako u odmah možemo vidjeti ispunu i margine, ovdje nema takve mogućnosti.

Dodatno, alatna traka za razvojne programere Internet Explorera ne ažurira dinamički stablo elemenata kao što to radi Firebug. Odnosno, ako bilo što promijenimo na stranici pomoću js-a, nećemo vidjeti ništa pomoću ove alatne trake.

Ono u čemu možete uživati je mijenjanje CSS-a u hodu (jednostavan način da pronađete što hakirati :), mogućnost onemogućavanja CSS-a i slika, mogućnost brzog brisanja predmemorije i igranja s kolačićima, brz pristup provjeri valjanosti.

Najbolji dio: postoji ugrađeni birač boja koji vam omogućuje da pomoću pipete dobijete bilo koju boju sa stranice. (postoji poseban dodatak ColorZilla za ff).

Otklanjanje pogrešaka DebugBar za Internet Explorer

DebugBar za Internet Explorer možete preuzeti s navedene poveznice.

Zanimljivo proširenje samo po sebi. Instalirano kao dodatna ploča pregledniku:

Iz nekog razloga postoji ugrađena tražilica, kapaljka, mogućnost promjene veličine prozora i, opet, iz nekog razloga mogućnost slanja stranice prijatelju za sapun. Iako ovo može biti korisno. Ali nisam uspio iskoristiti ovu priliku.

Osim toga, tu je i inspektor:

Programeri nisu bili zadovoljni načinom pregleda klikom ili pokazivanjem: smislili su zanimljiviju stvar. U DebugBar-u morate povući križić na željeni element da biste ga vidjeli u stablu. Ne postoji mogućnost uređivanja CSS-a. Ali postoji validator i ugrađena js konzola.

A ako kopate po postavkama, možete pronaći ovo:

I smiješno i tužno.

Poznato je da će Developer Toolbar biti ugrađen u osmi explorer. Bit će sličan onome opisanom u trećem paragrafu, ali se nadamo da će biti bolji.

Debug DragonFly za Operu

DragonFly je ugrađen u Operu počevši od verzije 9.5, tako da ga nema potrebe instalirati. Kako biste aktivirali Dragonfly, idite na Alati → Napredno → Alati za razvojne programere. A ako je na engleskom, tada Alati → Napredno → Alati za razvojne programere.

Odmah ću vas upozoriti da je DragonFly u Alpha2 fazi, to objašnjava mnoge njegove greške.

Popis značajki:

inspektor DOM-a;
Pregledaj klikom (opet, nećemo vidjeti uvlaku kao u FireFoxu);
Montaža ;
Brzi pristup konzoli za pogreške.

DF - nešto slično zasebna stranica u okviru. Ako ga otvorite, bit će otvoren za sve kartice (za razliku od firebuga). Stoga, prije pregleda elementa, moramo s popisa odabrati stranicu koju želimo vidjeti.

Nažalost, ovdje, kao iu alatnoj traci Internet Explorer Dav, dinamički stvoreni elementi nisu prikazani. I općenito, kada pregledavamo stranicu, ne pokreće se JavaScript: ne klika se na veze i gumbe. Nadajmo se da ćemo vidjeti sve ove značajke kada se DragonFly približi izdanju.

Debug WEB Inspector u Safariju

Odmah ću reći da su informacije o pregledniku Safari procurile, pa, kako kažu, nisam odgovoran za primjerenost materijala.

Da biste omogućili stavku "Razvoj" u izborniku Safari, morate omogućiti odgovarajuću stavku u postavkama (kartica "Napredno"):

U izborniku “Razvoj” dostupne su nam sljedeće funkcije:

Pogledajmo pobliže WEB inspektora:

Prema zadanim postavkama, inspektor se otvara u načinu HTML prikaza. Ali može se prebaciti u DOM prikaz. U tu svrhu postoji prekidač na gornjoj ploči. Kada prijeđete pokazivačem iznad elementa u inspektoru, on će biti istaknut na samoj stranici. Ne možete vidjeti ispunu, promijeniti oznake ili CSS u hodu, niti vidjeti dinamičke promjene u DOMe-u u hodu kao što možete u FireBugu. Ali, morate priznati, izgleda jako slatko.

Ako želite raditi s inspektorom u prozoru preglednika, možete kliknuti na gumb u donjem lijevom kutu.

Čak je i u Safariju dostupna funkcija kao što je "Network Timeline" (gumb "Network" u inspektoru):

Jasno možete vidjeti kada i koliko dugo traje preuzimanje datoteka. Također možete vidjeti zaglavlja zahtjeva, ali, nažalost, ne možete vidjeti sam sadržaj.

Debug za programere u Google Chrome

Lame je rođen u naprednom obliku, i odmah ima, doduše za sada krive, ali ipak alate za programere.

Inspektor DOM-a;
javascript debugger;
JavaScript konzola.

Da biste pregledali bilo koji element, trebate ga kliknuti desnom tipkom miša i u kontekstnom izborniku odabrati “View element code”:

Funkcionalnost je ista kao u Safariju: elementi su istaknuti kada lebdite, ali uređivanje CSS-a i HTML-a nije dostupno, a promjene u DOM-u se ne prate. Ali gumb u donjem lijevom kutu, koji bi trebao pričvrstiti inspektora na prozor preglednika, ne radi.

U kartici "Resursi" možemo vidjeti sljedeće:

Nešto drugačije od razmjera u safariju. Prozirno u ovom dijagramu prikazuje relativne veličine datoteka, a puna boja prikazuje vrijeme učitavanja. Na ovaj ili onaj način, očito je da je ovaj dio Chromea daleko od završetka.

U ovom sam članku pogledao najpoznatija proširenja i ugrađene preglednike.

Postoje i drugi, npr.

Internet Explorer WEB Development Helper - dobar pomoćnik za ASP.NET programere (Internet Explorer);
WEB Developer Toolbar - alatna traka za Internet Explorer i FireFox. Ima ih nekoliko korisne funkcije;
WEB Accessibility Toolbar - alatna traka za Internet Explorer. Ništa zanimljivo.

Ako postoje dodaci koje nisam spomenuo, a trebali bi, ili postoje funkcije za spomenuta proširenja koje su mi promakle, napišite.

Uživajte za svoje zdravlje!

Dok surfate internetom Internet preglednik Explorer vam može dati poruke koje pokazuju da stranica sadrži pogreške i da se možda neće ispravno prikazati. Pogledajmo nekoliko načina za rješavanje ovog problema.

upute

Ako nema vidljivih poteškoća u radu preglednika osim pogreške koja se povremeno pojavljuje, možete pokušati onemogućiti otklanjanje pogrešaka skripte kako se poruka više ne bi pojavljivala (ako se pogreška pojavljuje na više od jedne stranice odjednom, prijeđite na sljedeću korak). U izborniku Alati otvorite Internetske mogućnosti, odaberite karticu Napredno i potvrdite okvir "Onemogući otklanjanje pogrešaka skripte". Ako želite isključiti obavijest za sve pogreške, poništite potvrdni okvir "Prikaži obavijest za svaku pogrešku skripte".

Pokušajte otvoriti web mjesto koje uzrokuje pogrešku kada ga gledate s drugog račun ili s drugog računala kako biste saznali je li problem lokalni. Ako se pogreška pojavi, najvjerojatnije je uzrokovana netočnim kodom web stranice. U tom slučaju možete onemogućiti ispravljanje pogrešaka skripte slijedeći upute u prethodnom koraku. Ako problem nestane kada pregledavate web mjesto pomoću drugog računala ili računa, prijeđite na sljedeći korak.

Internet Explorer možda ne blokira aktivne skripte, Javu i ActiveX koji upravljaju načinom na koji se informacije prikazuju na stranici kada pregledavate stranice. Da biste riješili problem, morate resetirati sigurnosne postavke preglednika. Da biste to učinili, u izborniku "Alati" odaberite "Internetske mogućnosti" i idite na karticu "Sigurnost". Pritisnite gumb "Default", a zatim "OK". Ako nakon ponovnog pokretanja stranice na kojoj se pojavila pogreška problem i dalje postoji, pokušajte sljedeću metodu.

Kao što znate, preglednik pohranjuje privremene datoteke i kopije stranica u zasebnu mapu za kasniji pristup. Ako veličina mape postane prevelika, neke se stranice možda neće ispravno prikazati. Problem se može riješiti povremenim pražnjenjem mape s privremenim datotekama. Da biste to učinili, otvorite dijaloški okvir Internetske mogućnosti iz izbornika Alati. Na kartici Općenito u grupi Povijest kliknite gumb Izbriši. Označite okvire za Privremene internetske datoteke, Kolačiće, Dnevnik i Podaci web obrasca i kliknite U redu.

Postoji mnogo članaka na Habréu koji opisuju zanimljive i složene aspekte web razvoja, ali postoje mnogi čitatelji koji bi, budući da su na početku svoje karijere web programera, željeli vidjeti materijal koji bi im omogućio da naprave prvi korak iz “PHP-a u 24 sata” za razvoj na ozbiljnoj razini i želio bih podijeliti svoje iskustvo po tom pitanju.

Svojstva web aplikacije čine je podijeljenom na dva dijela: klijent i poslužitelj. Na strani klijenta kod se izvodi u JavaScriptu (možda negdje možete pronaći VBScript, ali vjerojatno nećemo uzeti u obzir ovaj slučaj), na strani poslužitelja postoji puno stvari, u načelu, ali pogledat ćemo PHP, najpopularniji jezik za poslužiteljsku stranu web aplikacija. Također bi bilo zanimljivo razgovarati o otklanjanju pogrešaka i profiliranju Flash aplikacija na strani klijenta, ali tema je već opsežna, pa ćemo je ostaviti za sada.

Analiza i provjera valjanosti HTML koda također se može smatrati jednim od zadataka otklanjanja pogrešaka koda klijenta. Čini se da je to zadatak ne posve iz područja programiranja, ali također važan.

Neki dijelovi problema o kojima se govori već su obrađeni u drugim člancima, a ja sam dao poveznice na njih.

Otklanjanje pogrešaka i profiliranje koda klijenta "Klasičan" način za ispravljanje pogrešaka JavaScript koda je korištenje funkcije upozorenja i njezinih izvedenica. Sjećam se da sam na početku svoje karijere osobno napisao funkciju print_r za JavaScript, jer nisam vidio mogućnost ispisivanja informacija o ispravljanju pogrešaka na nizovima i objektima. Izgledalo je otprilike ovako:
funkcija print_r(varijabla) ( if (varijabla instanceof Array || varijabla instanceof Object) ( var ključ; for (ključ u varijabli) alert(key + " => " + varijabla); ) else ( alert(varijabla); ) )

Naravno, o bilo kakvom profiliranju uopće nije bilo govora.

S ovim pristupom, čak su i informacije o objektu konzole revolucionirane.

Specifičnosti strana klijenta web aplikacije zahtijevaju otklanjanje pogrešaka koda u svim popularnim preglednicima. Naravno, najčešće je dovoljno otklanjanje pogrešaka u Internet Exploreru i bilo kojem drugom normalnom pregledniku, ali razmotrit ćemo sve mogućnosti.

Mozilla Firefox Vjerojatno se Firefox može nazvati pionirom u otklanjanju pogrešaka koda klijenta. Dugo vremena označen je kao preglednik najprikladniji za razvoj, a sve zahvaljujući ekstenziji Firebug koja vjerojatno sadrži sve potrebne sposobnosti, osim za provjeru valjanosti HTML koda.

Također, počevši od verzije 4, pojavila se ugrađena web konzola koja implementira neke od funkcija kartica "Konzola" i "Mreža" Firebuga, kao i neke mogućnosti otklanjanja pogrešaka u CSS-u.

Počevši od verzije 6, pojavio se Simple JavaScript Editor, koji također implementira jednu od Firebugovih funkcija i omogućuje pisanje i izvršavanje koda izravno u pregledniku.

Počevši od verzije 10, pojavio se Page Inspector koji vam omogućuje pregled HTML koda i CSS svojstva, odnosno implementira funkcije kartice “HTML”.

Ekstenzija Html Validator obično je odgovorna za provjeru valjanosti HTML koda. Samo njegova ikona koja označava broj pogrešaka početna stranica web stranice habrahabr.ru, možete vidjeti u donjem desnom kutu preglednika na slici s Page Inspectorom.

Također, ovom prilikom ću istaknuti da postoje mnoga proširenja za ovaj preglednik koja olakšavaju život, o čemu je već postojao odgovarajući članak na Habréu.

Google Chrome i Safari Ovi preglednici temeljeni na WebKitu imaju ugrađen razvojni alat Web Inspector koji je vrlo dobro razvijen i pruža gotovo istu funkcionalnost kao Firebug. Pritom mu moramo odati priznanje, ne usporava preglednik, što je uobičajeno kod njegovog “velikog brata”.

U Chromeu se može pozvati pritiskom na Ctrl+Shift+I ili jednostavno F12. Dobro je skriven u Safariju, a da biste ga koristili morate omogućiti razvojne mogućnosti u postavkama preglednika. Kasnije će razvojni alati postati dostupni iz stavke "Razvoj" u glavnom izborniku ili korištenjem tipkovničke prečice Ctrl+Alt+I.

Za provjeru valjanosti HTML koda također morate instalirati ekstenzije trećih strana. Na primjer, za Chrome to može biti valjanost. Još nismo uspjeli pronaći ništa prikladno za Safari.

Opera Opera također ima ugrađeni alat za programere koji se zove "Opera Dragonfly", a može se pozvati u bilo kojem trenutku korištenjem tipkovničke prečice Ctrl+Shift+I. Sličan je onome što nam predstavlja WebKit, ima slične mogućnosti i prednosti, iako je, po mom osobnom mišljenju, manje zgodan.

Otklanjanje pogrešaka i profiliranje poslužiteljskog kodaXdebug Kao što smo se dogovorili na početku, razmatramo slučaj kada poslužitelj koristi PHP. Ovdje je "klasična" metoda otklanjanja pogrešaka echo , print_r i var_dump , ali postoji i alat za uklanjanje pogrešaka, kao u najbolje kuće- Xdebug. Za mene osobno, zbog specifičnosti studiranja na institutu, izgledalo je "baš kao u Delphiju".

Ekstenzija xdebug omogućuje vam barem prolazak kroz vaš kod i pregled vrijednosti varijabli, što PHP programiranje vodi korak dalje. nova razina. Bio je odgovarajući članak o zamršenostima rada s xdebugom. XDebug je obično dostupan u GNU/Linux repozitoriju, a na Windowsima također nije teško instalirati ga kopiranjem dll datoteke.

Kada koristite ovo proširenje, dolazna veza (prema zadanim postavkama na portu 9000) stiže od poslužitelja do računala programera, koju ono mora obraditi. Da biste to učinili, morate u skladu s tim konfigurirati svoj IDE.

Usput, korištenje IDE-a također je neizostavan uvjet za napredak. Neki programeri smatraju da se razlika između programiranja u notepadu s označavanjem koda i u IDE-u može vidjeti samo na velikim projektima, ali osobno sam mišljenja da je razlika vidljiva čak iu programu “Hello world!”. - sama automatska zamjena imena i argumenata standardnih funkcija je vrijedna toga.

XHProfO proširenju Da, xdebug pruža mogućnosti profiliranja, ali osobno mi se sviđa Facebookov razvoj za te svrhe, XHProf. Da budem iskren, nisam proveo nikakve testove, ali vjeruje se da je ovo proširenje mnogo prikladnije za proizvodne poslužitelje i za profiliranje pod stvarnim opterećenjima.Instalacija Nažalost, ovo proširenje nije uključeno ni u jedno spremište. Uključeno je u PECL, ali iz nekog razloga njegova redovita instalacija često uzrokuje probleme. Iz tog razloga morate instalirati iz izvora.

# Dobijte izvore wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Raspakirajte izvore tar -xvf xhprof-0.9.2.tgz # Idite u direktorij koji sadrži kod ekstenzije cd xhprof -0.9. 2/extension/ # Sastavljamo i testiramo phpize ./configure make make test # Instaliramo na civiliziran način checkinstall
Konfiguracijska datoteka xhprof.ini pruža nam otprilike sljedeće mogućnosti:

proširenje=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Imenik za dnevnike
xhprof.output_dir="/var/log/xhprof/"

Profiliranje Direktorij koji dobivamo nakon raspakiranja arhive sadrži, osim izvora proširenja, web sučelje za proučavanje rezultata profiliranja i biblioteke za profiliranje aplikacije.

Navedimo primjer profiliranja. Morate uključiti sljedeće elemente u svoj aplikacijski kod:
// Početak skripte, omogućite profiliranje // opterećenja CPU-a i memorije xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* * Glavni aplikacijski kod */ // Kraj skripte, kompletno profiliranje, // zapis rezultata u dnevnik $xhprofData = xhprof_disable(); uključi_jednom XHPROF_DIR."/xhprof_lib/utils/xhprof_lib.php"; uključi_jednom XHPROF_DIR."/xhprof_lib/utils/xhprof_runs.php"; $xhprofRuns = novi XHProfRuns_Default(); $namespace = "neko-jedinstveno-ime"; $runId = $xhprofRuns->save_run($xhprofData, $namespace); echo "\n";
Ovdje konstanta XHPROF_DIR pokazuje na direktorij u koji smo raspakirali preuzetu arhivu.

Za analizu rezultata potrebno vam je isto web sučelje. Može se pronaći u direktoriju $XHPROF_DIR/xhprof_html/ - nazovimo ga tako. Na primjer, postavili smo ga na mjesto dostupno web poslužitelju, a dostupan je na example.com/system/xhprof/, a zatim za analizu rezultata rada moramo mu pristupiti na sljedeći način:

Example.com/system/xhprof/?run=%runId%&source=%namespace%

Dobit ćemo ovakav rezultat:

Profiliranje se može kontinuirano uključiti u kod aplikacije ili, na primjer, možete pokrenuti nasumično s određenom vjerojatnošću ili kada je prisutan određeni uvjet. Na primjer, ovako:

$needProfiler = (mt_rand(0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
U tom slučaju, ako imate pritužbe klijenata ili sumnje, možete se pozvati na rezultate profiliranja za određeno vremensko razdoblje. Pomoću parametra prostora imena možete odrediti koji je dio aplikacije (koja skripta, kontroler, akcija) profiliran.

Profiliranje SQL upita U pravilu je rad s bazom podataka usko grlo u aplikaciji. Iz tog razloga preporučuje se profiliranje upita. Na primjer, razmislite o dijelu klase koja obavija mysql funkcije proširenja. Da, znam da ovo proširenje nije baš popularno i da ga žele mrtvo ni manje ni više nego dobri stari IE6. Ne zagovaram korištenje, to je samo klasa koju imam pri ruci.

/** * Upit * @param string $sql Upit * @param array $params Parametri * @param string $query Prevedeni upit * @return array Rezultat */ public function query($sql, array $params = array(), & $query = "") ( $start = microtime(TRUE); // Izvođenje upita, uključujući "zaštitu" parametara $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData( $sql , $time); // Vrati rezultat ) private function _addProfilerData($query, $time) ( if (is_array(self::$profilerData)) ( self::$profilerData = array("query" => $ upit, " vrijeme" => $vrijeme); ) ) javna funkcija __destruct() ( if (is_array(self::$profilerData)) ( $this->_writeProfilerData(); self::$profilerData = FALSE; ) // Prekini vezu s bazom podataka ) privatna funkcija _writeProfilerData() ( $values = array(); foreach (self::$profilerData as $row) ( $query = mysql_real_escape_string($row["query"], $this->con ); $vrijeme = ( float)$row["time"]; $hash = crc32($row["query"]); $values = "($hash, "$query", $time)"; ) if ($values) ( $ strValues = implode(", ", $values); $sql = "INSERT DELAYED INTO `profiler_queries` (`query_hash`, `query`, `work_time`) VRIJEDNOSTI $strValues"; @mysql_query($sql, $this->con); ) )
Ovdje su podaci profiliranja upita pohranjeni u tablici profiler_queries. Ova tablica može biti tipa tablice MyISAM ili Archive jer pružaju mogućnost izvođenja lijenih umetanja, što ne dodaje nepotrebnu latenciju odgovoru profiliranja. Isto i za bolja pretraga upita u tablici, bolje je kreirati stupac tipa INT , gdje će biti zapisan crc32 hash upita za koji želite kreirati indeks.

Zaključak Članak je ispao prilično dugačak. Možda sam ovdje pretjerao i dotaknuo se već spomenutih tema, ali da sam jednom pročitao ovako nešto - članak u kojem su skupljene sve informacije i dane korisne poveznice, dao bi mi uz neprocjenjivu pomoć. Nadam se da će moj članak pomoći nekome na putu do prosvjetljenja.