AspNet.sk     O súťaži HTML5     Výsledky súťaže HTML5     Pravidlá súťaže     Internet Explorer 9 - príručka pre vývojárov
Menu

Praktické cvičenia

Vývojárske nástroje v prehliadači Internet Explorer 9

mslogo_DS_300

Ciele praktického cvičenia

Toto praktické cvičenie je zamerané možnosti operatívneho ladenia a overenia zmien stránok v štýle tvorby prototypu pomocou vývojárskych nástrojov zabudovaných do Internet Explorer-a 9. Dokončením tohto cvičenia získate znalosti z nasledujúcich oblastí:

·         Náhľad na vplyv zmien v kóde stránky a v jej kaskádových štýloch

·         Ladenie a diagnostika stránok pomocou vývojárskych nástrojov Internet Explorer-a 9

Stručný popis

Internet Explorer 9 ponúka vývojárom a webovým dizajnérom po stlačení klávesy F12 prechod do vývojárskych nástrojov, ktoré sú zabudované priamo do prehliadača. Môžete tak vytvárať prototypy zmien na stránke, ladiť kód stránky vrátane javascriptu a diagnostikovať príčiny vykonnostných problémov pri jej renderovaní.

Predpoklady zvládnutia praktického cvičenia

·         Základné znalosti webového vývoja

·         Internet Explorer 9

 

Viac informácií

Vývojárska príručka “Internet Explorer 9, HTML5 a CSS3”, časť vývojárske nástroje :
http://msdn.microsoft.com/sk-sk/dd727769

Ladenie skriptov vývojárskymi nástrojmi
http://msdn.microsoft.com/sk-sk/library/dd565625(v=VS.85).aspx

Profilácia skriptov vývojárskymi nástrojmi
http://msdn.microsoft.com/sk-sk/library/dd565629(v=VS.85).aspx

Zdrojové kódy

 

Scenár

V prvej časti praktického cvičenia sa zoznámite so základnými možnosťami vývojárskych nástrojov a spôsobom ladenia webových stránok. Druhá časť je zameraná na techniku merania výkonu webových stránok a sledovanie dát prenášaných sieťou.

Predpokladaný čas potrebný pre dokončenie praktického cvičenia

30 minút

 

Cvičenie č.1 – Prvý pohľad na ladenie vývojárskymi nástrojmi IE 9

 

Našou prvou úlohou je zoznámenie sa s oknom vývojárskych nástrojov IE 9, po ktorom nasleduje jednoduchá inštruktáž ladenia webu v prostredí IE 9.  

Úloha č.1 – Prvý pohľad na vývojárske nástroje IE 9

  1. Spustite Internet Explorer 9.
  2. Vývojárske nástroje sú súčasťou každej inštalácie IE 9. Stlačte klávesu „F12“ alebo prejdite do menu „Tools->F12 Developer Tools” („Nástroje->F12 vývojárske nástroje“).
  3. Okno vývojárskych nástrojov sa podľa prednastavenia otvorí vo vlastnom okne prehľadávača Internet Explorer. Potvrďte tlačidlo „Pin“ („pripnúť“), ktoré je v pravom hornom rohu okna.

pin.JPG   Tým presuniete „vývojárske nástroje“ do okna práve otvorenej webovej stránky.

  1.  V prehľadávači Internet Explorer otvorte novú záložku kliknutím na plochu vedľa existujúcej záložky (alebo klávesovou skratkou CTRL+T).

5.      Prepínajte zobrazenie medzi záložkami. Všimnite si, že každá záložka v prehľadávači Internet Explorer má vlastné „vývojárske“ okno.

6.       Zatvorte druhú záložku prehľadávača Internet Explorer. Tým samozrejme zatvoríte aj asociované „vývojárske“ okno.

7.      Potvrďte tlačidlo „UnPin“ unpin.JPG, ktoré sa nachádza v pravej časti hornej lišty vývojárskeho okna. Vývojárske nástroje sa zobrazia opäť v samostatnom okne.

