Napaka spletne strani za odpravljanje napak. Napake skripta v Internet Explorerju. Vzroki in načini odprave. Profiliranje poizvedb SQL Odpravljanje napak na spletni strani

Med brskanjem po internetu internetni brskalnik Raziskovalec lahko prikaže sporočila, da stran vsebuje napake in morda ne bo prikazana pravilno. Oglejmo si nekaj načinov za odpravo te težave.

Navodilo

  • Če v brskalniku ni vidnih težav, razen občasne napake, lahko poskusite izklopiti razhroščevanje skripta, da se sporočilo ne prikaže več (če se napaka pojavi na več kot enem mestu, ampak na več mestih hkrati, nadaljujte na naslednji korak). V meniju Orodja odprite Internetne možnosti, izberite zavihek Napredno in potrdite polje poleg možnosti Prepreči razhroščevanje skripta. Če morate izklopiti obvestilo o vseh napakah, počistite potrditveno polje »Pokaži obvestilo o vsaki napaki skripta«.
  • Poskusite med brskanjem iz drugega računa ali drugega računalnika odpreti spletno mesto, ki povzroča napako, da preverite, ali je težava lokalna. Če se pojavi napaka, jo najverjetneje povzroča napačna koda spletne strani. V tem primeru lahko onemogočite razhroščevanje skripta tako, da sledite navodilom v prejšnjem koraku. Če težava izgine, ko brskate po spletnem mestu z drugim računalnikom ali računom, nadaljujte z naslednjim korakom.
  • Možno je, da Internet Explorer ne blokira aktivnih skriptov Jave in ActiveX, ki določajo prikaz informacij na strani v času brskanja. Če želite odpraviti težavo, morate ponastaviti varnostne nastavitve brskalnika. Če želite to narediti, v meniju »Orodja« izberite »Internetne možnosti« in pojdite na zavihek »Varnost«. Kliknite gumb "Privzeto" in nato "V redu". Če se težava po ponovnem zagonu strani, ki je povzročila napako, nadaljuje, poskusite naslednjo metodo.
  • Kot veste, brskalnik shrani začasne datoteke in kopije strani v ločeno mapo za poznejši dostop do njih. Če velikost mape postane prevelika, se lahko na nekaterih straneh prikažejo napake. Težavo lahko rešite tako, da občasno počistite mapo začasnih datotek. Če želite to narediti, odprite pogovorno okno Internetne možnosti v meniju Orodja. Na zavihku Splošno v skupini Zgodovina kliknite gumb Izbriši. Potrdite polja za začasne internetne datoteke, piškotke, zgodovino, podatke spletnega obrazca in kliknite V redu.
  • So pa seveda še drugi – zagotovo jih bom omenil.

    Firebug za Firefox

    Ne vem zagotovo ali firebug prednik drugih orodij za razvijalce, vendar je vsekakor najbolj priljubljen, priročen in funkcionalen do sedaj.

    Firebug je dodatek za Firefox, kar pomeni, da ga je treba prenesti s spletnega mesta z dodatki Firefox in namestiti.

    Če želite poklicati požarni hrošč, samo pritisnite F12.

    Lastnosti tega dodatka:

    • Pregled in urejanje dinamično spreminjajočega se HTML-ja;
    • sprotno urejanje CSS;
    • Odpravljanje napak v JavaScriptu ukazna vrstica za izvajanje skriptov;
    • Spremljanje omrežnih zahtev - vidite lahko velikost in čas prenosa datotek in skriptov, glave zahtev;
    • Razčlenjevalnik DOM.

    O teh lastnostih lahko govorite podrobno dolgo, vendar mislim, da so znane vsem našim bralcem, in če ne - podrobne informacije je na domači strani Firebug ali enako v prevodu Ilya Kantorja.

    Poleg samega firebuga boste morda potrebovali uporaben losjon njemu - firecookie, s katerim (presenečenje:-) lahko pregledujete in spreminjate piškotke.

    Orodna vrstica za spletne razvijalce za Firefox

    Še en uporaben dodatek k Ognelisu. Videti je takole:

    Pojdimo skozi točke.

    Onemogoči

    Omogoča izklop JavaScripta, onemogočanje uporabe predpomnilnika, kar je zelo uporabno pri razvoju (omogoča vam, da ste prepričani, da je stran naložena z najnovejše posodobitve), prekličite uporabljene barve na strani in jih nadomestite s standardnimi, onemogočite pošiljanje v glavi napotitelja (strani, s katere je bil opravljen prehod).

    Piškotki

    Uporabna možnost za delo s piškotki: lahko jih pregledujete, brišete, blokirate in dodajate.

    css

    Ta meni vsebuje najbolj kul funkcijo orodne vrstice za razvijalce - sprotno urejanje CSS. Poleg tega je mogoče videti css, onemogočiti in tako naprej in tako naprej. Po mojem mnenju je prisotnost bližnjic na tipkovnici tukaj zelo koristna (CTRL + SHIFT + C vam na primer omogoča, da takoj preidete na ogled slogov strani)

    Obrazci

    Vse za delo z obrazci: prikaz gesel, prikaz informacij o obrazcih, pretvorba metod obrazcev (GET »POST in obratno) in še veliko več. Uporabna funkcija “Populate Form Fields” za samodejno izpolnjevanje polj obrazcev (na primer pri testiranju spletnega mesta, ko je funkcija zapomnitve gesla onemogočena. Sicer pa v tem odstavku ne vidim nič uporabnega.

    slike

    Obstaja uporabna funkcija za izklop slik – da vidite, kako je videti vaše spletno mesto brez slik. Slike je mogoče obkrožiti, prikazati njihove velikosti, prikazati atribute alt.

    Informacije

    Ta meni ima veliko možnosti. Koristno je lahko prikazati atribute razreda in id na strani. Poleg tega je zanimiv element »Ogled barvnih informacij« - za hitro pridobivanje informacij o barvah, ki se uporabljajo na strani. "Ogled velikosti dokumenta" - ogled velikosti strani. "View Response Headers" - ogled glav strani.

    Razno

    Najpogosteje uporabljena funkcija je brisanje predpomnilnika. Poleg tega je tukaj na voljo "Page ruler" - ravnilo, "Page Magnifier" - povečevalno steklo in "Line guides" - nekaj vrstic, ki so lahko uporabne za obrezovanje predloge.

    oris

    Izbor različnih elementov strani - tabel, naslovov, povezav, okvirjev, blokov. Spremeni velikost vam omogoča, da spremenite velikost okna brskalnika, da ustreza standardnim zaslonskim razširitvam. Tukaj so shranjena orodja za preverjanje strani. Tako lokalne kot zunanje. Priročno in hiter dostop preverjanje HTML, CSS itd. Za preverjanje HTML lahko uporabite bližnjico na tipkovnici CTRL+SHIFT+H.

    ogled vira

    Pogled izvorna koda. Možnost ogleda v zunanji aplikaciji, ogled generirane kode.

    Tisti na desni mi je najljubši. Je hiter HTML, CSS validator in indikator napak JavaScript. Če ni težav, je ikona zelena, če so težave, pa rdeča.

    Orodna vrstica za razvijalce Internet Explorerja

    Od 8.0 naprej je odpravljanje napak že vgrajeno v ta brskalnik. Z lahkoto se imenuje Tipka F12. Res je, da je nesrečen kot program iz 90-ih.

    Obstaja pa veliko bolj kul orodje za ta brskalnik, tako imenovano orodno vrstico za razvijalce Internet Explorerja, ki jo lahko prenesete s povezave.

    Na videz ta orodna vrstica seveda izgleda kot firebug, a žal še ni zrasla do tega. Čeprav ima po drugi strani nekaj funkcij, ki jih firebug nima. Orodno vrstico za razvijalce Internet Explorerja bi imenoval hibrid Firebuga in spletni razvijalec firefox Orodna vrstica.

    Tako kot pri firebugu obstaja možnost pregleda elementa s preprostim klikom. Ampak, če lahko takoj vidimo oblazinjenja in robove, potem te možnosti tukaj ni.

    Poleg tega orodna vrstica za razvijalce Internet Explorerja ne posodablja dinamično drevesa elementov, kot to počne Firebug. Se pravi, če nekaj spremenimo na strani z uporabo js, ​​ne bomo videli ničesar z uporabo te orodne vrstice.

    Od tistega, v čemer lahko uživate – sprotno spreminjanje CSS (preprost način, da najdete, kaj vdreti :), možnost onemogočanja CSS in slik, možnost hitrega brisanja predpomnilnika in igranja s piškotki, hiter dostop do preverjanja.

    Najbolj okusno: vgrajen je izbirnik barv, ki vam omogoča, da s kapalko dobite katero koli barvo s strani. (za ff obstaja ločen vtičnik ColorZilla).

    Vrstica za odpravljanje napak za Internet Explorer

    DebugBar za Internet Explorer lahko prenesete s navedene povezave.

    Zanimiva razširitev sama po sebi. Nameščeno kot dodatna plošča k brskalniku:

    Iz neznanega razloga obstaja vgrajen iskalnik, kapalka, možnost spreminjanja velikosti okna in spet iz nekega razloga možnost pošiljanja strani prijatelju za milo. Čeprav bi lahko bilo koristno. A nisem uspel izkoristiti te priložnosti.

    Poleg tega je inšpektor:

    Metoda pregleda s klikom ali kazanjem razvijalcem ni ustrezala: izmislili so si bolj zanimivo stvar. V vrstici DebugBar morate cilj povleči do želenega elementa, da ga vidite v drevesu. Ni možnosti za urejanje CSS. Obstaja pa validator in vgrajena konzola js.

    In če se poglobite v nastavitve, lahko najdete tole:

    Tako smešno kot žalostno.

    Znano je, da bo orodna vrstica za razvijalce vgrajena v osmi raziskovalec. Podoben bo opisanemu v tretjem odstavku, vendar upamo, da bo boljši.

    Odpravljanje napak DragonFly za Opera

    DragonFly je vgrajen v Opera od različice 9.5, zato ga ni treba namestiti. Če želite aktivirati Dragonfly, pojdite na Orodja → Napredno → Orodja za razvijalce. In če v angleščini, potem Orodja → Napredno → Orodja za razvijalce.

    Takoj vas bom opozoril, da je DragonFly v fazi Alpha2, kar pojasnjuje številne njegove napake.

    Seznam funkcij:

    • inšpektor DOM;
    • Kliknite Pregled (spet ne bomo videli oblazinjenja kot v FireFoxu);
    • Urejanje;
    • Hiter dostop do konzole napak.

    DF je nekaj podobnega ločeni strani v okvirju. Če ga odprete, bo odprt za vse zavihke (za razliko od firebuga). Zato moramo pred pregledom elementa s seznama izbrati stran, ki si jo želimo ogledati.

    Na žalost tukaj, tako kot v Internet Explorerju, orodna vrstica Dav ne prikazuje dinamično ustvarjenih elementov. In na splošno, ko pregledamo stran, se ne izvaja JavaScript: povezave in gumbi se ne klikajo. Upajmo, da bomo, ko bo DragonFly izšel, videli vse te funkcije.

    Debug WEB Inspector v Safariju

    Takoj bom povedal o brskalniku safari Informacijo sem požvižgal, zato, kot pravijo, ne odgovarjam za ustreznost gradiva.

    Če želite omogočiti element »Razvoj« v meniju Safari, morate omogočiti ustrezen element v nastavitvah (zavihek »Napredno«):

    V meniju »Razvoj« so nam na voljo naslednje funkcije:

    Oglejmo si podrobneje WEB inšpektor:

    Privzeto se inšpektor odpre v načinu pogleda HTML. Vendar ga je mogoče preklopiti v način pogleda DOM. Če želite to narediti, je na zgornji plošči stikalo. Ko miškin kazalec premaknete nad element v inšpektorju, bo ta označen na sami strani. Ne morete videti oblazinjenja, spreminjati oznak ali CSS na letenju ali videti dinamičnih sprememb DOMe na letenju, kot ne morete v FireBugu. Ampak, vidite, izgleda zelo lepo.

    Če želite delati z inšpektorjem v oknu brskalnika, lahko kliknete gumb v spodnjem levem kotu.

    Tudi v safariju je na voljo funkcija, kot je »Omrežna časovnica« (gumb »Omrežje« v inšpektorju):

    Jasno lahko vidite, kdaj in kako dolgo so datoteke naložene. Ogledate si lahko tudi glave zahtev, žal pa si ne morete ogledati same vsebine.

    Odpravljanje napak za razvijalce v brskalniku Google Chrome

    Lame se je rodil v napredni obliki in takoj ima, čeprav zaenkrat ukrivljena, a še vedno orodja za razvijalce.

    • Inšpektor DOM;
    • razhroščevalnik javascript;
    • Konzola JavaScript.

    Če želite pregledati element, ga kliknite z desno tipko miške in kontekstni meni izberite "Ogled kode elementa":

    Funkcionalnost je enaka kot v brskalniku Safari: elementi so označeni ob lebdenju, vendar urejanje CSS in HTML ni na voljo, spremembe v DOM se ne sledijo. Le gumb v levem spodnjem kotu, ki bi moral pripeti inšpektor na okno brskalnika, ne deluje.

    V zavihku "Viri" lahko vidimo naslednje:

    Nekoliko drugačna od lestvice v safariju. Prosojne v tem diagramu so relativne velikosti datotek, polne barve pa čas prenosa. Tako ali drugače je očitno, da ta del Chroma še zdaleč ni dokončan.

    V tem članku sem pregledal najbolj znane razširitve in vgrajena orodja za brskalnike.

    Obstajajo tudi drugi, na primer:

    • Internet Explorer WEB Development Helper je dober pomočnik za razvijalce ASP.NET (Internet Explorer);
    • Orodna vrstica za spletne razvijalce - orodna vrstica za Internet Explorer in FireFox. Obstaja več uporabnih funkcij;
    • WEB Accessibility Toolbar - orodna vrstica za Internet Explorer. Nič zanimivega.

    Če obstajajo dodatki, ki jih nisem omenil, a bi se splačalo, ali obstajajo funkcije za omenjene razširitve, ki sem jih spregledal, napišite.

    Uporabite na zdravje!

    Pisanje HTML je super, toda kako veš, kje je napaka, ko nekaj ne deluje? Ta članek opisuje več orodij, ki vam pomagajo najti in popraviti napake v HTML.

    Odpravljanje napak ni strašljivo

    Med pisanjem neke kode gre običajno vse dobro do trenutka, ko narediš napako. Vaša koda torej ne deluje ali ne deluje tako, kot ste nameravali. Če poskušate prevesti nedelujoč program Rust, bo prevajalnik sporočil napako:

    V tem primeru je sporočilo o napaki razmeroma lahko razumljivo - "neprekinjen niz dvojnih narekovajev". Če natančno pogledate println! (Hello, world!"); , boste opazili, da ni dvojni narekovaj. Seveda lahko postanejo sporočila o napakah veliko težje razumljiva, ko vaša koda raste, in celo najpreprostejši primeri so lahko zastrašujoči za tiste, ki ne vedo ničesar o Rustu.

    Toda ne bojte se odpravljati napak! Za udobno pisanje in odpravljanje napak v kateri koli kodi morate razumeti jezik in njegova orodja.

    HTML in odpravljanje napak

    HTML ni tako težko razumeti kot Rust. HTML ni preveden v nobeno drugo obliko, preden ga brskalnik razčleni in prikaže rezultat (se interpretira, ne prevede). Sintaksa elementi HTML veliko jasnejši od "pravih programskih jezikov", kot so Rust, JavaScript ali Python. Način, kako brskalniki berejo HTML, je več toleranten kot programski jeziki, ki svojo kodo interpretirajo strožje. To je hkrati slabo in dobro.

    tolerantna koda

    Kaj torej pomeni toleranten? Na splošno velja, da ko se zamočite v kodi, boste naleteli na dve vrsti napak:

    • Sintaksne napake: To so črkovalne napake, kot zgoraj v primeru Rust. Te je običajno enostavno popraviti, če poznate sintakso jezika in veste, kaj pomenijo sporočila o napakah.
    • Logične napake: To so napake, ki se pojavijo, ko je sintaksa pravilna, vendar koda ne izpolnjuje svojega namena, to je, da se program ne izvaja pravilno. Te je težje popraviti kot sintaktične, saj se ne prikažejo sporočila, ki bi označevala mesto, kjer ste naredili napako.

    HTML ne trpi zaradi skladenjskih napak, ker brskalnik tolerantno bere kodo, v smislu, da je strani mogoče upodobiti, tudi če so prisotne sintaksne napake. Brskalniki imajo vgrajena pravila za interpretacijo slabo napisanih oznak in lahko zaženete nekaj, tudi če ste mislili nekaj drugega. To je lahko resen problem!

    Na opombo: HTML je berljiv, ker je bilo ob nastanku spleta odločeno, da se ljudem omogoči objavljanje vsebine, tudi če je koda napačna, saj je to veliko pomembnejše od zagotavljanja, da je sintaksa popolnoma pravilna. Splet trenutno ne bi bil tako priljubljen, če bi bil strog do novincev.

    Aktivno učenje: uvajanje tolerantnega kodeksa

    Čas je, da raziščete naravo tolerantne kode v HTML.


    Preverjanje HTML

    Iz zgornjega primera je jasno, da je vredno preveriti veljavnost HTML-ja. V preprostem zgornjem primeru lahko preprosto pregledate vso kodo in poiščete napake, kaj pa ogromne, zapletene strani?

    Najbolje je, da stran preverite v storitvi za preverjanje veljavnosti oznak. Ustvaril in vzdržuje ga W3C, organizacija, odgovorna za specifikacijo HTML, CSS in drugih spletnih tehnologij. Storitev bo preverila vaš HTML in poročala o napakah v njem.

    HTML lahko preverite na naslovu tako, da naložite datoteko ali jo preprosto kopirate na stran.

    Aktivno učenje: preverjanje veljavnosti dokumenta HTML

    1. V brskalniku odprite storitev preverjanja oznak.
    2. Preklopite v način Preverjanje z neposrednim vnosom.
    3. Kopirajte celotno kodo dokumenta (ne le telesa) in jo prilepite v vnosni prostor.
    4. Pritisnite Preverite (ček).

    Videli boste seznam napak in druge informacije.

    Delo s sporočili o napakah

    Običajno je takoj jasno, kaj sporočila pomenijo, včasih pa je treba poskusiti razumeti, kaj je. Zdaj bomo pregledali vse napake in analizirali, kaj pomenijo. Upoštevajte, da sporočila vključujejo vrstico in stolpec kode za lažje iskanje napak.

    • »Končna oznaka li je bila implicirana, vendar so bili odprti elementi« (2 primera): Ni eksplicitne končne oznake, čeprav brskalnik ugiba, kje bi morala biti. Sporočilo kaže na vrstico za tisto, kjer je bila pričakovana končna oznaka, vendar boste našli pravo mesto.
    • "Nezaprt element močan": To je zelo preprosta napaka- element) pomeni, da je njegova vsebina zelo pomembna, resna ali nujna. Brskalniki običajno upodabljajo vsebino v krepkem tisku."> ni zaprto in sporočilo kaže neposredno na začetno oznako.
    • »Končna oznaka močno krši pravila gnezdenja«: element je nepravilno ugnezden – na tej ravni ni ustrezne začetne oznake.
    • "Konec datoteke je dosežen, ko je znotraj vrednosti atributa. Ignoriranje oznake": skrivnostno sporočilo. Dejstvo je, da je nekje (najverjetneje na koncu dokumenta) lastnost elementa napačno registrirana in v tej lastnosti se je pojavil konec datoteke. Povezava ni vidna v brskalniku - najverjetneje je težava poleg nje.
    • »Viden je bil konec datoteke in bili so odprti elementi«: datoteka se je končala, vendar nekateri elementi niso zaprti. Sporočilo označuje konec datoteke, v tem primeru element ni zaprt primer: povezava do domače strani Mozille ↩
    ↩ ↩

    Precej pogosto lahko uporabniki opazijo situacijo, ko se v brskalniku (IE) pojavi sporočilo o napaki skripta. Če je situacija izolirana, potem ne bi smeli skrbeti, ko pa takšne napake postanejo redne, potem morate razmisliti o naravi te težave.

    Napaka skripta v Internet Explorerju je običajno posledica tega, da brskalnik ne obravnava pravilno kode strani HTML, prisotnosti začasnih internetnih datotek, nastavitev računa in številnih drugih razlogov, se bo razpravljalo v tem gradivu. Upoštevane bodo tudi metode za rešitev tega problema.

    Preden nadaljujete s pogostimi metodami za diagnosticiranje težav z Internet Explorerjem, ki povzročajo napake skripta, se morate prepričati, da se napaka ne pojavi le na enem določenem mestu, temveč na več spletnih straneh hkrati. Prav tako morate preveriti spletno stran, kjer se pojavi težava, pod drugo račun, v drugem brskalniku in v drugem računalniku. To bo zožilo iskanje vzroka napake in izključilo ali potrdilo hipotezo, da se sporočila pojavljajo kot posledica prisotnosti določenih datotek ali nastavitev v računalniku.

    Blokiranje aktivnih skriptov Internet Explorerja, ActiveX in Jave

    Aktivno skriptiranje, kontrolniki ActiveX in Java vplivajo na način generiranja in prikaza informacij na spletnem mestu in so lahko pravi vzrok za prej opisano težavo, če so blokirani na uporabnikovem računalniku. Če se želite prepričati, da se zaradi tega pojavijo napake skripta, morate samo ponastaviti varnostne nastavitve brskalnika. Če želite to narediti, upoštevajte naslednje smernice.

    • Odprite Internet Explorer 11
    • Storitev

    • V oknu pojdite na zavihek Varnost
    • Nato kliknite gumb Privzeto in nato gumb v redu

    Začasne datoteke Internet Explorerja

    Vsakič, ko odprete spletno stran, Internet Explorer shrani lokalno kopijo te spletne strani na vaš računalnik v tako imenovane začasne datoteke. Ko je takih datotek preveč in velikost mape z njimi doseže nekaj gigabajtov, lahko pride do težav s prikazom spletne strani, in sicer se pojavi sporočilo o napaki skripta. Redno brisanje mape začasnih datotek lahko pomaga odpraviti to težavo.
    Če želite izbrisati začasne internetne datoteke, sledite spodnjim korakom.

    • Odprite Internet Explorer 11
    • Storitev
    • V oknu pojdite na zavihek So pogosti
    • V poglavju Zgodovina brskalnika pritisni gumb Izbriši ...

    • V oknu Izbriši zgodovino brskanja potrdite polja poleg predmetov Začasne datoteke interneta in spletnih mest, Piškotki in podatki spletnega mesta, Revija
    • Kliknite gumb Izbriši

    Delovanje protivirusne programske opreme

    Pri delu so možne napake v scenariju protivirusni program ko blokira aktivne skripte, kontrolnike ActiveX in Java na strani ali mape za shranjevanje začasnih datotek brskalnika. V tem primeru se obrnite na dokumentacijo nameščenega protivirusnega izdelka in onemogočite skeniranje map za shranjevanje začasnih internetnih datotek ter blokiranje interaktivnih predmetov.

    Nepravilna obdelava kode strani HTML

    Praviloma se pojavi na določenem spletnem mestu in pomeni, da koda strani ni popolnoma prilagojena za delo z Internet Explorerjem. V tem primeru je najbolje onemogočiti razhroščevanje skripta v brskalniku. Če želite to narediti, sledite tem korakom.

    • Odprite Internet Explorer 11
    • V zgornjem desnem kotu brskalnika kliknite ikono Storitev v obliki zobnika (ali kombinacijo tipk Alt + X). Nato v meniju, ki se odpre, izberite
    • V oknu pojdite na zavihek Dodatno
    • Nato počistite polje Pokaži obvestilo za vsako napako skripta in pritisnite gumb v redu.

    To je seznam najbolj pogosti vzroki, ki povzročajo skriptne napake v Internet Explorerju, zato, če ste naveličani takih sporočil, bodite malo pozorni in enkrat za vselej rešite težavo.

    Vklopljeno ta trenutek obstaja veliko število različnih brskalnikov, ki do neke mere podpirajo obstoječe standarde HTML. Osebno imam raje brskalnik podjetja Mozilla Corporation. Ta brskalnik ima dolgo zgodovino (temelji na znanem brskalniku Netscape Navigator). Ta brskalnik mi je všeč tudi zato, ker podpira sistem vtičnikov - ločeno razdeljenih dodatkov, ko je povezan, lahko spremenite funkcionalnost in jo prilagodite svojim potrebam. In končno, ta brskalnik se prosto distribuira z odprtokodnimi kodami, kar je prav tako pomembno. Zato sem se odločil opisati možnosti, ki jih ta brskalnik ponuja ne le uporabniku, temveč tudi razvijalcu spletnih strani, kako enostaven in priročen je lahko postopek odpravljanja napak v pisnih izdelkih.

    Mozilla Firefox je eden najbolj priljubljenih brskalnikov med razvijalci in spletnimi razvijalci. Njihovo pozornost pritegne zaradi možnosti, ki jih ta brskalnik ponuja za odpravljanje napak v ustvarjenih projektih, odpravljanje napak in izboljšave. Brskalnik je standardno opremljen s konzolo Java (ali "konzolo za napake"). Ta pripomoček vam omogoča odpravljanje napak v vdelanih java skriptih. Toda vtičniki tretjih oseb dajejo brskalniku veliko več funkcionalnosti, ki jih je mogoče prenesti in namestiti z uradne spletne strani fundacije Mozilla. Zdaj si želim ogledati dva od teh vtičnikov - Web Developer in Firebug. Oba dodatka lahko prenesete z zgornjih povezav z uradnega mesta dodatkov. Po njihovi namestitvi in ​​ponovnem zagonu brskalnika ima razvijalec veliko priložnosti, ki jih bom opisal spodaj, po vrsti za vsakega od vtičnikov.

    vtičnik firebug

    Kot je navedeno na uradni strani: »Firebug se integrira z brskalnikom Firefox, da močno obogati nabor orodij za razvijalce. Lahko boste urejali, odpravljali napake in raziskovali CSS, HTML in Javascript v živo na kateri koli spletni strani.« In res je. Razmislite o nekaterih funkcijah tega vtičnika, in sicer:

    • Oglejte si in uredite HTML.
    • Gradnja CSS.
    • Spremljanje omrežnih zahtev
    • Odpravljanje napak v JavaScriptu
    • JavaScript raziskave
    • Beleženje za JavaScript

    To ni popoln seznam vseh njegovih funkcij. Ker je projekt odprtokoden, lahko vsak spremeni in doda funkcionalnost.

    Za delo z vtičnikom morate pritisniti tipko F12 (Ctrl-F12 za delo v ločenem oknu). Po uspešni izstrelitvi dobimo naslednje - Slika 1a, 1b.

    Slika 1a. Začetno okno vtičnika firebug.


    Slika 1b. Začetno okno vtičnika firebug.

    Nato se začne dejansko delo z vtičnikom. Recimo, da moramo najti ta ali oni predmet v kodi HTML ali določiti, kako natančno je implementiran z uporabo CSS trenutni fragment. Če želite to narediti, morate samo z miško izbrati potrebne možnosti v meniju okna vtičnika. V spodnjem primeru je to HTML v načinu pregleda. Zdaj, ko gremo na stran dokumenta, bomo pod kazalcem miške opazili pravokotno območje, ki tukaj prikazuje območje, s katerim delamo. V oknu vtičnika bomo videli uporabljene parametre HTML in CSS. Prav tako lahko s klikom na vsako od njih izvajate spremembe in jih spremljate v dinamiki. Opisana dejanja so prikazana na slikah 2,3,4.



    Pri razvoju tega projekta je bil zgoraj opisani vtičnik uporabljen prav za te namene. Čeprav tukaj ni bil uporabljen noben java-skript, lahko za odpravljanje napak uporabite tudi vtičnik firebug. Primer odpravljanja napak je prikazan na sliki 5.


    Na tem, kot je opisano zgoraj, funkcionalnost te razširitve ni omejena. Lahko ga v celoti preučite in uporabite za svoje potrebe, tako da ga prenesete s navedenih povezav po namestitvi Mozilla Firefox.

    vtičnik za spletne razvijalce

    Spletni razvijalec - druga razširitev za Brskalnik Mozilla Firefox, zelo zmogljiv in funkcionalen, ki omogoča hitro in učinkovito odpravljanje napak. Po namestitvi se bo v oknu brskalnika pojavila dodatna orodna vrstica, prikazana na sliki 6.

    Nadaljnje delo z vtičnikom je intuitivno. Na primer, če moramo opraviti delo s CSS (čeprav ne tako popolnoma funkcionalno kot pri vtičniku Firebug), lahko kliknemo meni CSS in onemogočimo, omogočimo ali onemogočimo.

    Za razvijalca je zelo priročno, da lahko vidi, kako bo njegov projekt videti na monitorjih z različnimi ločljivostmi. Če želite to narediti, uporabite zavihek Spremeni velikost. Tukaj lahko ročno nastavite potrebna dovoljenja zaslona (800x600, 1024x768 itd.), nato pa prosto preklapljate med njimi, povečujete ali pomanjšujete vsebino. Ta funkcija je prikazana na sliki 7.

    Ta razširitev ima tudi bogate funkcionalnosti, ki so vse opisane in na voljo na uradnih straneh.

    Seznam uporabljenih virov

    • 1. www.getfirebug.com
      Uradna spletna stran dodatka.
    • 2. http://addons.mozilla.org
      Mozillino uradno spletno mesto, ki gosti vtičnike za brskalnik Firefox, informacije za razvijalce, informacije o uporabi vtičnikov.
    • 3. http://chrispederick.com/work/web-developer/
      Uradno spletno mesto razvijalca vtičnika WebDeveloper.

    Med brskanjem po internetu lahko Internet Explorer prikaže sporočila, da stran vsebuje napake in morda ne bo prikazana pravilno. Oglejmo si nekaj načinov za odpravo te težave.

    Navodilo

  • Če v brskalniku ni vidnih težav, razen občasne napake, lahko poskusite izklopiti razhroščevanje skripta, da se sporočilo ne prikaže več (če se napaka pojavi na več kot enem mestu, ampak na več mestih hkrati, nadaljujte na naslednji korak). V meniju Orodja odprite Internetne možnosti, izberite zavihek Napredno in potrdite polje poleg možnosti Prepreči razhroščevanje skripta. Če morate izklopiti obvestilo o vseh napakah, počistite potrditveno polje »Pokaži obvestilo o vsaki napaki skripta«.
  • Poskusite med brskanjem iz drugega računa ali drugega računalnika odpreti spletno mesto, ki povzroča napako, da preverite, ali je težava lokalna. Če se pojavi napaka, jo najverjetneje povzroča napačna koda spletne strani. V tem primeru lahko onemogočite razhroščevanje skripta tako, da sledite navodilom v prejšnjem koraku. Če težava izgine, ko brskate po spletnem mestu z drugim računalnikom ali računom, nadaljujte z naslednjim korakom.
  • Možno je, da Internet Explorer ne blokira aktivnih skriptov Jave in ActiveX, ki določajo prikaz informacij na strani v času brskanja. Če želite odpraviti težavo, morate ponastaviti varnostne nastavitve brskalnika. Če želite to narediti, v meniju »Orodja« izberite »Internetne možnosti« in pojdite na zavihek »Varnost«. Kliknite gumb "Privzeto" in nato "V redu". Če se težava po ponovnem zagonu strani, ki je povzročila napako, nadaljuje, poskusite naslednjo metodo.
  • Kot veste, brskalnik shrani začasne datoteke in kopije strani v ločeno mapo za poznejši dostop do njih. Če velikost mape postane prevelika, se lahko na nekaterih straneh prikažejo napake. Težavo lahko rešite tako, da občasno počistite mapo začasnih datotek. Če želite to narediti, odprite pogovorno okno Internetne možnosti v meniju Orodja. Na zavihku Splošno v skupini Zgodovina kliknite gumb Izbriši. Potrdite polja za začasne internetne datoteke, piškotke, zgodovino, podatke spletnega obrazca in kliknite V redu.
  • Precej pogosto lahko uporabniki opazijo situacijo, ko se v brskalniku Internet Explorer (IE) pojavi sporočilo o napaki skripta. Če je situacija izolirana, potem ne bi smeli skrbeti, ko pa takšne napake postanejo redne, potem morate razmisliti o naravi te težave.

    Napako skripta v Internet Explorerju običajno povzroči brskalnik, ki ne pravilno obdeluje kode strani HTML, prisotnost začasnih internetnih datotek, nastavitve računa in številni drugi razlogi, o katerih bomo razpravljali v tem gradivu. Upoštevane bodo tudi metode za rešitev tega problema.

    Preden nadaljujete s pogostimi metodami za diagnosticiranje težav z Internet Explorerjem, ki povzročajo napake skripta, se morate prepričati, da se napaka ne pojavi le na enem določenem mestu, temveč na več spletnih straneh hkrati. Prav tako morate preveriti spletno stran, na kateri se pojavlja ta težava, pod drugim računom, v drugem brskalniku in v drugem računalniku. To bo zožilo iskanje vzroka napake in izključilo ali potrdilo hipotezo, da se sporočila pojavljajo kot posledica prisotnosti določenih datotek ali nastavitev v računalniku.

    Blokiranje aktivnih skriptov Internet Explorerja, ActiveX in Jave

    Aktivno skriptiranje, kontrolniki ActiveX in Java vplivajo na način generiranja in prikaza informacij na spletnem mestu in so lahko pravi vzrok za prej opisano težavo, če so blokirani na uporabnikovem računalniku. Če se želite prepričati, da se zaradi tega pojavijo napake skripta, morate samo ponastaviti varnostne nastavitve brskalnika. Če želite to narediti, upoštevajte naslednje smernice.

    • Odprite Internet Explorer 11
    • Storitev

    • V oknu pojdite na zavihek Varnost
    • Nato kliknite gumb Privzeto in nato gumb v redu

    Začasne datoteke Internet Explorerja

    Vsakič, ko odprete spletno stran, Internet Explorer shrani lokalno kopijo te spletne strani na vaš računalnik v tako imenovane začasne datoteke. Ko je takih datotek preveč in velikost mape z njimi doseže nekaj gigabajtov, lahko pride do težav s prikazom spletne strani, in sicer se pojavi sporočilo o napaki skripta. Redno brisanje mape začasnih datotek lahko pomaga odpraviti to težavo.
    Če želite izbrisati začasne internetne datoteke, sledite spodnjim korakom.

    • Odprite Internet Explorer 11
    • V zgornjem desnem kotu brskalnika kliknite ikono Storitev v obliki zobnika (ali kombinacijo tipk Alt + X). Nato v meniju, ki se odpre, izberite
    • V oknu pojdite na zavihek So pogosti
    • V poglavju Zgodovina brskalnika pritisni gumb Izbriši ...

    • V oknu Izbriši zgodovino brskanja potrdite polja poleg predmetov Začasne datoteke interneta in spletnih mest, Piškotki in podatki spletne strani, Revija
    • Kliknite gumb Izbriši

    Delovanje protivirusne programske opreme

    Napake skripta so možne zaradi delovanja protivirusnega programa, ko blokira aktivne skripte, kontrolnike ActiveX in Java na strani ali mape za shranjevanje začasnih datotek brskalnika. V tem primeru se obrnite na dokumentacijo nameščenega protivirusnega izdelka in onemogočite skeniranje map za shranjevanje začasnih internetnih datotek ter blokiranje interaktivnih predmetov.

    Nepravilna obdelava kode strani HTML

    Praviloma se pojavi na določenem spletnem mestu in pomeni, da koda strani ni popolnoma prilagojena za delo z Internet Explorerjem. V tem primeru je najbolje onemogočiti razhroščevanje skripta v brskalniku. Če želite to narediti, sledite tem korakom.

    • Odprite Internet Explorer 11
    • V zgornjem desnem kotu brskalnika kliknite ikono Storitev v obliki zobnika (ali kombinacijo tipk Alt + X). Nato v meniju, ki se odpre, izberite
    • V oknu pojdite na zavihek Dodatno
    • Nato počistite polje Pokaži obvestilo za vsako napako skripta in pritisnite gumb v redu.

    To je seznam najpogostejših razlogov, ki povzročajo skriptne napake v Internet Explorerju, zato, če ste naveličani takšnih sporočil, bodite malo pozorni in rešite težavo enkrat za vselej.

    So pa seveda še drugi – zagotovo jih bom omenil.

    Firebug za Firefox

    Ne vem zagotovo ali firebug prednik drugih orodij za razvijalce, vendar je vsekakor najbolj priljubljeno, uporabniku prijazno in polno funkcij.

    Firebug je dodatek za Firefox, kar pomeni, da ga je treba prenesti s spletnega mesta z dodatki Firefox in namestiti.

    Če želite poklicati požarni hrošč, samo pritisnite F12.

    Lastnosti tega dodatka:

    • Pregled in urejanje dinamično spreminjajočega se HTML-ja;
    • sprotno urejanje CSS;
    • Odpravljanje napak v JavaScriptu, ukazna vrstica za izvajanje skriptov;
    • Spremljanje omrežnih zahtev - vidite lahko velikost in čas prenosa datotek in skriptov, glave zahtev;
    • Razčlenjevalnik DOM.

    O teh funkcijah lahko dolgo govorite podrobno, vendar mislim, da so znane vsem našim bralcem, če pa ne, so podrobne informacije na domači strani Firebug ali pa jih je prevedel Ilya Kantor.

    Poleg samega firebuga boste morda potrebovali uporaben losjon zanj - firecookie, s katerim (presenečenje:-) lahko pregledujete in spreminjate piškotke.

    Orodna vrstica za spletne razvijalce za Firefox

    Še en uporaben dodatek k Ognelisu. Videti je takole:

    Pojdimo skozi točke.

    Onemogoči

    Omogoča izklop JavaScripta, onemogočanje uporabe predpomnilnika, kar je zelo uporabno pri razvoju (omogoča, da ste prepričani, da je stran naložena z najnovejšimi posodobitvami), prekličete uporabljene barve na strani in jih zamenjate s standardnimi, onemogočite pošiljanje v glavi napotitelja (stran, s katere je bil prehod).

    Piškotki

    Uporabna možnost za delo s piškotki: lahko jih pregledujete, brišete, blokirate in dodajate.

    css

    Ta meni vsebuje najbolj kul funkcijo orodne vrstice za razvijalce - sprotno urejanje CSS. Poleg tega je mogoče videti css, onemogočiti in tako naprej in tako naprej. Po mojem mnenju je prisotnost bližnjic na tipkovnici tukaj zelo koristna (CTRL + SHIFT + C vam na primer omogoča, da takoj preidete na ogled slogov strani)

    Obrazci

    Vse za delo z obrazci: prikaz gesel, prikaz informacij o obrazcih, pretvorba metod obrazcev (GET »POST in obratno) in še veliko več. Uporabna funkcija “Populate Form Fields” za samodejno izpolnjevanje polj obrazcev (na primer pri testiranju spletnega mesta, ko je funkcija zapomnitve gesla onemogočena. Sicer pa v tem odstavku ne vidim nič uporabnega.

    slike

    Obstaja uporabna funkcija za izklop slik – da vidite, kako je videti vaše spletno mesto brez slik. Slike je mogoče obkrožiti, prikazati njihove velikosti, prikazati atribute alt.

    Informacije

    Ta meni ima veliko možnosti. Koristno je lahko prikazati atribute razreda in id na strani. Poleg tega je zanimiv element »Ogled barvnih informacij« - za hitro pridobivanje informacij o barvah, ki se uporabljajo na strani. "Ogled velikosti dokumenta" - ogled velikosti strani. "View Response Headers" - ogled glav strani.

    Razno

    Najpogosteje uporabljena funkcija je brisanje predpomnilnika. Poleg tega je tukaj na voljo "Page ruler" - ravnilo, "Page Magnifier" - povečevalno steklo in "Line guides" - nekaj vrstic, ki so lahko uporabne za obrezovanje predloge.

    oris

    Izbor različnih elementov strani - tabel, naslovov, povezav, okvirjev, blokov. Spremeni velikost vam omogoča, da spremenite velikost okna brskalnika, da ustreza standardnim zaslonskim razširitvam. Tukaj so shranjena orodja za preverjanje strani. Tako lokalne kot zunanje. Priročen in hiter dostop do preverjanja HTML, CSS in drugega. Za preverjanje HTML lahko uporabite bližnjico na tipkovnici CTRL+SHIFT+H.

    ogled vira

    Ogled izvorne kode. Možnost ogleda v zunanji aplikaciji, ogled generirane kode.

    Tisti na desni mi je najljubši. Je hiter HTML, CSS validator in indikator napak JavaScript. Če ni težav, je ikona zelena, če so težave, pa rdeča.

    Orodna vrstica za razvijalce Internet Explorerja

    Od 8.0 naprej je odpravljanje napak že vgrajeno v ta brskalnik. Z lahkoto se imenuje Tipka F12. Res je, da je nesrečen kot program iz 90-ih.

    Obstaja pa veliko bolj kul orodje za ta brskalnik, tako imenovano orodno vrstico za razvijalce Internet Explorerja, ki jo lahko prenesete s povezave.

    Na videz ta orodna vrstica seveda izgleda kot firebug, a žal še ni zrasla do tega. Čeprav ima po drugi strani nekaj funkcij, ki jih firebug nima. Orodno vrstico za razvijalce Internet Explorerja bi imenoval hibrid Firebuga in spletni razvijalec firefox Orodna vrstica.

    Tako kot pri firebugu je mogoče element pregledati s preprostim klikom. Ampak, če lahko takoj vidimo oblazinjenja in robove, potem te možnosti tukaj ni.

    Poleg tega orodna vrstica za razvijalce Internet Explorerja ne posodablja dinamično drevesa elementov, kot to počne Firebug. Se pravi, če nekaj spremenimo na strani z uporabo js, ​​ne bomo videli ničesar z uporabo te orodne vrstice.

    Od tistega, v čemer lahko uživate – sprotno spreminjanje CSS (preprost način, da najdete, kaj vdreti :), možnost onemogočanja CSS in slik, možnost hitrega brisanja predpomnilnika in igranja s piškotki, hiter dostop do preverjanja.

    Najbolj okusno: vgrajen je izbirnik barv, ki vam omogoča, da s kapalko dobite katero koli barvo s strani. (za ff obstaja ločen vtičnik ColorZilla).

    Vrstica za odpravljanje napak za Internet Explorer

    DebugBar za Internet Explorer lahko prenesete s navedene povezave.

    Zanimiva razširitev sama po sebi. Nameščeno kot dodatna plošča k brskalniku:

    Iz neznanega razloga obstaja vgrajen iskalnik, kapalka, možnost spreminjanja velikosti okna in spet iz nekega razloga možnost pošiljanja strani prijatelju za milo. Čeprav bi lahko bilo koristno. A nisem uspel izkoristiti te priložnosti.

    Poleg tega je inšpektor:

    Metoda pregleda s klikom ali kazanjem razvijalcem ni ustrezala: izmislili so si bolj zanimivo stvar. V vrstici DebugBar morate cilj povleči do želenega elementa, da ga vidite v drevesu. Ni možnosti za urejanje CSS. Obstaja pa validator in vgrajena konzola js.

    In če se poglobite v nastavitve, lahko najdete tole:

    Tako smešno kot žalostno.

    Znano je, da bo orodna vrstica za razvijalce vgrajena v osmi raziskovalec. Podoben bo opisanemu v tretjem odstavku, vendar upamo, da bo boljši.

    Odpravljanje napak DragonFly za Opera

    DragonFly je vgrajen v Opera od različice 9.5, zato ga ni treba namestiti. Če želite aktivirati Dragonfly, pojdite na Orodja → Napredno → Orodja za razvijalce. In če v angleščini, potem Orodja → Napredno → Orodja za razvijalce.

    Takoj vas bom opozoril, da je DragonFly v fazi Alpha2, kar pojasnjuje številne njegove napake.

    Seznam funkcij:

    • inšpektor DOM;
    • Kliknite Pregled (spet ne bomo videli oblazinjenja kot v FireFoxu);
    • Urejanje ;
    • Hiter dostop do konzole napak.

    DF je nekaj podobnega ločeni strani v okvirju. Če ga odprete, bo odprt za vse zavihke (za razliko od firebuga). Zato moramo pred pregledom elementa s seznama izbrati stran, ki si jo želimo ogledati.

    Na žalost tukaj, tako kot v Internet Explorerju, orodna vrstica Dav ne prikazuje dinamično ustvarjenih elementov. In na splošno, ko pregledamo stran, se ne izvaja JavaScript: povezave in gumbi se ne klikajo. Upajmo, da bomo, ko bo DragonFly izšel, videli vse te funkcije.

    Debug WEB Inspector v Safariju

    Takoj bom povedal o brskalniku safari Informacijo sem požvižgal, zato, kot pravijo, ne odgovarjam za ustreznost gradiva.

    Če želite omogočiti element »Razvoj« v meniju Safari, morate omogočiti ustrezen element v nastavitvah (zavihek »Napredno«):

    V meniju »Razvoj« so nam na voljo naslednje funkcije:

    Oglejmo si podrobneje WEB inšpektor:

    Privzeto se inšpektor odpre v načinu pogleda HTML. Vendar ga je mogoče preklopiti v način pogleda DOM. Če želite to narediti, je na zgornji plošči stikalo. Ko miškin kazalec premaknete nad element v inšpektorju, bo ta označen na sami strani. Ne morete videti oblazinjenja, spreminjati oznak ali CSS na letenju ali videti dinamičnih sprememb DOMe na letenju, kot ne morete v FireBugu. Ampak, vidite, izgleda zelo lepo.

    Če želite delati z inšpektorjem v oknu brskalnika, lahko kliknete gumb v spodnjem levem kotu.

    Tudi v safariju je na voljo funkcija, kot je »Omrežna časovnica« (gumb »Omrežje« v inšpektorju):

    Jasno lahko vidite, kdaj in kako dolgo so datoteke naložene. Ogledate si lahko tudi glave zahtev, žal pa si ne morete ogledati same vsebine.

    Odpravljanje napak za razvijalce v brskalniku Google Chrome

    Lame se je rodil v napredni obliki in takoj ima, čeprav zaenkrat ukrivljena, a še vedno orodja za razvijalce.

    • Inšpektor DOM;
    • razhroščevalnik javascript;
    • Konzola JavaScript.

    Če želite pregledati element, ga kliknite z desno tipko miške in v kontekstnem meniju izberite "Ogled kode elementa":

    Funkcionalnost je enaka kot v brskalniku Safari: elementi so označeni ob lebdenju, vendar urejanje CSS in HTML ni na voljo, spremembe v DOM se ne sledijo. Le gumb v levem spodnjem kotu, ki bi moral pripeti inšpektor na okno brskalnika, ne deluje.

    V zavihku "Viri" lahko vidimo naslednje:

    Nekoliko drugačna od lestvice v safariju. Prosojne v tem diagramu so relativne velikosti datotek, polne barve pa čas prenosa. Tako ali drugače je očitno, da ta del Chroma še zdaleč ni dokončan.

    V tem članku sem pregledal najbolj znane razširitve in vgrajena orodja za brskalnike.

    Obstajajo tudi drugi, na primer:

    • Internet Explorer WEB Development Helper je dober pomočnik za razvijalce ASP.NET (Internet Explorer);
    • Orodna vrstica za spletne razvijalce - orodna vrstica za Internet Explorer in FireFox. Obstaja več uporabnih funkcij;
    • WEB Accessibility Toolbar - orodna vrstica za Internet Explorer. Nič zanimivega.

    Če obstajajo dodatki, ki jih nisem omenil, a bi se splačalo, ali obstajajo funkcije za omenjene razširitve, ki sem jih spregledal, napišite.

    Uporabite na zdravje!

    Internet Explorer 11 v sistemih Windows 8.1 in Windows 7 je opremljen s popolnoma preoblikovanim in izboljšanim naborom orodij za razvijalce, vgrajenih v brskalnik, ki razvijalcem pomagajo pri ustvarjanju, diagnosticiranju in optimiziranju sodobnih spletnih mest in aplikacij v številnih napravah. Nova orodja, ki jih zaradi jedrnatosti preprosto imenujemo F12, spletnim razvijalcem omogočajo hitro in učinkovito delo.

    Delovni skupini Visual Studio in Internet Explorer sta sodelovali pri ustvarjanju orodij F12, ki temeljijo na načelu pomoči razvijalcem pri hitrem prehodu od problema do rešitve z uporabo pomembnih podatkov. Nova zbirka F12 zagotavlja hitro in prilagodljivo spletno izkušnjo z orodji za diagnosticiranje in odpravljanje težav z zmogljivostjo ter orodji, ki vam pomagajo bolje razumeti, kako Internet Explorer postavlja in upodablja spletne aplikacije. Orodja F12 podpirajo hiter, interaktiven potek dela, ki ga uporabljajo današnji spletni razvijalci.

    Univerzalni komplet orodij

    Novi komplet F12 razvijalcem pomaga hitro preiti od problema do rešitve. Nekatere vznemirljive nove funkcije vključujejo:

    • Analiza odziva uporabniškega vmesnika in orodja za profiliranje pomnilnika za pomoč razvijalcem pri izdelavi hitrih in prilagodljivih spletnih aplikacij.
    • Live DOM Explorer in CSS checker posodobljen s stranjo, tako da lahko razvijalci interaktivno raziskujejo, kako dinamična vsebina vpliva na postavitev in slog
    • Možnost odpravljanja napak v JavaScriptu, ki se hitro zažene brez osveževanja strani, tako da se lahko razvijalci hitreje lotijo ​​dela

    Ko boste uporabljali orodja F12, boste opazili številne druge izboljšave, ki vam bodo pomagale doseči hiter, interaktiven potek dela:

    • Hiter dostop do teh orodij z desnim klikom menijske postavke z "inšpekcijsko postavko"
    • Učinkovita interakcija s tipkovnico
    • Obsežna možnost kopiranja elementov in komponent iz orodij, tako da jih je mogoče prilepiti v kateri koli urejevalnik brez dodatnega oblikovanja

    Najpomembneje je, da ta orodja zdaj prikazujejo najbolj popolne in točne informacije, ki so na voljo, od pravil @media in!pomembnih v DOM Explorerju do strukture stroškov na element v UI Response Profiler. Ta orodja zagotavljajo tudi neposredno pomembne podatke; profiler pomnilnika na primer identificira vozlišča DOM, ki so "v živo", vendar se nanje ne sklicuje oznaka ali drevo upodabljanja.

    Zmogljivosti novega paketa F12 so na voljo tudi v Visual Studiu, tako da imajo razvijalci dosledno in brezhibno izkušnjo v vseh naših orodjih in platformah za spletni razvoj.

    Zdaj pa si na hitro oglejmo ta orodja v akciji.

    Profiliranje aplikacij z analizatorjem odzivnosti uporabniškega vmesnika

    Orodje za odzivnost uporabniškega vmesnika vam pomaga razumeti, kje se porablja čas procesorja, da lahko vaša aplikacija doseže svoj polni potencial zmogljivosti. To orodje vam nudi vpogled, ki ga potrebujete za razumevanje notranjega delovanja Internet Explorerja, zagotavlja vizualizacijo kode HTML, CSS in JavaScript med izvajanjem ter pomembne stranske učinke, kot sta označevanje in zbiranje smeti. Na prvi pogled lahko natančno vidite, kako hitro je vaša aplikacija odzivna in kako se upodablja. Tako boste lahko identificirali specifične vire ozka grla in bolj inteligenten pristop k njegovi optimizaciji.

    Profiliranje spletne strani

    Analizirajte porabo pomnilnika aplikacije z orodjem Memory Profiler

    Ta analizator pomnilnika vam bo pomagal preprečiti uhajanje pomnilnika ali pretirano porabo pomnilnika. Izdelava spletnih aplikacij, ki za stranke delujejo neprekinjeno ali kompleksno interaktivne aplikacije pogosto pomeni, da mora njihov razvijalec posvetiti posebno pozornost težavam z uporabo pomnilnika.

    Medtem ko je JavaScript okolje, v katerem se zbirajo smeti, aplikacije običajno porabijo več pomnilnika preprosto zato, ker sklicevanja na objekte niso (in jih ni mogoče) sprostiti. Analizator pomnilnika vam pomaga prepoznati te težave tako, da zagotovi informacije o vsakem predmetu na strani, ne glede na to, ali gre za objekt JavaScript ali DOM. S temi informacijami lahko na primer vidite, koliko pomnilnika ima element in kateri predmeti podpirajo njegovo obstojnost. Najpomembneje pa je, da lahko primerjate dva posnetka in vidite, kaj se je spremenilo. To vam bo omogočilo, da razumete, zakaj vaša aplikacija uporablja več pomnilnika, in popravite to situacijo.

    Posnetek kopice, ki prikazuje onemogočene elemente DOM

    Na nadzorni plošči Performance Dashboard boste hitro razumeli delovanje aplikacij

    Za pomoč pri hitrem odkrivanju težav, ki vplivajo na delovanje vaše strani, Internet Explorer 11 ponuja pripomoček za "stran" z imenom Performance Dashboard, do katerega dostopate z bližnjico na tipkovnici Ctrl+Shift+U ali ustreznim elementom menija Orodja ( Alt+T ). Ta plošča dinamično prikazuje statistiko v Internet Explorerju za ključne meritve zmogljivosti, kot so čas upodabljanja, pomnilnik, sličice na sekundo (fps) in poraba procesorja. Performance Dashboard ne zahteva uporabe orodij F12 in se lahko uporablja tudi v sodobnih brskalnikih.

    Z nadzorno ploščo Performance Dashboard lahko hitro prepoznate interakcije strani, ki povzročajo padce števila sličic v sekundi ali visoko porabo procesorja. Nato lahko preklopite na F12, da ponovite težavo in poiščete rešitev.


    Pregledovanje elementov ter spreminjanje oznak in slogov z uporabo DOM Explorerja

    Raziskovalec DOM olajša interaktivno nastavitev poizvedb @media ter pravil CSS in njihovih lastnosti. Zato Uporabniški vmesnik vaša aplikacija postane zelo odziven vmesnik za več naprav. Na spletni strani lahko hitro začnete tako, da z desno miškino tipko kliknete in pregledate želeni element, kar bo zagnalo orodja F12 skupaj s tem elementom, izbranim v raziskovalcu DOM, ki dinamično prikaže DOM in uporabljena pravila CSS. Upodobljene tabele DOM in CSS so dinamične, kar vam omogoča razumevanje, kako Internet Explorer razlaga posebnosti vaših oznak, slogov CSS in pravil. Ko komunicirate s stranjo ali jo spreminjate z uporabo raziskovalca DOM, bodo spremembe, ki jih naredite, takoj prikazane.

    Preverite oznake in sloge

    Raziskovalec DOM olajša pridobivanje pravilne vrednosti lastnosti ali lastnosti z uporabo IntelliSense pri spreminjanju tabele CSS. Preprosto lahko vidite, katere lastnosti so napačne ali neprepoznane, in nato kopirate pravilo, da ga znova uporabite za svoj vir.

    Odpravljanje napak v JavaScriptu z razhroščevalnikom in konzolo

    Novi razhroščevalnik JavaScript vam nudi orodja za iskanje in hitro popravljanje nezaupljive kode. Razhroščevalnik JavaScript lahko odpre in si ogleda več datotek, tudi če je bila vaša knjižnica skriptov zmanjšana, nastavi prekinitvene točke in sledilne točke, pregleda objekte JavaScript, vrednosti, verige obsega in si ogleda vsebino sklada. Zagon orodij F12 bo takoj zagnal tudi razhroščevalnik JavaScript, tako da lahko začnete takoj

    Med odpravljanjem napak boste verjetno želeli komunicirati s svojim spletnim mestom. Konzola je ključno orodje za to nalogo. Do konzole lahko dostopate kadar koli, zaradi česar je uporaba tega interaktivnega okolja z IntelliSense in upodabljalniki predmetov učinkovita. Konzola nudi tudi široko paleto specializiranih API-jev, ki vam omogočajo beleženje izhodnih podatkov, analizo količine časa, porabljenega za določeno kodo, in zagotavljanje upodabljalcev objektov, ko morate opraviti temeljit pregled objektov JavaScript.

    Če povzamem

    Ta objava v blogu vsebuje preprosto skico opisa novih elementov v orodjih F12. lahko najdeš celoten seznam novo funkcionalnost na voljo razvijalcem v Internet Explorerju 11 v članku »Kaj je novega v orodjih F12« in v »Vodniku za razvijalce za predogled Internet Explorerja 11«. Več lahko izveste tudi v preizkusni predstavitvi Internet Explorerja, "F12 Adventure".

    Veselimo se vaših povratnih informacij in se veselimo dolgega sodelovanja s skupnostjo razvijalcev. Delite svoje predloge prek orodja za povratne informacije in predloge v Internet Explorerju 11 ali na spletnem mestu Connect.

    P. J. Hough
    , podpredsednik, Visual Studio



    
    Vrh