Pokud potřebujete ověřit své stránky například v Internet Exploreru 7 nebo na mobilním Windows Phone 8, může vám k tomu posloužit nejnovější Internet Explorer 11, který lze nainstalovat do Windows 7 a 8.

IE11 a F12

Spusťte IE11 (aka Trident 7) a načtěte stránku, kterou chcete ověřit. Stiskněte klávesu F12 a zobrazí se debugger (který se nyní jmenuje „F12“). Debugger můžete tlačítkem vedle zavíracího křížku odpojit od okna IE (nebo ho naopak připojit zpět) a následně používat klávesu F12 pro přepínání mezi oknem IE a Debuggerem.

Emulation

V levé liště jsou tlačítka pro přepínání jednotlivých režimů. Jako první vás bude zajímat ten poslední, tedy Emulation (ikona s monitorem a mobilem).

Zde můžete měnit Document mode, neboli verzi jádra IE: Edge (neboli „nejnovější“, tedy IE11 alias Trident 7), 10 (Trident 6 – IE10 a WP8), 9 (Trident 5 – IE9 a WP7.5 Mango), 8 (Trident 4 – IE8), 7 (Trident 3 – WP7) a 5 (IE5, IE6, IE7 – v těchto IE se verze Trident ještě neuváděla). Důležité je, že IE11 obsahuje všechna předchozí jádra, takže změnou této volby skutečně dojde ke změně způsobu vykreslování DOMu a zpracování Javascriptu (nejde tedy vlastně o  „emulaci“).

Pod Browser profile můžete přepínat mezi klasickým (Desktop) a mobilním (Windows Phone) explorerem a pod User Agent můžete změnit identifikaci prohlížeče tak, aby i server správně rozpoznal zvolenou verzi a naservíroval správné HTML (pokud to vaše stránka vyžaduje). Po pravdě ale netuším, čeho dosáhnete přepnutím na Windows Phone, protože ani při tomto nastavení prohlížeč např. nerespektuje ViewPort nastavení a tak dojde k tomu, že při volbě rozlišení 800×480 a Landscape bude tvrdit, že šířka stránka je 455px, zatímco na skutečném WP bude 320px.

Sloupec Display složít pro volbu Windows Phone a můžete zde nastavit natočení a rozlišení telefonu (vlastně funguje i pro volbu Desktop, ale tam tohle použití není moc časté). Volbou poslední položky Custom můžete zadat vlastní rozlišení a dokonce i velikost obrazu (v palcích) a prohlížeč přepočte stránku do skutečné velikosti (za předpokladu, že máte ve Windows nastavené správné DPI vašeho monitoru).

V posledním sloupci můžete dokonce zapnout podporu GPS a testovat tak služby závislé na poloze.

Možnosti debuggeru

Když už máte nastavený správnou verzi IE, podívajme se krátce na ostatní možnosti debuggeru.

První ikona (s kurzorem myši) skrývá DOM explorer, kde můžete prohledávat a měnit HTML a CSS stránky. Druhá ikonka je konzole, kde můžete psát JS příkazy a kontrolovat chyby a debuggovací výpisy (konzolu můžete otevřít na jakékoliv jiné stránce pomocí ikonky vedle zavíracího křížku).

Třetí ikona ze znakem brouka je JS debugger, kde můžete vkládat breakpointy do kódu a následně ho krokovat. Čtvrtá a poslední „užitečná“ ikona je monitor síťového provozu. Kliknutím na zelenou ikonu Play monitor spustíte a můžete tak sledovat odchozí requesty a následně prozkoumávat jejich obsah. Červeným křížkem monitor zastavíte a tlačítkem X vymažete obsah stránky.

Poslední tři ikonky jsou spíše pro odborníky a jejich použití není tak časté. Ikona „tachometru“ skrývá UI Responsiveness monitor, který vám, po zapnutí, provedení akce a zastavení, ukáže, které akce bylo nutné provést. Např. že při kliknutí tlačítka bylo nutné ho 2x překreslit a trvalo to 10ms. Tím můžete zjistit, jestli některé grafické efekty nejsou příliš náročné na vykreslování a nebude potřeba je nějak zjednodušit.

Naproti tomu Profiler, který se skrývá pod ikonou hodin, vám prozradí, které JavaScriptové metody se během sledování volali, kolikrát se spustili a jak dlouho trvali. Můžete tak snadno zjistit, do kterých metod se pustit při optimalizaci a refaktoringu. Seznam si vždy nechce seřadit podle sloupce Celkový čas, protože ten je určující pro to, která metoda nejvíce zatěžije procesor a způsobuje pomalost stránky. Nebo vám prozradí nedostatky vašeho způsobu programování – např. pokud nejvíce času zabírá metoda Function.apply (což je časté u většiny moderních JS frameworků), těžko ji zoptimalizujete (protože jde o nativní metodu), ale možná byste se mohli zamyslet nad tím, zda by nebylo lepší přepsat metody tak, aby nevyžadovali volání v konkrétním scopu (nahradit to lze např. pomocí Dependency Injection – tedy jednoduše předáním objektu v parametru).

Poslední ikonka s (nelogickým) obrázkem fotoaparátu otevírá Memory monitor, který vám prozradí, kolik paměti vaše stránka zabírá a např. kolik nové paměti je potřeba zarezervovat pro odeslání AJAX requestu a zpracování JSON odpovědi apod.