8.      Otvorte v Internet Explorer-e 9 stránku „devtoolsdemo.html“ z priečinka “galeria” na disku, do ktorého ste rozbalili kód tohto praktického cvičenia. Povoľte spúšťanie javascriptového kódu volaného stránkou.  (Potvrďte “Allow blocked content” - “Povoľte blokovaný obsah” v notifikačnom okne na stránke.)

o   Poznámka: Toto bezpečnostné upozornenie je spôsobené tým, že otvárame HTML stránku z lokálneho disku a voláme v nej javascriptový kód. Ak by sme stránku umiestnili na internetový alebo intranetový server a volali ju ako zvyčajne cez „http://webserver...”, nemuseli by sme (pri zvyčajnej úrovni nastavenia bezpečnosti „surfovania”) manuálne povoľovať volanie javascriptu.

9.      Stlačte klávesu F12 na otvorenie okna vývojárskych nástrojov. Okno „Developer Tools“ má 6 módov: HTML, CSS, Console,Script, Profiler a Network. HTML mód je prednastavený a umožňuje vám prezerať strom DOM (objektový model dokumentu) vo vlastnom paneli.

10.  „Kliknite“ na znak „+“ vedľa niektorého z uzlov dokumentu v DOM paneli, čím rozbalíte jeho podstrom. Stromom môžete prechádzať aj klávesmi „UP“ a „DOWN“. Šípkami „doľava“ a „doprava“ na klávesnici môžete zbaľovať resp. rozbaľovať vybraný uzol. Po výbere uzla sa v pravom paneli vývojárskeho okna zobrazia jeho detaily.

11.  Vyberte v hornej časti okna záložku „CSS“, ktorou sa prepnete do módu prezerania kaskádových štýlov naviazaných na otvorenú webovú stránku.

12.   Z „dropdown“ zoznamu môžete vyberať CSS súbory, ktoré sú naviazané na webovú stránku.

13.  Vyberte v hornej časti okna záložku „Script“, ktorá Vám sprístupní funkcie na prezeranie a ladenie skriptov použitých na webovej stránke.

14.  Záložka Profiler umožňuje spustiť ukladanie profilačných dát stránky (napr. čas výkonu funkcií), zobrazovať ich v reportoch a exportovať ich pre ďalšiu analýzu do formátu „csv“.

 

Úloha č.2 – Ladenie webovej stránky

V tomto kroku si preskúšame niekoľko vlastností  „ Developer Tools“ vrátane Javascript „debuggera“. 

  1. Prepnite sa do okna prehľadávača Internet Explorer, v ktorom je v používateľskom režime zobrazená stránka „devtoolsdemo.html“.
  2. Kliknite na prvý zmenšený obrázok na stránke a všimnite si, že jeho väčšia verzia sa nezobrazuje na ploche na to určeného „placeholdera“ (biela plocha s textom „moja galéria obrázkov“). Narazili sme teda na prvý problém, ktorý sa pokúsime odstrániť.

 

  1. Prepnite sa do vývojárskeho okna (alebo stlačte kláves „F12“ na jeho spustenie).
  2. Na to, aby sme našli príčinu problému, musíme nájsť previazanosť uzlov zmenšenín a normálnych veľkostí obrázkov v DOM strome stránky. Na nájdenie príslušných uzlov použijeme funkciu „Select Element by Click“. V „toolbare“ HTML režimu kliknite na ikonu „Select Element by Click“ selectelement.JPG.
  3. V používateľskom okne prehľadávača „kliknite“ na zmenšeninu obrázka, čím príslušný uzol vyberiete aj v DOM strome vo „vývojárskom“ okne. Všimnite si, že rodičovský „handler“ udalosti „onclick“ volá funkciu „showPicTN()“.
  4. Vyberte záložku „Script“, čím sa prepnete do režimu prezerania a ladenia javascriptového kódu.
  5. Ľavý panel zobrazí HTML kód vrátane všetkých skriptov na stránke. „Odskrolujte“ kód až k funkcii „showPicTN()“.Všimnite si, že funkcia hľadá element pomocou ID.

Poznámka: Pre zobrazenie súborov externých skriptov je najskôr potrebné povoliť „script debugging“ v internetovom prehľadávači.

8.       Vyberte záložku „HTML“.

