Chyba webovej stránky ladenie. Chyby skriptu v programe Internet Explorer. Príčiny a riešenia. Profilovanie SQL dotazov Ladenie webovej stránky

Pri surfovaní na internete internetový prehliadač Prieskumník vám môže zobraziť správy, že stránka obsahuje chyby a nemusí sa zobraziť správne. Pozrime sa na niekoľko spôsobov, ako tento problém vyriešiť.

Inštrukcie

  • Ak sa pri prevádzke prehliadača nevyskytujú žiadne viditeľné ťažkosti okrem chyby, ktorá sa pravidelne objavuje, môžete skúsiť zakázať ladenie skriptov, aby sa správa už nezobrazovala (ak sa chyba objaví na viacerých stránkach naraz, prejdite na ďalšiu krok). V ponuke Nástroje otvorte Možnosti siete Internet, vyberte kartu Rozšírené a začiarknite políčko „Zakázať ladenie skriptov“. Ak chcete vypnúť upozornenia na všetky chyby, zrušte začiarknutie políčka „Zobraziť upozornenie na každú chybu skriptu“.
  • Skúste otvoriť stránku, ktorá spôsobuje chybu, keď ju prezeráte z iného účtu alebo z iného počítača, aby ste zistili, či je problém lokálny. Ak sa chyba objaví, je to pravdepodobne spôsobené nesprávnym kódom webovej stránky. V tomto prípade môžete zakázať ladenie skriptov podľa pokynov v predchádzajúcom kroku. Ak problém zmizne pri prehliadaní lokality pomocou iného počítača alebo účtu, pokračujte ďalším krokom.
  • Možno prehliadač internet Explorer v čase prezerania stránok neblokuje aktívne skripty, Java a ActiveX, ktoré určujú zobrazovanie informácií na stránke. Ak chcete problém vyriešiť, musíte obnoviť nastavenia zabezpečenia prehliadača. Ak to chcete urobiť, v ponuke „Nástroje“ vyberte „Možnosti internetu“ a prejdite na kartu „Zabezpečenie“. Kliknite na tlačidlo „Predvolené“ a potom na „OK“. Ak problém pretrváva aj po opätovnom spustení stránky, na ktorej sa vyskytla chyba, skúste nasledujúcu metódu.
  • Ako viete, prehliadač ukladá dočasné súbory a kópie stránok do samostatného priečinka na neskorší prístup. Ak je priečinok príliš veľký, niektoré strany sa nemusia zobraziť správne. Problém je možné vyriešiť pravidelným vyprázdňovaním priečinka s dočasnými súbormi. Ak to chcete urobiť, otvorte dialógové okno Možnosti siete Internet z ponuky Nástroje. Na karte Všeobecné v skupine História kliknite na tlačidlo Odstrániť. Začiarknite políčka Dočasné internetové súbory, Súbory cookie, Denník a Údaje webového formulára a kliknite na tlačidlo OK.
  • Sú, samozrejme, aj ďalšie – určite ich spomeniem.

    Firebug pre Firefox

    Neviem s istotou, či áno FireBug predchodca iných vývojárskych nástrojov, no rozhodne je dnes najobľúbenejší, najpohodlnejší a najfunkčnejší.

    Firebug je doplnok pre Firefox, čo znamená, že si ho musíte stiahnuť z webovej stránky doplnkov Firefoxu a nainštalovať.

    Ak chcete spustiť firebug, stačí stlačiť F12.

    Vlastnosti tohto doplnku:

    • Kontrola a úprava dynamicky sa meniaceho HTML;
    • Priebežná úprava CSS;
    • ladenie JavaScriptu, príkazový riadok spúšťať skripty;
    • Monitorovanie sieťových požiadaviek - môžete vidieť veľkosti a časy sťahovania súborov a skriptov, hlavičky požiadaviek;
    • Analyzátor DOM.

    O týchto možnostiach môžeme hovoriť podrobne dlho, ale myslím si, že všetci naši čitatelia ich poznajú, a ak nie - detailné informácie je na domovskej stránke Firebugu alebo to isté v preklade Ilju Kantora.

    Okrem samotného firebugu sa vám môže hodiť užitočná pleťová voda jemu - FireCookie, pomocou ktorého (prekvapenie:-) môžete prezerať a meniť cookies.

    Panel nástrojov pre vývojárov webových stránok pre Firefox

    Ďalší užitočný doplnok k Ognelis. Vyzerá to takto:

    Pozrime sa bod po bode.

    Zakázať

    Umožňuje vypnúť JavaScript a zakázať používanie vyrovnávacej pamäte, čo je veľmi užitočné pri vývoji (umožňuje vám mať istotu, že sa stránka načítala spolu s najnovšie aktualizácie), zrušiť farby použité na stránke a nahradiť ich štandardnými, zakázať odosielanie v hlavičke referrer (stránka, z ktorej bolo odporúčanie uskutočnené).

    Cookies

    Užitočná možnosť pre prácu so súbormi cookie: môžete ich zobraziť, odstrániť, zamietnuť a pridať.

    CSS

    Táto ponuka obsahuje najúžasnejšiu funkciu panela s nástrojmi pre vývojárov – úpravu CSS za behu. Okrem toho je možné zobraziť css, zakázať a tak ďalej a tak ďalej. Prítomnosť klávesových skratiek je tu podľa mňa veľmi užitočná (CTRL+SHIFT+C napríklad umožňuje prejsť priamo na prezeranie štýlov stránky)

    Formuláre

    Všetko pre prácu s formulármi: zobrazenie hesiel, zobrazenie informácií o formulároch, konverzia metód formulárov (GET » POST a naopak) a mnoho ďalšieho. Užitočnou funkciou je „Populate Form Fields“ na automatické vypĺňanie polí formulára (napríklad pri testovaní webu, keď je vypnutá funkcia zapamätania si hesiel. Inak v tejto položke nevidím nič užitočné.

    snímky

    Existuje užitočná funkcia na zakázanie obrázkov – aby ste videli, ako vaša stránka vyzerá bez obrázkov. Obrázky môžete zakrúžkovať, zobraziť ich veľkosti a zobraziť alternatívne atribúty.

    Informácie

    V tejto ponuke je veľa možností. Užitočná môže byť funkcia zobrazenia atribútov class a id na stránke. Okrem toho je zaujímavá položka “View Color Information” – na rýchle získanie informácií o farbách, ktoré sú na stránke použité. "Zobraziť veľkosť dokumentu" - zobrazenie veľkosti strany. „Zobraziť hlavičky odpovedí“ – zobraziť hlavičky stránok.

    Zmiešaný

    Najčastejšie používanou funkciou je vymazanie vyrovnávacej pamäte. Okrem toho sú tu dostupné funkcie „Page ruler“ – pravítko, „Page Magnifier“ – lupa a „Line guides“ – niekoľko riadkov, ktoré môžu byť užitočné na orezanie šablóny.

    Obrys

    Zvýraznenie rôznych prvkov stránky – tabuľky, nadpisy, odkazy, rámce, bloky. Zmena veľkosti vám umožňuje zmeniť veľkosť okna prehliadača tak, aby sa zmestilo do všetkých štandardných rozšírení obrazovky. Tu sú uložené funkcie nástrojov na overenie stránky. Lokálne aj externé. Pohodlné a rýchly prístup na validáciu HTML, CSS atď. Na overenie HTML môžete použiť klávesovú skratku CTRL+SHIFT+H.

    Zdroj pohladu

    vyhliadka zdrojový kód. Možnosť prezerania v externej aplikácii, prezeranie vygenerovaného kódu.

    Najviac sa mi páči ten v pravom rohu. Je to rýchly HTML, CSS validátor a indikátor chýb JavaScriptu. Ak nie sú žiadne problémy, ikona je zelená a ak sa vyskytnú problémy, ikona je červená.

    Panel s nástrojmi pre vývojárov programu Internet Explorer

    Od verzie 8.0 je v tomto prehliadači už zabudované ladenie chýb. Dá sa to jednoducho nazvať kláves F12. Pravda, je to biedne ako program z 90. rokov.

    Pre tento prehliadač však existuje oveľa chladnejší nástroj, takzvaný panel s nástrojmi pre vývojárov Internet Explorera, ktorý si môžete stiahnuť z odkazu.

    Vzhľadovo tento panel s nástrojmi, samozrejme, vyzerá ako firebug, ale, žiaľ, ešte na to nedozrel. Aj keď na druhej strane má niektoré schopnosti, ktoré firebug nemá. Internet Explorer Developer Toolbar by som nazval akýmsi hybridom Firebugu a Webový vývojár FireFox Panel s nástrojmi.

    Rovnako ako v prípade firebug je možné kontrolovať prvok jednoduchým kliknutím. Ak však okamžite vidíme vypchávky a okraje, tu takáto príležitosť neexistuje.

    Panel s nástrojmi pre vývojárov Internet Explorer navyše dynamicky neaktualizuje strom prvkov ako Firebug. To znamená, že ak zmeníme čokoľvek na stránke pomocou js, pomocou tohto panela s nástrojmi nič neuvidíme.

    Čo si môžete užiť, je zmena CSS za behu (jednoduchý spôsob, ako nájsť, čo hacknúť :), možnosť zakázať CSS a obrázky, možnosť rýchlo vymazať vyrovnávaciu pamäť a hrať sa s cookies, rýchly prístup k overeniu.

    Najlepšia časť: je tu vstavaný výber farieb, ktorý vám umožňuje získať akúkoľvek farbu zo stránky pomocou pipety. (pre ff existuje samostatný doplnok ColorZilla).

    Debug DebugBar pre Internet Explorer

    DebugBar pre Internet Explorer si môžete stiahnuť z uvedeného odkazu.

    Zaujímavé rozšírenie samo o sebe. Nainštalované ako dodatočný panel do prehliadača:

    Z nejakého dôvodu je tu zabudovaný vyhľadávač, kvapkadlo, možnosť zmeniť veľkosť okna a opäť z nejakého dôvodu možnosť poslať stránku priateľovi na mydlo. Aj keď to môže byť užitočné. Túto príležitosť sa mi však nepodarilo využiť.

    Okrem toho existuje inšpektor:

    Vývojári sa neuspokojili so spôsobom kontroly klikaním či ukazovaním: prišli na zaujímavejšiu vec. V DebugBar musíte pretiahnuť zameriavací kríž na požadovaný prvok, aby ste ho videli v strome. Neexistuje možnosť upravovať CSS. Existuje však validátor a vstavaná konzola js.

    A ak sa pohrabete v nastaveniach, nájdete toto:

    Aj vtipné, aj smutné.

    Je známe, že Panel nástrojov pre vývojárov bude zabudovaný do ôsmeho prieskumníka. Bude to podobné ako v treťom odseku, ale dúfame, že to bude lepšie.

    Odlaďte DragonFly pre Operu

    DragonFly je zabudovaný do Opery od verzie 9.5, takže nie je potrebné ho inštalovať. Ak chcete aktivovať Dragonfly, prejdite na Nástroje → Rozšírené → Nástroje pre vývojárov. A ak v angličtine, tak Tools → Advanced → Developer Tools.

    Okamžite vás upozorním, že DragonFly je vo fáze Alpha2, čo vysvetľuje mnohé z jeho chýb.

    Zoznam funkcií:

    • inšpektor DOM;
    • Kontrola kliknutím (opäť neuvidíme odsadenie ako vo FireFoxe);
    • Úprava;
    • Rýchly prístup k chybovej konzole.

    DF je niečo ako samostatná stránka v rámci. Ak ho otvoríte, bude otvorený pre všetky karty (na rozdiel od firebugu). Preto pred kontrolou prvku musíme vybrať zo zoznamu stránku, ktorú chceme zobraziť.

    Žiaľ, tu, rovnako ako v lište nástrojov Dav v Internet Exploreri, sa dynamicky vytvorené prvky nezobrazujú. A vo všeobecnosti, keď skontrolujeme stránku, nespustí sa žiadny JavaScript: neklikne sa na odkazy a tlačidlá. Dúfajme, že všetky tieto funkcie uvidíme, keď sa DragonFly priblíži k vydaniu.

    Debug WEB Inspector v Safari

    Hneď poviem, že ide o prehliadač Safari Ušli mi informácie, preto nezodpovedám za primeranosť materiálu, ako sa hovorí.

    Ak chcete povoliť položku „Vývoj“ v ponuke Safari, musíte povoliť príslušnú položku v nastaveniach (karta „Rozšírené“):

    V menu „Vývoj“ máme k dispozícii nasledujúce funkcie:

    Pozrime sa bližšie na WEB inšpektora:

    V predvolenom nastavení sa inšpektor otvorí v režime zobrazenia HTML. Dá sa však prepnúť do režimu zobrazenia DOM. Na tento účel je na vrchnej doske vypínač. Keď umiestnite kurzor myši na prvok v inšpektorovi, zvýrazní sa na samotnej stránke. Nemôžete vidieť výplň, zmeniť označenie alebo CSS za behu, ani vidieť dynamické zmeny v DOMe počas behu ako vo FireBug. Ale musíte uznať, že to vyzerá veľmi roztomilo.

    Ak chcete pracovať s inšpektorom v okne prehliadača, môžete kliknúť na tlačidlo v ľavom dolnom rohu.

    Dokonca aj v prehliadači Safari je k dispozícii funkcia ako „Časová os siete“ (tlačidlo „Sieť“ v inšpektorovi):

    Jasne vidíte, kedy a ako dlho trvá sťahovanie súborov. Môžete si zobraziť aj hlavičky žiadostí, ale samotný obsah si, žiaľ, zobraziť nemôžete.

    Ladenie pre vývojárov v prehliadači Google Chrome

    Lame sa zrodil v pokročilej forme a okamžite má, síce zatiaľ pokrivené, ale stále nástroje pre vývojárov.

    • inšpektor DOM;
    • javascript debugger;
    • konzola JavaScript.

    Ak chcete skontrolovať akýkoľvek prvok, musíte naň kliknúť pravým tlačidlom myši a obsahové menu vyberte „Zobraziť kód prvku“:

    Funkčnosť je rovnaká ako v Safari: prvky sú zvýraznené pri umiestnení kurzora myši, ale nie sú dostupné úpravy CSS a HTML a zmeny v DOM sa nesledujú. Ale tlačidlo v ľavom dolnom rohu, ktoré by malo pripevniť inšpektor k oknu prehliadača, nefunguje.

    Na karte „Zdroje“ môžeme vidieť nasledovné:

    Mierne odlišné od rozsahu v safari. Priesvitné na tomto diagrame zobrazuje relatívne veľkosti súborov a plná farba zobrazuje čas načítania. Tak či onak je zrejmé, že táto časť prehliadača Chrome nie je ani zďaleka dokončená.

    V tomto článku som sa pozrel na najznámejšie rozšírenia a vstavané prvky prehliadača.

    Sú aj iné, napr.

    • Internet Explorer WEB Development Helper - dobrý pomocník pre vývojárov ASP.NET (Internet Explorer);
    • WEB Developer Toolbar - panel nástrojov pre Internet Explorer a FireFox. Existuje niekoľko užitočných funkcií;
    • WEB Accessibility Toolbar – panel nástrojov pre Internet Explorer. Nič zaujímavé.

    Ak existujú doplnky, ktoré som nespomenul, ale mali by, alebo existujú funkcie pre uvedené rozšírenia, ktoré mi chýbali, napíšte.

    Užite si to pre svoje zdravie!

    Písanie HTML je skvelé, ale ako viete, kde je chyba, keď niečo nefunguje? Tento článok popisuje niekoľko nástrojov, ktoré vám môžu pomôcť nájsť a opraviť chyby v HTML.

    Ladenie nie je strašidelné

    Keď napíšete nejaký kód, všetko zvyčajne ide dobre, kým neurobíte chybu. Váš kód teda nefunguje alebo nefunguje tak, ako ste zamýšľali. Ak sa pokúsite skompilovať poškodený program Rust, kompilátor zobrazí chybu:

    V tomto prípade je chybové hlásenie pomerne jednoduché na pochopenie – „neukončený reťazec dvojitých úvodzoviek“. Ak sa pozorne pozriete na println! (Ahoj, svet!"), všimnete si, že chýba dvojitý citát. Samozrejme, chybové hlásenia môžu byť oveľa ťažšie pochopiteľné, keď váš kód rastie, a aj tie najjednoduchšie prípady sa môžu zdať skľučujúce pre tých, ktorí o Rust nič nevedia.

    Ale nebojte sa ladiť! Aby ste mohli pohodlne písať a ladiť akýkoľvek kód, musíte rozumieť jazyku a jeho nástrojom.

    HTML a ladenie

    HTML nie je také ťažké pochopiť ako Rust. HTML nie je skompilované do žiadnej inej formy predtým, ako ho prehliadač analyzuje a zobrazí výsledok (je interpretovaný, nie kompilovaný). Syntax prvkov HTML je oveľa jasnejšia ako syntax „skutočných programovacích jazykov“ ako Rust, JavaScript alebo Python. Spôsob, akým prehliadače čítajú HTML, je viac tolerantný ako programovacie jazyky, ktoré interpretujú svoj kód prísnejšie. To je zlé aj dobré.

    Tolerantný kód

    Čo teda znamená tolerantný? Vo všeobecnosti, keď pokazíte svoj kód, narazíte na dva typy chýb:

    • Syntaktické chyby: Toto sú pravopisné chyby, ako to bolo v prípade vyššie v príklade Rust. Tieto sa zvyčajne dajú ľahko opraviť, ak poznáte syntax jazyka a význam chybových hlásení.
    • Logické chyby: Ide o chyby, ktoré sa objavia, keď je syntax správna, ale kód neplní svoj účel, to znamená, že sa program nespustí správne. Tieto sa opravujú ťažšie ako syntaktické, pretože neexistujú žiadne správy, ktoré by indikovali, kde ste urobili chybu.

    HTML netrpí syntaktickými chybami, pretože prehliadač číta kód tolerantne v tom zmysle, že stránky je možné vykresliť, aj keď sú prítomné syntaktické chyby. Prehliadače majú vstavané pravidlá na interpretáciu nesprávne napísaného označenia a môžete niečo spustiť, aj keď ste mysleli niečo iné. To môže byť skutočný problém!

    Na poznámku: HTML je čitateľné, pretože keď sa prvýkrát objavil web, bolo rozhodnuté povoliť ľuďom publikovať obsah, aj keď bol kód nesprávny, pretože je to oveľa dôležitejšie ako uistenie sa, že syntax je úplne správna. Web by dnes nebol taký populárny, keby bol na nováčikov prísny.

    Aktívne učenie: Predstavujeme tolerantný kódex

    Je čas preskúmať povahu tolerantného kódu v HTML.


    Overenie HTML

    Z vyššie uvedeného príkladu je jasné, že sa oplatí skontrolovať validitu HTML. Vo vyššie uvedenom jednoduchom príklade môžete jednoducho prejsť celým kódom a nájsť chyby, ale čo veľké a zložité stránky?

    Najlepšie je skontrolovať stránku v službe overovania značiek. Bol vytvorený a udržiavaný organizáciou W3C, ktorá sa zaoberá špecifikáciami HTML, CSS a ďalších webových technológií. Služba skontroluje váš kód HTML a vygeneruje správu o chybách v ňom.

    HTML je možné skontrolovať na adrese stiahnutím súboru alebo jednoduchým skopírovaním na stránku.

    Aktívne učenie: Overenie HTML dokumentu

    1. Otvorte službu overenia značiek vo svojom prehliadači.
    2. Prepnite do režimu overenia priamym zadaním.
    3. Skopírujte celý kód dokumentu (nielen telo) a vložte ho do vstupného priestoru.
    4. Stlačte tlačidlo Skontrolujte.

    Zobrazí sa zoznam chýb a ďalšie informácie.

    Práca s chybovými hláseniami

    Zvyčajne je okamžite jasné, čo správy znamenajú, ale niekedy musíte tvrdo pracovať, aby ste zistili, čo sa deje. Teraz prejdeme všetky chyby a zistíme, čo znamenajú. Upozorňujeme, že správy označujú riadok a stĺpec kódu, aby sa chyby ľahšie našli.

    • "Koncová značka bola implicitná, ale boli tam otvorené prvky" (2 prípady): Neexistuje žiadna explicitná uzatváracia značka, hoci prehliadač vie odhadnúť, kde by mala byť. Správa ukazuje na riadok za tým, kde sa očakávala záverečná značka, ale nájdete to správne miesto.
    • "Neuzavretý prvok silný": Toto je veľmi jednoduchá chyba- prvok) označuje, že jeho obsah má veľký význam, závažnosť alebo naliehavosť. Prehliadače zvyčajne zobrazujú obsah tučným písmom."> nie je uzavretá a správa ukazuje priamo na otváraciu značku.
    • "Koncová značka silná porušuje pravidlá vnorenia": Prvok je vnorený nesprávne - na tejto úrovni neexistuje žiadna zodpovedajúca koncová značka.
    • "Koniec súboru dosiahnutý v rámci hodnoty atribútu. Ignorovanie značky": Záhadná správa. Faktom je, že niekde (s najväčšou pravdepodobnosťou na konci dokumentu) bola vlastnosť prvku zapísaná nesprávne a koniec súboru skončil v tejto vlastnosti. Odkaz nie je viditeľný v prehliadači - s najväčšou pravdepodobnosťou je problém blízko neho.
    • "Bol videný koniec súboru a boli otvorené prvky": Súbor sa skončil, ale niektoré prvky nie sú zatvorené. Správa označuje koniec súboru, v tomto prípade prvok nie je uzavretý príklad: odkaz na domovskú stránku Mozilly ↩
    ↩ ↩

    Pomerne často môžu používatelia pozorovať situáciu, keď sa v prehliadači (IE) zobrazí chybové hlásenie skriptu. Ak je situácia izolovaná, nie je potrebné sa obávať, ale keď sa takéto chyby stanú pravidelnými, potom stojí za to premýšľať o povahe problému.

    Chyba skriptu v programe Internet Explorer je zvyčajne spôsobená nesprávnym spracovaním kódu HTML stránky prehliadačom, prítomnosťou dočasných internetových súborov, nastavením účtu a mnohými ďalšími príčinami, ktoré porozprávame sa v tomto materiáli. Bude sa diskutovať aj o metódach riešenia tohto problému.

    Skôr ako začnete s bežnými metódami diagnostiky problémov programu Internet Explorer, ktoré spôsobujú chyby skriptu, musíte sa uistiť, že chyba sa nevyskytuje len na jednej konkrétnej lokalite, ale na viacerých webových stránkach naraz. Musíte tiež skontrolovať webovú stránku, kde sa tento problém vyskytol, pod inou účtu, v inom prehliadači a na inom počítači. To vám umožní zúžiť hľadanie príčiny chyby a vylúčiť alebo potvrdiť hypotézu, že sa správy zobrazujú v dôsledku prítomnosti určitých súborov alebo nastavení v počítači.

    Blokovanie aktívnych skriptov Internet Explorera, ActiveX a Java

    Aktívne skripty, ovládacie prvky ActiveX a Java ovplyvňujú spôsob generovania a zobrazovania informácií na stránke a môžu byť skutočnou príčinou vyššie opísaného problému, ak sú zablokované na počítači používateľa. Aby ste sa uistili, že z tohto dôvodu dochádza k chybám skriptu, musíte jednoducho obnoviť nastavenia zabezpečenia prehliadača. Ak to chcete urobiť, postupujte podľa nasledujúcich odporúčaní.

    • Otvorte Internet Explorer 11
    • servis

    • V okne prejdite na kartu Bezpečnosť
    • Ďalej kliknite na tlačidlo Predvolené a potom tlačidlo OK

    Dočasné súbory programu Internet Explorer

    Zakaždým, keď otvoríte webovú stránku, prehliadač Internet Explorer uloží lokálnu kópiu tejto webovej stránky na vašom PC do takzvaných dočasných súborov. Ak je takýchto súborov priveľa a veľkosť priečinka, ktorý ich obsahuje, dosahuje niekoľko gigabajtov, môžu nastať problémy so zobrazením webovej stránky, konkrétne sa môže zobraziť chybové hlásenie skriptu. Pravidelné čistenie priečinka dočasných súborov môže pomôcť vyriešiť tento problém.
    Ak chcete odstrániť dočasné internetové súbory, postupujte podľa týchto krokov.

    • Otvorte Internet Explorer 11
    • servis
    • V okne prejdite na kartu Sú bežné
    • V kapitole História prehliadača kliknite na tlačidlo Odstrániť…

    • V okne Odstraňuje sa história recenzií začiarknite políčka vedľa položiek Dočasné internetové a webové súbory, Cookies a údaje webových stránok, Časopis
    • Kliknite na tlačidlo Odstrániť

    Prevádzka antivírusového softvéru

    Pri prevádzke sú možné chyby skriptu antivírusový program keď blokuje aktívne skripty, ovládacie prvky ActiveX a Java na stránke alebo dočasné priečinky prehliadača. V takom prípade si musíte pozrieť dokumentáciu k nainštalovanému antivírusovému produktu a vypnúť kontrolu priečinkov na uloženie dočasných internetových súborov, ako aj blokovanie interaktívnych objektov.

    Nesprávne spracovanie kódu stránky HTML

    Zvyčajne sa zobrazuje na jednej konkrétnej lokalite a naznačuje, že kód stránky nie je úplne prispôsobený na prácu s prehliadačom Internet Explorer. V tomto prípade je najlepšie zakázať ladenie skriptov v prehliadači. Ak to chcete urobiť, postupujte takto:

    • Otvorte Internet Explorer 11
    • V hornom rohu prehliadača (vpravo) kliknite na ikonu servis vo forme ozubeného kolieska (alebo kombinácie kláves Alt+X). Potom v ponuke, ktorá sa otvorí, vyberte
    • V okne prejdite na kartu Okrem toho
    • Ďalej zrušte začiarknutie políčka Zobraziť upozornenie na každú chybu skriptu a stlačte tlačidlo OK.

    Toto je zoznam tých najviac bežné dôvody, ktoré spôsobujú chyby skriptov v Internet Exploreri, takže ak vás už takéto správy unavujú, venujte trochu pozornosti a vyriešte problém raz a navždy.

    Zapnuté tento moment Existuje veľké množstvo rôznych prehliadačov, ktoré v rôznej miere podporujú existujúce štandardy HTML. Osobne preferujem prehliadač od Mozilla Corporation. Tento prehliadač má dlhú históriu (je založený na slávnom prehliadači Netscape Navigator). Tento prehliadač sa mi páči aj preto, že podporuje systém pluginov – samostatne distribuovaných doplnkov, po pripojení si môžete meniť funkcionalitu a prispôsobiť si ju podľa svojich potrieb. A nakoniec, tento prehliadač je voľne distribuovaný a má otvorený zdroj, čo je tiež dôležité. Preto som sa rozhodol opísať možnosti, ktoré tento prehliadač poskytuje nielen používateľovi, ale aj vývojárom webových stránok, ako jednoduchý a pohodlný môže byť proces ladenia písaných produktov.

    Mozilla Firefox je jedným z najpopulárnejších prehliadačov medzi vývojármi a webovými vývojármi. Priťahuje ich pozornosť kvôli príležitostiam, ktoré tento prehliadač poskytuje na ladenie vytvorených projektov, opravu chýb a ich vylepšovanie. Štandardný balík prehliadača obsahuje konzolu java (alebo „konzolu chýb“). Tento nástroj vám umožňuje ladiť vstavané skripty java-script. Oveľa viac funkcií však prehliadaču poskytujú doplnky tretích strán, ktoré si môžete stiahnuť a nainštalovať z oficiálnej webovej stránky Mozilla Foundation. Teraz sa chcem pozrieť na dva z týchto doplnkov – Web Developer a Firebug. Oba tieto doplnky si môžete stiahnuť z vyššie uvedených odkazov z oficiálnej webovej stránky doplnkov. Po ich nainštalovaní a reštarte prehliadača má vývojár široké možnosti, ktoré popíšem nižšie postupne pre každý z pluginov.

    Doplnok Firebug

    Ako je uvedené na oficiálnej stránke: „Firebug sa integruje s prehliadačom Firefox, aby výrazne obohatil sadu nástrojov pre vývojárov. Budete môcť upravovať, ladiť a skúmať CSS, HTML a Javascript naživo na akejkoľvek webovej stránke.“ A skutočne je. Pozrime sa na niektoré funkcie tohto pluginu, konkrétne:

    • Prezeranie a úprava HTML.
    • Budovanie CSS.
    • Monitorovanie sieťových požiadaviek
    • Ladenie JavaScriptu
    • Výskum JavaScriptu
    • Prihlasovanie pre JavaScript

    Toto nie je úplný zoznam všetkých jeho schopností. Keďže je projekt open source, každý môže meniť a pridávať funkcie.

    Pre prácu s doplnkom musíte stlačiť kláves F12 (Ctrl-F12 na prácu s ním v samostatnom okne). Po úspešnom spustení dostaneme nasledovné - obrázok 1a, 1b.

    Obrázok 1a. Úvodné okno doplnku firebug.


    Obrázok 1b. Úvodné okno doplnku firebug.

    Ďalej začína samotná práca s pluginom. Povedzme, že potrebujeme nájsť ten či onen objekt v kóde HTML alebo určiť, ako presne je implementovaný pomocou CSS aktuálny voňavý. Ak to chcete urobiť, musíte jednoducho vybrať potrebné možnosti v ponuke okna pluginu pomocou myši. Nižšie uvedený príklad je HTML v režime Inspect. Teraz, keď prejdeme na stránku dokumentu, pod kurzorom myši si všimneme obdĺžnikovú oblasť, ktorá znázorňuje oblasť, s ktorou pracujeme. V okne pluginu uvidíme použité parametre HTML a CSS. Kliknutím na každú z nich môžete tiež vykonávať zmeny a sledovať ich v priebehu času. Opísané akcie sú znázornené na obrázkoch 2,3,4.



    Pri vývoji tohto projektu bol práve na tieto účely použitý vyššie popísaný plugin. Aj keď tu nebol použitý žiadny java skript, na odladenie sa dá použiť aj doplnok firebug. Príklad ladenia je znázornený na obrázku 5.


    Ako je uvedené vyššie, funkčnosť tohto rozšírenia nie je obmedzená na toto. Po nainštalovaní prehliadača Mozilla Firefox si ho môžete preštudovať v plnom znení a použiť pre svoje potreby tak, že si ho stiahnete z uvedených odkazov.

    Web Developer plugin

    Web Developer je druhé rozšírenie pre Prehliadač Mozilla Firefox je veľmi výkonný a funkčný, čo umožňuje rýchle a efektívne ladenie. Po jeho inštalácii sa v okne prehliadača zobrazí ďalší panel s nástrojmi, ako je znázornené na obrázku 6.

    Ďalšia práca s pluginom je intuitívna. Napríklad, ak potrebujeme urobiť nejakú prácu s CSS (hoci nie tak plne funkčný ako doplnok Firebug), môžeme kliknúť na ponuku CSS a uzamknúť, povoliť alebo zakázať.

    Pre vývojára je veľmi pohodlné vidieť, ako bude jeho projekt vyzerať na monitoroch s rôznym rozlíšením. Ak to chcete urobiť, musíte použiť kartu Zmeniť veľkosť. Tu môžete manuálne nastaviť potrebné povolenia obrazovke (800 x 600, 1024 x 768 atď.), a potom medzi nimi voľne prepínať, približovať alebo odďaľovať obsah. Táto funkcia je znázornená na obrázku 7.

    Toto rozšírenie má tiež bohatú funkčnosť, ktorá je popísaná a dostupná na oficiálnych stránkach.

    Zoznam použitých zdrojov

    • 1. www.getfirebug.com
      Oficiálna stránka doplnku.
    • 2. http://addons.mozilla.org
      Oficiálna stránka Mozilly, kde sú pluginy pre prehliadač Firefox, informácie pre vývojárov, informácie o používaní pluginov.
    • 3. http://chrispederick.com/work/web-developer/
      Oficiálna stránka vývojára doplnku WebDeveloper.

    Počas prehliadania internetu môže Internet Explorer zobrazovať hlásenia oznamujúce, že stránka obsahuje chyby a nemusí sa zobrazovať správne. Pozrime sa na niekoľko spôsobov, ako tento problém vyriešiť.

    Inštrukcie

  • Ak sa pri prevádzke prehliadača nevyskytujú žiadne viditeľné ťažkosti okrem chyby, ktorá sa pravidelne objavuje, môžete skúsiť zakázať ladenie skriptov, aby sa správa už nezobrazovala (ak sa chyba objaví na viacerých stránkach naraz, prejdite na ďalšiu krok). V ponuke Nástroje otvorte Možnosti siete Internet, vyberte kartu Rozšírené a začiarknite políčko „Zakázať ladenie skriptov“. Ak chcete vypnúť upozornenia na všetky chyby, zrušte začiarknutie políčka „Zobraziť upozornenie na každú chybu skriptu“.
  • Skúste otvoriť stránku, ktorá spôsobuje chybu, keď ju prezeráte z iného účtu alebo z iného počítača, aby ste zistili, či je problém lokálny. Ak sa chyba objaví, je to pravdepodobne spôsobené nesprávnym kódom webovej stránky. V tomto prípade môžete zakázať ladenie skriptov podľa pokynov v predchádzajúcom kroku. Ak problém zmizne pri prehliadaní lokality pomocou iného počítača alebo účtu, pokračujte ďalším krokom.
  • Internet Explorer nemusí blokovať aktívne skripty, Java a ActiveX, ktoré riadia spôsob zobrazovania informácií na stránke pri prezeraní stránok. Ak chcete problém vyriešiť, musíte obnoviť nastavenia zabezpečenia prehliadača. Ak to chcete urobiť, v ponuke „Nástroje“ vyberte „Možnosti internetu“ a prejdite na kartu „Zabezpečenie“. Kliknite na tlačidlo „Predvolené“ a potom na „OK“. Ak problém pretrváva aj po opätovnom spustení stránky, na ktorej sa vyskytla chyba, skúste nasledujúcu metódu.
  • Ako viete, prehliadač ukladá dočasné súbory a kópie stránok do samostatného priečinka na neskorší prístup. Ak je priečinok príliš veľký, niektoré strany sa nemusia zobraziť správne. Problém je možné vyriešiť pravidelným vyprázdňovaním priečinka s dočasnými súbormi. Ak to chcete urobiť, otvorte dialógové okno Možnosti siete Internet z ponuky Nástroje. Na karte Všeobecné v skupine História kliknite na tlačidlo Odstrániť. Začiarknite políčka Dočasné internetové súbory, Súbory cookie, Denník a Údaje webového formulára a kliknite na tlačidlo OK.
  • Pomerne často sa môžu používatelia stretnúť so situáciou, keď sa v prehliadači Internet Explorer (IE) zobrazí chybové hlásenie skriptu. Ak je situácia izolovaná, nie je potrebné sa obávať, ale keď sa takéto chyby stanú pravidelnými, potom stojí za to premýšľať o povahe problému.

    Chyba skriptu v programe Internet Explorer je zvyčajne spôsobená nesprávnym spracovaním kódu HTML stránky v prehliadači, prítomnosťou dočasných internetových súborov, nastavením účtu a mnohými ďalšími dôvodmi, o ktorých sa bude diskutovať v tomto materiáli. Bude sa diskutovať aj o metódach riešenia tohto problému.

    Skôr ako začnete s bežnými metódami diagnostiky problémov programu Internet Explorer, ktoré spôsobujú chyby skriptu, musíte sa uistiť, že chyba sa nevyskytuje len na jednej konkrétnej lokalite, ale na viacerých webových stránkach naraz. Musíte tiež skontrolovať webovú stránku, na ktorej sa tento problém vyskytol, pod iným účtom, v inom prehliadači a na inom počítači. To vám umožní zúžiť hľadanie príčiny chyby a vylúčiť alebo potvrdiť hypotézu, že sa správy zobrazujú v dôsledku prítomnosti určitých súborov alebo nastavení v počítači.

    Blokovanie aktívnych skriptov Internet Explorera, ActiveX a Java

    Aktívne skripty, ovládacie prvky ActiveX a Java ovplyvňujú spôsob generovania a zobrazovania informácií na stránke a môžu byť skutočnou príčinou vyššie opísaného problému, ak sú zablokované na počítači používateľa. Aby ste sa uistili, že z tohto dôvodu dochádza k chybám skriptu, musíte jednoducho obnoviť nastavenia zabezpečenia prehliadača. Ak to chcete urobiť, postupujte podľa nasledujúcich odporúčaní.

    • Otvorte Internet Explorer 11
    • servis

    • V okne prejdite na kartu Bezpečnosť
    • Ďalej kliknite na tlačidlo Predvolené a potom tlačidlo OK

    Dočasné súbory programu Internet Explorer

    Zakaždým, keď otvoríte webovú stránku, prehliadač Internet Explorer uloží lokálnu kópiu tejto webovej stránky na vašom PC do takzvaných dočasných súborov. Ak je takýchto súborov priveľa a veľkosť priečinka, ktorý ich obsahuje, dosahuje niekoľko gigabajtov, môžu nastať problémy so zobrazením webovej stránky, konkrétne sa môže zobraziť chybové hlásenie skriptu. Pravidelné čistenie priečinka dočasných súborov môže pomôcť vyriešiť tento problém.
    Ak chcete odstrániť dočasné internetové súbory, postupujte podľa týchto krokov.

    • Otvorte Internet Explorer 11
    • V hornom rohu prehliadača (vpravo) kliknite na ikonu servis vo forme ozubeného kolieska (alebo kombinácie kláves Alt+X). Potom v ponuke, ktorá sa otvorí, vyberte
    • V okne prejdite na kartu Sú bežné
    • V kapitole História prehliadača kliknite na tlačidlo Odstrániť…

    • V okne Odstraňuje sa história recenzií začiarknite políčka vedľa položiek Dočasné internetové a webové súbory, Súbory cookie a údaje webových stránok, Časopis
    • Kliknite na tlačidlo Odstrániť

    Prevádzka antivírusového softvéru

    Chyby skriptu sú možné v dôsledku činnosti antivírusového programu, keď blokuje aktívne skripty, ovládacie prvky ActiveX a Java na stránke alebo priečinky na ukladanie dočasných súborov prehliadača. V takom prípade si musíte pozrieť dokumentáciu k nainštalovanému antivírusovému produktu a vypnúť kontrolu priečinkov na uloženie dočasných internetových súborov, ako aj blokovanie interaktívnych objektov.

    Nesprávne spracovanie kódu stránky HTML

    Zvyčajne sa zobrazuje na jednej konkrétnej lokalite a naznačuje, že kód stránky nie je úplne prispôsobený na prácu s prehliadačom Internet Explorer. V tomto prípade je najlepšie zakázať ladenie skriptov v prehliadači. Ak to chcete urobiť, postupujte takto:

    • Otvorte Internet Explorer 11
    • V hornom rohu prehliadača (vpravo) kliknite na ikonu servis vo forme ozubeného kolieska (alebo kombinácie kláves Alt+X). Potom v ponuke, ktorá sa otvorí, vyberte
    • V okne prejdite na kartu Okrem toho
    • Ďalej zrušte začiarknutie políčka Zobraziť upozornenie na každú chybu skriptu a stlačte tlačidlo OK.

    Toto je zoznam najčastejších dôvodov, ktoré spôsobujú chyby skriptov v programe Internet Explorer, takže ak vás takéto správy unavujú, venujte trochu pozornosti a vyriešte problém raz a navždy.

    Sú, samozrejme, aj ďalšie – určite ich spomeniem.

    Firebug pre Firefox

    Neviem s istotou, či áno FireBug Predchodca iných vývojárskych nástrojov, ale rozhodne je najobľúbenejší, najpohodlnejší a najfunkčnejší v .

    Firebug je doplnok pre Firefox, čo znamená, že si ho musíte stiahnuť z webovej stránky doplnkov Firefoxu a nainštalovať.

    Ak chcete spustiť firebug, stačí stlačiť F12.

    Vlastnosti tohto doplnku:

    • Kontrola a úprava dynamicky sa meniaceho HTML;
    • Priebežná úprava CSS;
    • Ladenie JavaScriptu, príkazový riadok na vykonávanie skriptov;
    • Monitorovanie sieťových požiadaviek - môžete vidieť veľkosti a časy sťahovania súborov a skriptov, hlavičky požiadaviek;
    • Analyzátor DOM.

    O týchto možnostiach môžete dlho hovoriť podrobne, ale myslím si, že všetci naši čitatelia ich poznajú, a ak nie, podrobné informácie sú na domovskej stránke Firebug alebo to isté v preklade Ilya Kantora.

    Okrem samotného firebugu k nemu možno budete potrebovať užitočný doplnok - FireCookie, pomocou ktorého (prekvapenie:-) môžete prezerať a meniť cookies.

    Panel nástrojov pre vývojárov webových stránok pre Firefox

    Ďalší užitočný doplnok k Ognelis. Vyzerá to takto:

    Pozrime sa bod po bode.

    Zakázať

    Umožňuje vypnúť JavaScript, zakázať používanie vyrovnávacej pamäte, čo je veľmi užitočné pri vývoji (umožňuje vám mať istotu, že stránka sa načítala najnovšími aktualizáciami), zrušiť farby použité na stránke a nahradiť ich štandardnými , zakázať odosielanie v hlavičke referrer (stránka, z ktorej bolo sprostredkovanie uskutočnené) ).

    Cookies

    Užitočná možnosť pre prácu so súbormi cookie: môžete ich zobraziť, odstrániť, zamietnuť a pridať.

    CSS

    Táto ponuka obsahuje najúžasnejšiu funkciu panela s nástrojmi pre vývojárov – úpravu CSS za behu. Okrem toho je možné zobraziť css, zakázať a tak ďalej a tak ďalej. Prítomnosť klávesových skratiek je tu podľa mňa veľmi užitočná (CTRL+SHIFT+C napríklad umožňuje prejsť priamo na prezeranie štýlov stránky)

    Formuláre

    Všetko pre prácu s formulármi: zobrazenie hesiel, zobrazenie informácií o formulároch, konverzia metód formulárov (GET » POST a naopak) a mnoho ďalšieho. Užitočnou funkciou je „Populate Form Fields“ na automatické vypĺňanie polí formulára (napríklad pri testovaní webu, keď je vypnutá funkcia zapamätania si hesiel. Inak v tejto položke nevidím nič užitočné.

    snímky

    Existuje užitočná funkcia na zakázanie obrázkov – aby ste videli, ako vaša stránka vyzerá bez obrázkov. Obrázky môžete zakrúžkovať, zobraziť ich veľkosti a zobraziť alternatívne atribúty.

    Informácie

    V tejto ponuke je veľa možností. Užitočná môže byť funkcia zobrazenia atribútov class a id na stránke. Okrem toho je zaujímavá položka “View Color Information” – na rýchle získanie informácií o farbách, ktoré sú na stránke použité. "Zobraziť veľkosť dokumentu" - zobrazenie veľkosti strany. „Zobraziť hlavičky odpovedí“ – zobraziť hlavičky stránok.

    Zmiešaný

    Najčastejšie používanou funkciou je vymazanie vyrovnávacej pamäte. Okrem toho sú tu dostupné funkcie „Page ruler“ – pravítko, „Page Magnifier“ – lupa a „Line guides“ – niekoľko riadkov, ktoré môžu byť užitočné na orezanie šablóny.

    Obrys

    Zvýraznenie rôznych prvkov stránky – tabuľky, nadpisy, odkazy, rámce, bloky. Zmena veľkosti vám umožňuje zmeniť veľkosť okna prehliadača tak, aby sa zmestilo do všetkých štandardných rozšírení obrazovky. Tu sú uložené funkcie nástrojov na overenie stránky. Lokálne aj externé. Pohodlný a rýchly prístup k overeniu HTML, CSS a ďalších. Na overenie HTML môžete použiť klávesovú skratku CTRL+SHIFT+H.

    Zdroj pohladu

    Zobraziť zdrojový kód. Možnosť prezerania v externej aplikácii, prezeranie vygenerovaného kódu.

    Najviac sa mi páči ten v pravom rohu. Je to rýchly HTML, CSS validátor a indikátor chýb JavaScriptu. Ak nie sú žiadne problémy, ikona je zelená a ak sa vyskytnú problémy, ikona je červená.

    Panel s nástrojmi pre vývojárov programu Internet Explorer

    Od verzie 8.0 je v tomto prehliadači už zabudované ladenie chýb. Dá sa to jednoducho nazvať kláves F12. Pravda, je to biedne ako program z 90. rokov.

    Pre tento prehliadač však existuje oveľa chladnejší nástroj, takzvaný panel s nástrojmi pre vývojárov Internet Explorera, ktorý si môžete stiahnuť z odkazu.

    Vzhľadovo tento panel s nástrojmi, samozrejme, vyzerá ako firebug, ale, žiaľ, ešte na to nedozrel. Aj keď na druhej strane má niektoré schopnosti, ktoré firebug nemá. Internet Explorer Developer Toolbar by som nazval akýmsi hybridom Firebugu a Webový vývojár FireFox Panel s nástrojmi.

    Rovnako ako vo Firebug je možné skontrolovať prvok jednoduchým kliknutím. Ak však okamžite vidíme vypchávky a okraje, tu takáto príležitosť neexistuje.

    Panel s nástrojmi pre vývojárov Internet Explorer navyše dynamicky neaktualizuje strom prvkov ako Firebug. To znamená, že ak zmeníme čokoľvek na stránke pomocou js, pomocou tohto panela s nástrojmi nič neuvidíme.

    Čo si môžete užiť, je zmena CSS za behu (jednoduchý spôsob, ako nájsť, čo hacknúť :), možnosť zakázať CSS a obrázky, možnosť rýchlo vymazať vyrovnávaciu pamäť a hrať sa s cookies, rýchly prístup k overeniu.

    Najlepšia časť: je tu vstavaný výber farieb, ktorý vám umožňuje získať akúkoľvek farbu zo stránky pomocou pipety. (pre ff existuje samostatný doplnok ColorZilla).

    Debug DebugBar pre Internet Explorer

    DebugBar pre Internet Explorer si môžete stiahnuť z uvedeného odkazu.

    Zaujímavé rozšírenie samo o sebe. Nainštalované ako dodatočný panel do prehliadača:

    Z nejakého dôvodu je tu zabudovaný vyhľadávač, kvapkadlo, možnosť zmeniť veľkosť okna a opäť z nejakého dôvodu možnosť poslať stránku priateľovi na mydlo. Aj keď to môže byť užitočné. Túto príležitosť sa mi však nepodarilo využiť.

    Okrem toho existuje inšpektor:

    Vývojári sa neuspokojili so spôsobom kontroly klikaním či ukazovaním: prišli na zaujímavejšiu vec. V DebugBar musíte pretiahnuť zameriavací kríž na požadovaný prvok, aby ste ho videli v strome. Neexistuje možnosť upravovať CSS. Existuje však validátor a vstavaná konzola js.

    A ak sa pohrabete v nastaveniach, nájdete toto:

    Aj vtipné, aj smutné.

    Je známe, že Panel nástrojov pre vývojárov bude zabudovaný do ôsmeho prieskumníka. Bude to podobné ako v treťom odseku, ale dúfame, že to bude lepšie.

    Odlaďte DragonFly pre Operu

    DragonFly je zabudovaný do Opery od verzie 9.5, takže nie je potrebné ho inštalovať. Ak chcete aktivovať Dragonfly, prejdite na Nástroje → Rozšírené → Nástroje pre vývojárov. A ak v angličtine, tak Tools → Advanced → Developer Tools.

    Okamžite vás upozorním, že DragonFly je vo fáze Alpha2, čo vysvetľuje mnohé z jeho chýb.

    Zoznam funkcií:

    • inšpektor DOM;
    • Kontrola kliknutím (opäť neuvidíme odsadenie ako vo FireFoxe);
    • Úprava ;
    • Rýchly prístup k chybovej konzole.

    DF je niečo ako samostatná stránka v rámci. Ak ho otvoríte, bude otvorený pre všetky karty (na rozdiel od firebugu). Preto pred kontrolou prvku musíme vybrať zo zoznamu stránku, ktorú chceme zobraziť.

    Žiaľ, tu, rovnako ako v lište nástrojov Dav v Internet Exploreri, sa dynamicky vytvorené prvky nezobrazujú. A vo všeobecnosti, keď skontrolujeme stránku, nespustí sa žiadny JavaScript: neklikne sa na odkazy a tlačidlá. Dúfajme, že všetky tieto funkcie uvidíme, keď sa DragonFly priblíži k vydaniu.

    Debug WEB Inspector v Safari

    Hneď poviem, že ide o prehliadač Safari Ušli mi informácie, preto nezodpovedám za primeranosť materiálu, ako sa hovorí.

    Ak chcete povoliť položku „Vývoj“ v ponuke Safari, musíte povoliť príslušnú položku v nastaveniach (karta „Rozšírené“):

    V menu „Vývoj“ máme k dispozícii nasledujúce funkcie:

    Pozrime sa bližšie na WEB inšpektora:

    V predvolenom nastavení sa inšpektor otvorí v režime zobrazenia HTML. Dá sa však prepnúť do režimu zobrazenia DOM. Na tento účel je na vrchnej doske vypínač. Keď umiestnite kurzor myši na prvok v inšpektorovi, zvýrazní sa na samotnej stránke. Nemôžete vidieť výplň, zmeniť označenie alebo CSS za behu, ani vidieť dynamické zmeny v DOMe počas behu ako vo FireBug. Ale musíte uznať, že to vyzerá veľmi roztomilo.

    Ak chcete pracovať s inšpektorom v okne prehliadača, môžete kliknúť na tlačidlo v ľavom dolnom rohu.

    Dokonca aj v prehliadači Safari je k dispozícii funkcia ako „Časová os siete“ (tlačidlo „Sieť“ v inšpektorovi):

    Jasne vidíte, kedy a ako dlho trvá sťahovanie súborov. Môžete si zobraziť aj hlavičky žiadostí, ale samotný obsah si, žiaľ, zobraziť nemôžete.

    Ladenie pre vývojárov v prehliadači Google Chrome

    Lame sa zrodil v pokročilej forme a okamžite má, síce zatiaľ pokrivené, ale stále nástroje pre vývojárov.

    • inšpektor DOM;
    • javascript debugger;
    • konzola JavaScript.

    Ak chcete skontrolovať akýkoľvek prvok, musíte naň kliknúť pravým tlačidlom myši a v kontextovej ponuke vybrať možnosť „Zobraziť kód prvku“:

    Funkčnosť je rovnaká ako v Safari: prvky sú zvýraznené pri umiestnení kurzora myši, ale nie sú dostupné úpravy CSS a HTML a zmeny v DOM sa nesledujú. Ale tlačidlo v ľavom dolnom rohu, ktoré by malo pripevniť inšpektor k oknu prehliadača, nefunguje.

    Na karte „Zdroje“ môžeme vidieť nasledovné:

    Mierne odlišné od rozsahu v safari. Priesvitné na tomto diagrame zobrazuje relatívne veľkosti súborov a plná farba zobrazuje čas načítania. Tak či onak je zrejmé, že táto časť prehliadača Chrome nie je ani zďaleka dokončená.

    V tomto článku som sa pozrel na najznámejšie rozšírenia a vstavané prvky prehliadača.

    Sú aj iné, napr.

    • Internet Explorer WEB Development Helper - dobrý pomocník pre vývojárov ASP.NET (Internet Explorer);
    • WEB Developer Toolbar - panel nástrojov pre Internet Explorer a FireFox. Existuje niekoľko užitočných funkcií;
    • WEB Accessibility Toolbar – panel nástrojov pre Internet Explorer. Nič zaujímavé.

    Ak existujú doplnky, ktoré som nespomenul, ale mali by, alebo existujú funkcie pre uvedené rozšírenia, ktoré mi chýbali, napíšte.

    Užite si to pre svoje zdravie!

    Internet Explorer 11 pre Windows 8.1 a Windows 7 prichádza s úplne prepracovanou a vylepšenou sadou vývojárskych nástrojov zabudovaných do prehliadača, ktoré vývojárom pomáhajú vytvárať, odstraňovať problémy a optimalizovať používanie moderných webových stránok a aplikácií na viacerých zariadeniach. Nové nástroje, ktoré pre stručnosť nazývame jednoducho F12, umožňujú webovým vývojárom pracovať rýchlo a efektívne.

    Tímy Visual Studio a Internet Explorer spolupracovali na vytvorení nástrojov F12, ktoré sú postavené na princípe pomoci vývojárom rýchlo prejsť od problému k riešeniu pomocou zmysluplných údajov. Nový balík F12 poskytuje rýchly a flexibilný webový zážitok s nástrojmi na diagnostiku a opravu problémov s výkonom, ako aj s nástrojmi, ktoré vám pomôžu lepšie pochopiť, ako Internet Explorer rozdeľuje a vykresľuje webové aplikácie. Nástroje F12 podporujú rýchly, interaktívny pracovný postup používaný modernými webovými vývojármi.

    Univerzálna sada nástrojov

    Nová súprava F12 pomáha vývojárom rýchlo prejsť od problému k riešeniu. Niektoré vzrušujúce nové funkcie zahŕňajú:

    • Odozva používateľského rozhrania a nástroje na profilovanie pamäte, ktoré pomáhajú vývojárom vytvárať rýchle a pohotové webové aplikácie.
    • Live DOM Explorer a CSS checker, ktoré sa aktualizujú so stránkou, takže vývojári môžu interaktívne skúmať, ako dynamický obsah ovplyvňuje značenie a štýl
    • Povoľte rýchle spustenie ladenia JavaScriptu bez obnovovania stránky, aby vývojári mohli začať rýchlejšie

    Pri používaní nástrojov F12 si všimnete mnoho ďalších vylepšení, ktoré vám pomôžu dosiahnuť rýchly, interaktívny pracovný postup:

    • Rýchly prístup k týmto nástrojom kliknutím pravým tlačidlom myši na položku ponuky pomocou možnosti „začiarknuť položku“
    • Efektívna interakcia s klávesnicou
    • Rozsiahla možnosť kopírovania prvkov a komponentov z nástrojov, takže ich možno vložiť do ľubovoľného editora bez ďalšieho formátovania

    Najdôležitejšie je, že tieto nástroje teraz zobrazujú najúplnejšie a najpresnejšie informácie – od pravidiel @media a!important v DOM Exploreri až po základnú štruktúru nákladov v UI Response Profiler. Tieto nástroje tiež poskytujú priamo relevantné údaje; napríklad pamäťový profiler identifikuje uzly DOM, ktoré sú "živé", ale nie sú odkazované zo stromu značiek alebo vykresľovania.

    Nový balík F12 rozširuje možnosti Visual Studia a poskytuje vývojárom konzistentné a bezproblémové skúsenosti so všetkými našimi nástrojmi a rámcami na vývoj webových aplikácií.

    Poďme sa teraz rýchlo pozrieť na tieto nástroje v akcii.

    Profilovanie aplikácií pomocou analyzátora odozvy používateľského rozhrania

    Analyzátor odozvy používateľského rozhrania vám pomôže presne pochopiť, kde sa míňa čas procesora, takže vaša aplikácia môže dosiahnuť svoj plný výkonový potenciál. Tento nástroj vám poskytuje zásadný prehľad o vnútornom fungovaní prehliadača Internet Explorer a poskytuje vizualizáciu kódu HTML, CSS a JavaScript za behu, ako aj dôležité súvisiace efekty, ako sú značky a zbieranie odpadu. Na prvý pohľad môžete presne vidieť, ako rýchlo vaša aplikácia reaguje a vykresľuje. To vám umožní identifikovať konkrétne zdroje úzke miesta a prijať zmysluplnejší prístup k jeho optimalizácii.

    Profilovanie webových stránok

    Analyzujte využitie pamäte aplikácie pomocou nástroja Memory Profiler

    Tento analyzátor pamäte vám pomôže vyhnúť sa únikom pamäte alebo nadmernej spotrebe pamäte. Tvorba webových aplikácií, ktoré fungujú pre klientov nepretržite alebo komplexne interaktívne aplikáciečasto znamená, že ich dizajnér musí venovať osobitnú pozornosť problémom s využitím pamäte.

    Hoci JavaScript je prostredie zbierajúce odpadky, aplikácie zvyčajne spotrebúvajú viac pamäte jednoducho preto, že referencie na objekty neboli (a nemôžu byť) uvoľnené. Analyzátor pamäte vám môže pomôcť identifikovať tieto problémy poskytnutím informácií o každom objekte na stránke, či už ide o objekt JavaScript alebo objekt DOM. Pomocou týchto informácií môžete napríklad zistiť, koľko pamäte má prvok a ktoré predmety podporujú jeho zachovanie. Ale čo je najdôležitejšie, môžete porovnať dve snímky a zistiť, čo sa zmenilo. To vám umožní pochopiť, prečo vaša aplikácia využíva viac pamäte, a opraviť to.

    Snímka pamäte haldy zobrazujúca zakázané prvky DOM

    Rýchlo pochopte problémy s výkonom aplikácie pomocou Performance Dashboard

    Aby ste mohli rýchlo identifikovať problémy ovplyvňujúce výkon vašej stránky, Internet Explorer 11 obsahuje miniaplikáciu na stránke s názvom Performance Dashboard, ku ktorej je možné pristupovať pomocou Ctrl+Shift+U alebo položky ponuky Nástroje (Alt+T). Tento panel dynamicky zobrazuje štatistiky v programe Internet Explorer pre kľúčové metriky výkonu, ako je čas vykresľovania, pamäť, počet snímok za sekundu (fps) a využitie procesora. Výkonový panel nevyžaduje použitie nástrojov F12 a dá sa použiť aj v moderných prehliadačoch.

    Pomocou Performance Dashboard môžete rýchlo identifikovať interakcie so stránkami, ktoré spôsobujú zasekávanie snímkovej frekvencie alebo vysoké využitie procesora. Potom môžete prejsť na nástroje F12, aby ste problém reprodukovali a našli riešenie.


    Kontrola prvkov a zmena značiek a štýlov pomocou DOM Explorer

    DOM Explorer uľahčuje interaktívnu konfiguráciu @media dotazov a CSS pravidlá a ich vlastnosti. Preto používateľské rozhranie vaša aplikácia sa stane vysoko efektívnym a citlivým prostredím pre viacero zariadení. Na webovej stránke môžete rýchlo začať kliknutím pravým tlačidlom myši a skontrolovaním požadovaného prvku, čím sa spustia nástroje F12 spolu s prvkom vybratým v Prieskumníkovi DOM, pričom sa dynamicky zobrazia použité pravidlá DOM a CSS. Vykreslené tabuľky DOM a CSS sú dynamické, čo vám umožňuje pochopiť, ako Internet Explorer interpretuje vaše označovanie, štýly a pravidlá CSS. Pri interakcii so stránkou alebo jej zmene pomocou Prieskumníka DOM sa vykonané zmeny prejavia okamžite.

    Kontrola značiek a štýlov

    Keď robíte zmeny v tabuľke CSS, DOM Explorer uľahčuje získanie správnej hodnoty vlastnosti alebo vlastností pomocou IntelliSense. Môžete ľahko zistiť, ktoré vlastnosti sú nesprávne alebo nerozpoznané, a potom skopírovať pravidlo, aby ste ho znova použili na svoj zdroj.

    Ladenie JavaScriptu pomocou debuggeru a konzoly

    Nový ladiaci nástroj JavaScript vám poskytuje nástroje na vyhľadanie a rýchlu opravu poškodeného kódu. Ladiaci nástroj JavaScript môže otvárať a kontrolovať viacero súborov, aj keď bola vaša knižnica skriptov minifikovaná, nastaviť body prerušenia a stopy, kontrolovať objekty JavaScript, hodnoty, reťazce rozsahu a zobraziť obsah zásobníka. Keď spustíte nástroje F12, okamžite sa spustí aj ladiaci nástroj JavaScript, takže môžete začať hneď

    Pri ladení pravdepodobne budete chcieť získať určitú interakciu s vaším webom. Konzola je kľúčovým nástrojom na splnenie tejto úlohy. Ku konzole môžete pristupovať kedykoľvek, vďaka čomu je používanie tohto interaktívneho prostredia s IntelliSense a vizualizérmi objektov efektívne. Konzola tiež poskytuje širokú škálu špecializovaných rozhraní API, ktoré vám umožňujú protokolovať výstup, analyzovať množstvo času stráveného v konkrétnom kóde a poskytovať vykresľovanie objektov, keď potrebujete vykonať hĺbkovú kontrolu objektov JavaScript.

    Zhrnutie

    Tento blogový príspevok jednoducho poskytuje náčrt nových prvkov v nástrojoch F12. môžeš nájsť úplný zoznam Nový funkčnosť, dostupné pre vývojárov v Internet Exploreri 11 v článku „Čo je nové v nástrojoch F12“ a „Internet Explorer 11 Preview Developer Guide“. Viac sa môžete dozvedieť aj v testovacej ukážke programu Internet Explorer „F12 Adventure“.

    Tešíme sa na vašu spätnú väzbu a tešíme sa na dlhodobý vzťah s komunitou vývojárov. Podeľte sa o svoje návrhy prostredníctvom nástroja Spätná väzba a návrhy programu Internet Explorer 11 alebo na lokalite Connect.

    PJ Hough
    , viceprezident Visual Studio



    
    Hore