9.       Aktivujte znovu „Select Element by Click“ a kliknite na obrázok „placeholdera“(bielej plochy s textom „Moja galéria obrázkov") pre výber uzla v DOM strome.

10.   Prepnite sa do „vývojárskeho okna“ a všimnite si, že element má ID atribút s hodnotou „placeholder“.

11.   Vyberte záložku „Script“. Ladenie skriptu je v prehľadávači Internet Explorer podľa prednastavenia zakázané. IE9 ale podporuje ladenie skriptu na inštanciu, čo využíva modul „Developer Tools“. Ladenie skriptu sa dá povoliť pre aktuálne ladenú inštanciu bez toho, aby bolo nutné povoliť ladenie skriptov pre celý Internet Explorer (cez menu „Internet Options“.)

12.   Potvrďte tlačidlo „Start debugging“.

13.   Nastavte „breakpoint“ vo funkcii „showPicTN“ kliknutím naľavo od prvého riadka jej kódu (‘var source=whichpic.getAttribute(“href”);’).  

14.   Prepnite sa do okna prehľadávača a kliknite na zmenšeninu obrázku na stránke, čím sa kód spracuje až do miesta „breakpointu“.

15.   Vyberte záložku „Locals“ v pravom paneli na zobrazenie lokálnych premenných. Všimnnite si  „placeholder“, ktorý by mal byť nasmerovaný na náš obrázok.

16.   Dva razy za sebou kliknite na „Step into“ stepinto.JPG v „toolbare“ režimu „Script“ (alebo dva razy potvrďte klávesu F11).

17.   V záložke „Locals“ nájdite informáciu o elemente, na ktorý „placeholder“ ukazuje. Kliknite na znak „+“ vedľa „placeholdera“, aby ste zobrazili jeho vlastnosti.

18.   „Odskrolujte“ smerom dolu k „id“ a všimnite si, že „id“ atribút nemá hodnotu. Neukazuje teda na „placeholder“.

19.   „Odskrolujte“ ďalej a všimnite si, že atribút „name“ má hodnotu „placeholder“ a atribút „tagName“ hodnotu „META“. Príčinou problému je teda to, že premenná „placeholder“ ukazuje na zlý element. Ak zmodifikujeme „placeholder“ tak, aby ukazoval na správny element, vyriešime tým celý problém. Namiesto použitia „getElementById“ použitého na nájdenie „placeholder“ elementu, využijeme znalosť štruktúry „sajtu“, aby sme našli rodičovský uzol a jeho prvého potomka. Úpravu si môžeme odskúšať v režime ladenia javascriptu.

20.   Kliknite na záložku „Console“ v pravom paneli a napíšte do zobrazeného textového poľa (v spodnej časti pravého panela) nasledujúci kód:

      placeholder = document.getElementById('imageContainer').childNodes(0);     

             Potvrďte tlačidlo „Run Script“.

21.  Kliknite opäť na záložku „Locals“, zamerajte sa na atribút „id“ premennej „placeholder“ a všimnite si, že teraz má správnu hodnotu „placeholder“.

22.  Kliknite na tlačidlo „Continue“ continue.JPG (alebo potvrďte kláves F5) v toolbare režimu „Script“ pre pokračovanie vykonávania skriptu. Chyba je opravená a zobrazí sa väčšia verzia vybraného obrázku. Podarilo sa nám totiž nájsť časť kódu, v ktorom skript vyberá zlý element volaním „getElementById(„placeholder“)“.

23.  Kliknite vo vývojárskom okne na ikonu „breakpoint-u“ pre jeho odstránenie.

24.  Pre ukončenie ladenia potvrďte tlačidlo „Stop debugging“.

 

 

Cvičenie č.2 – Renderovanie IE 9 a editovanie HTML/CSS

 

Úloha č.1 – Testovanie webov v režime „IE9 Standards“

  1. Prepnite sa do vývojárskeho okna a prejdite do menu „Document Mode -> Internet Explorer 9 Standards”. Stránka sa zaktualizuje a na jej renderovanie sa použije prednastavený, na štandardoch postavený režim. Nastavenie nemá vplyv na ostatné záložky (stránky) prehľadávača Internet Explorer, použije sa len pre aktuálnu záložku, pokým ju nezavriete.
  2. Prepnite sa do okna prehliadača a kliknite na zmenšeninu obrázka. Stránka pracuje správne, pretože Internet Explorer 9 je postavený na štandardoch a my sme si v tomto kroku vynútili cez „Developer Tools“ použitie režimu „IE9 Standards“. (Napriek tomu, že stránka ma v hlavičke nastavený mód kompatibility pre Internet Explorer 7.)

 

Krok 2 – Editovanie HTML a CSS

Náš „sajt“ sa v štandardnom režime IE9 správa korektne. Má však niekoľko defektov vzhľadu. Všimnime si, že navigačný panel sa zobrazuje pod „placeholderom“. Lepšie umiestnenie panela by bolo napravo, hneď vedľa zmenšených obrázkov. Navyše titulok navigačného panela je nevýrazný. Lepšie by vyznel v bledožltej farbe než čiernej. 

  1. Prepnite sa do HTML režimu vývojárskeho okna, nájdite a vyberte v DOM strome „DIV“ s „id=container“. Panel na pravej strane zobrazí ďalšie informácie o vybranom uzle.
  2. Kliknite na záložku „Layout“ v pravom paneli. Zobrazí sa panel vizuálne reprezentujúci model a korešpondujúce hodnoty pre vybraný element. Hodnoty „offset“ zobrazujú vzdialenosť k rodičovskému objektu podľa definície „offsetLeft“ a „offsetTop“. Hodnoty pre okraje, orámovanie a odsadenie sú zobrazené tak, ako ich nastavil autor stránky. (Ak autor stránky tieto hodnoty neurčil, v „Layout“ záložke sa zobrazia hodnoty prednastavené v prehľadávači Internet Explorer. Najvnútornejšími hodnotami elementov sú výška a šírka definované vlastnosťami „offsetHeight“ a „offsetWidth“. Všimnite si, že šírka je 750 pixlov.

layout.JPG

 

  1. Rozbaľte podstrom „DIV“ s „id=container“.
  2. Vyberte prvé poduzly. Ich šírka je 750 pixlov resp. 120 pixlov. Pre tieto príliš veľké hodnoty kontajner „pretečie“ a vytlačí navigačný panel pod seba. Nastavenie šírky galérie na 630 pixelov by malo tento problém vyriešiť.
  3. Vyberte „DIV“ s „id=galeria“.
  4. V DOM strome vyberte hodnotu atribútu „style“, aby ste umožnili jej editovanie.
  5. Pridajte do vybraného štýlu vlastnosť „width“ s hodnotou 630 pixelov. Celá „style“ hodnota bude po tejto zmene takáto:

 

      position:relative;float:left;width:630px;

 

Potvrďte klávesu ENTER.

o   Poznámka: Internet Explorer použije nové hodnoty okamžite a navigačný panel sa zarovná správne.

8.       Vyberte v DOM strome „DIV“ s „id=navigacnyPanel“.

9.       Kliknite na záložku „Style“ v pravom paneli. Zobrazí sa výpis, v ktorom nájdete všetky pravidlá štýlov aplikované na vybraný element v kaskádovom poradí. Každá prekrytá vlastnosť je prečiarknutá.  

 

styl.JPG

  1. Kliknite na záložku „Trace Styles“. Zobrazí sa panel, v ktorom nájdete zoznam všetkých špecifických vlastností štýlu. Rozbalenie vlastnosti zobrazí všetky pravidlá, ktoré nastavujú vlastnosť v kaskádovom poradí.
  2. Vyberte znak „+“ pri atribúte „color“, čím túto vlastnosť rozbalíte a zobrazíte niekoľko pravidiel nastavujúcich farbu v navigačnom paneli. Pretože sú v kaskádovom poradí, dá sa jednoducho z nich vyčítať farba špecifikovaná v „#navigacnyPanel“.
  3. Kliknite na „checkbox“ vedľa „#navigacnyPanel - #000000”, čím „vypnete“ pravidlo a nastavíte inú požadovanú farbu („#dddcc5“) zdedenú v kaskáde.
  4. Skontrolujte zobrazovanie stránky v prehľadávači. Navigačný panel je už napravo od galérie a jeho titulok je vo výraznejšej farbe.

riesenie.JPG

Upozornenie: Všetky úpravy robíte nad lokálne „nakešovanou“ kópiou stránky. Vytvárate teda prototyp riešenia problému, ktorý musíte preniesť do kódu stránky na strane servera.  

Cvičenie č.3 – Meranie výkonu stránky pomocou window.performance

 

Meranie reálneho výkonu webov je dôležitou časťou aplikačnej profilácie. Veľa vývojárov pridáva do stránok javascript zaznamenávajúci časy pri spracovaní stránky, čím ale spomaľujú stránky pre koncových používateľov a skresľujú výsledky monitorovania stránok. Browser vie presne, ako dlho trvalo načítanie stránky a ako dlho spustenie jej kódu na pozadí, čo viedlo k poskytnutiu vývojárskeho API rozhrania v Internet Explorer-e 9, ktoré slúži na prístup výkonnostným výsledkom spracovania stránok.

Úloha č.1: Výstup výkonnostných štatistík

Vložte na koniec testovacej stránky  tlačidlo, ktoré zavolá metódu vypisujúcu vykonnostné štatistiky webovej stránky.

1.       Otvorte stránku “devtoolsdemo.html v editačnom móde. (Výber editora ponecháme na vás. Postačí vám aj obyčajný editor textu typu “poznámkový blok”. Editor webových stránok v Visual Studiu 2010 SP1 alebo Visual Web Developer 2010 Express ponúka prehľadnosť,  HTML5 intellisense a kontrolu “html/css/js” kódu.)

2.       Vložte do html kódu stránky “devtoolsdemo.html” na koniec bloku “body” nasledujúci kód:

 

<hr />

 

<button onclick="perfMetrics();">Výkonnostné štatistiky</button>

<div id="perfStats"></div>

 

 

3.       Po stlačení tlačidla sa zavolá javascriptový kód funkcie “perfMetrics”, v ktorom získate výkonnostné štatistiky a zobrazíte ich v pravej časti stránky. Vložte do bloku “<script …>…</script>” na začiatku stránky “devtoolsdemo.html” kód funkcie perfMetrics:

 

function perfMetrics() {

    var p = window.performance.timing;

 

    var perfList = "<ul>";

 

    perfList += "<li>Navigation: " + (p.loadEventEnd - p.navigationStart) + "ms</li>";

    perfList += "<li>Request: " + (p.responseStart - p.requestStart) + "ms</li>";

    perfList += "<li>DOM complete: " + (p.domComplete - p.domLoading) + "ms</li>";

    perfList += "</ul>";

 

    document.getElementById("perfStats").innerHTML = perfList;

}

 

 

4.       Zmeňte mód kompatibility v hlavičke dokumentu na IE9, aby kód mal prístup k objektovému modelu objektu “window.performance”:

                <meta http-equiv="X-UA-Compatible" content="IE=9" />

5.       Úpravy uložte a klávesou F5 aktualizujte okno prehliadača. Potvrďte tlačidlo “Výkonnostné štatistiky” v dolnej časti stránky a analyzujte výsledky.

Viac informácií o meraní výkonu webových stránok nájdete na stránke

http://ie.microsoft.com/testdrive/Performance/msPerformance/Default.html?loaded=0  

 

Cvičenie č.4 –  Snímanie prenosov po sieti a zmena reťazca “user-agent”

 

Už vývojárske nástroje  v Internet Explorer-e 8 umožňovali editovať a ladiť CSS a HTML kód, testovať a ladiť skripty, profilovať výkon skriptov, zobrazovať a meniť Document Object Model (DOM) atď. Internet Explorer 9 pridáva k tejto funkcionalite niekoľko nových vlastností  pre jemné dolaďovanie výkonu a návrhu stránok. Patria sem vylepšené možnosti profilácie, nástroj na prepínanie “user-agent” hlavičiek a pohľad na obsah sieťových prenosov.

Úloha č.1: Snímanie prenosov po sieti

Zamerajme sa na záložku Network v Internet Explorer-e 9 , ktorá umožňuje zaznamenávať všetko, čo je odosielané a prijímané prehliadačom.

1.       Otvorte v Internet Explorer-e 9 stránku “default.html” v priečinku NetMonPriklad. Povoľte spúšťanie javascriptového kódu volaného stránkou.  (Potvrďte “Allow blocked content” - “Povoľte blokovaný obsah” v notifikačnom okne na stránke.)

2.       Potvrďte v Internet Explorer-e klávesu F12 na otvorenie okna vývojárskych nástrojov. 

3.       Predtým ako začnete trasovať sieťové prenosy, “vyčistite” keš prehliadača cez menu “Cache/Clear Browser Cache (CTRL-R)” .

4.       Vyberte záložku Network a potom potvrďte tlačidlo “Start Capturing” v “toolbar-e” na zaznamenávanie webových prenosov Internet Explorer-a 9.

5.       Prepnite sa do okna s obsahom stránky “default.html” a potrďte jej aktualizáciu klávesou F5. Zadajte nejaké kľúčové slovo do vyhľadávacieho políčka vpravo hore na stránke, aby ste vyvolali sieťovú komunikáciu s Bing vyhľadávačom na internete.

6.       Prepnite sa naspäť do okna vývojárskych nástrojov a potvrďte tlačidlo “Stop Capturing”.  Všimnite si, že IE9 medzitým pozberal sieťové dáta na analýzu.

7.       “Dvojkliknite” napríklad na prvú položku zaznamenaných dát.

Zobrazia sa dopňujúce dáta  o požiadavke. V hlavičke požiadavky sa posiela reťazec “user agent” s hodnotou “Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)”.  (Táto hodnota môže byť na 32-bitovom systéme mierne odlišná.)

8.       Prejdite postupne ďalšie záložky detailu požiadavky (Request Body, Response Headers, Response Body, Cookies, Initiator, Timings). Zosnímaný obsah sieťovej požiadavky vám poskytne detailný pohľad na prenášané data.

 

Úloha č.2: Zmena reťazca “User Agent”

Niektoré weby používajú reťazec “user agent” na detekovanie typu prehliadača a následné podmienené úpravy v renderovaní webových stránok. Takéto chovanie môže spôsobovať problémy, pretože Internet Explorer 9 je implicitne nastavený na mód založený na štandardoch. Vývojárske nástroje umožňujú zmeniť hodnotu reťazca “user agent” napríklad na hodnotu používanú inými prehliadačmi.

1.       V okne vývojárskych nástrojov vyberte menu “Tools/Change User Agent String” a vyberte niektorý z alternatívnych reťazcov “user agent”.

2.       “Vyčistite” históriu siete potvrdením tlačidla “Clear” a potom vyberte tlačidlo “Start Capturing”, čím spustíte mód zaznamenávania sieťových prenosov.

3.       Prepnite sa do okna Internet Explorer-a 9 a prejdite na iný web. Po načítaní novej webovej stránky sa opäť prepnite do okna vývojárskych nástrojov a potvrďte tlačidlo “Stop Capturing”.

4.       “Dvojklikom” otvorte detail prvej požiadavky v zozname zosnímaných sieťových požiadaviek a všimnite si informácie v záložke “Request Headers”.

Internet Explorer 9 posielal namiesto svojej identifikácie “user agent” s alternatívnym reťazcom.

 

Súhrn

 Toto praktické cvičenie Vás zoznámilo s vývojárskymi nástrojmi prehľadávača Internet Explorer 9 a ukázalo Vám možnosti ladenia webových stránok. „Developer Tools“ plne oceníte, keď s nimi začnete experimentovať na reálnych weboch a pri tvorbe stránok. Môžete ich použiť na okamžité preverenie, editovanie a ladenie webov, na kontrolu DOM stromov, kaskádových štýlov a na „debugovanie“ javascriptu.  Výkonnostné problémy webov vám pomôže diagnostikovať window.performance, nástroj na prepínanie “user-agent” hlavičiek a pohľad na obsah sieťových prenosov.     

 

Copyright © 2002 - 2011 CHASTIA s.r.o., Igor Stanek
Portál je hostovaný na serveroch firmy Quantasoft - www.qsh.sk.