Ladíme webové stránky přímo v prohlížeči Google Chrome

Možnosti dnešních prohlížečů stále rostou. Prohlížeče se zrychlují, podporují stále modernější technologie, využívají grafických karet pro zlepšení výkonu, ale také se před nějakou dobou staly nepostradatelnou součástí webových vývojářů. Já osobně si nedokáži představit, že bych byl odkázán na ladění aplikací bez nástrojů, které dnešní prohlížeče nabízejí, například by bylo značně obtížné ladit AJAX/JSON požadavky.

Pokud se podíváte na dnešní moderní prohlížeče, například Mozilla Firefox, Google Chrome, Safari, Operu a nyní i Internet Explorer 9, tak nabízejí komplexní nástroje pro vývojáře, kteří díky nim mohou testovat webové aplikace ze všech úhlů. Proč jsem zmiňoval prohlížeč Mozilla Firefox, který takový nástroj nemá? Neboť je pro tento prohlížeč bezkonkurenční doplněk jménem FireBug.

Mnou zmíněné nástroje nám pomůžou například při odstraňováních chyb v CSS stylech, pomohou nám testovat změny v HTML (a to přímo v prohlížeči bez zásahu do vlastního kódu aplikace – promítne se pouze změna v prohlížeči), sledovat požadavky, které jsou aplikací odesílány, sledovat délku zpracování požadavků, apod. Pozice webového vývojáře je tak při ladění webových aplikací velice usnadněna. Pokud se objeví chyba, kterou je potřeba odstranit, tak proč to neprovádět přímo v prohlížeči, kde jsou zobrazována data pro koncového uživatele – návštěvníka.

Nějaký čas jsem si pokládal otázku, jaký prohlížeč by byl pro tyto potřeby nejlepší. Zmiňované prohlížeče nabízejí kvalitní nástroje, případně další rozšiřující doplňky. Pro testování možností jsem nějaký čas ladil aplikace v prohlížeči Google Chrome, Mozilla Firefox a v nedávné době také v prohlížeči Opera, který také nabízí kvalitní nástroj jménem Dragonfly, který se velmi podobá zmiňovanému FireBugu.

Prvně bych chtěl zmínit vlastnosti prohlížeče Google Chrome, který se pyšní nálepkou nejrychlejšího prohlížeče a nyní, s rozsáhlou databází doplňků, i silným nástrojem pro prohlížení obsahu Internetu. I když má některé nedostatky, například v podobě nutnosti nainstalovat doplňky třetích stran pro specifické akce a je někdy kritizován z hlediska bezpečnosti, jako nástroj pro vývojáře může být neocenitelným pomocníkem.

Všechny ukázky a postupy byly prováděny v prohlížeči Google Chrome 7.0.517.8 na počítači Windows a jako služba pro ukázání možností byla použita služba Twitter.com.

Nástroje pro vývojáře

Samotný prohlížeč, v testované verzi, nabízí skvělý nástroj pro ladění, tzv. Nástroje pro vývojáře, který je možné spustit kombinací kláves Ctrl + Shift + I, případně z nabídky Přizpůsobení a ovládání Google Chrome > Tools > Nástroje pro vývojáře.

Po spuštění se otevře hlavní okno vývojářské konzole, kde je možné najít ty nejdůležitější prvky pro ladění webové aplikace, ale také velice užitečné prvky, např. čas požadavku, všechny události, které se váží na vybraný HTML element či jednotlivé načtené skripty, které je samozřejmě možné krokovat. Okno je také velice přehledné a to i díky graficky povedenému rozhraní, ve kterém vývojář může svou aplikaci ladit.

Ladíme HTML a CSS přímo v prohlížeči

Mnohokrát jsem se setkal s potřebou změnit při načtení stránky vlastnosti určitého elementu, přiřadit mu jinou třídu, změnit styl, id nebo změnit element samotný. Díky tomuto nástroji je to velice snadné a změny se promítnou přímo v prohlížeči, ale do zdrojového kódu se neuloží. Je tak možné testovat úpravu elementů a zobrazit změny v prohlížeči přímo bez nutnosti obsah znovu nahrát.

Zkusíme to na příkladu a načteme stránku služby Twitter.com, do které se přihlásíme. Stránku Twitter po přihlášení jsme jistě někdy viděli a tak si můžeme prohlédnout přímo v konzoli HTML kód a to kliknutím na Elements v okně Developers Tools. Po první spuštění je potřeba také zapnout funkce konzole Enable resource tracking (pokud jste tak neučinili dříve) a můžete si vybrat spuštění funkcí pouze pro aktuální sezení (tedy pro stránku, pro kterou jste momentálně Developers Tools otevřeli), případně pro všechny v budoucnu otevřené stránky.

Nyní si ukážeme, jak je jednoduché je otestovat případné změny v HTML kódu. Přepněte si v nástrojové liště vývojářské konzole na Elements a zobrazí se vám HTML kód načtené stránky. Jak můžete vidět, většina částí kódu, kde jsou párové tagy nebo je kód delší, je sbalena do bloků. Tyto bloky můžete rozbalit kliknutím na šedý trojúhelník. Zkuste si tedy rozbalit <ul id=“accessibility“ class=“offscreen“>…</ul> a jak můžete vidět, seznam obsahuje několik položek. Nyní dvakrát klikněte na atribut class a tento atribut vymažte.

Jak můžete vidět podle obrázků, odebrali jsme třídu, které nám nějak formátovala vybraný seznam. Pokud se nyní podíváte na stránku Twitteru, uvidíte, že se vybraný a nově naformátovaný seznam již zobrazil, aniž by se nějak narušil vlastní kód služby Twitter a jak můžete vidět, má to nespornou výhodu v tom, že můžete v případě špatného zobrazení některého prvku na stránce otestovat nové formátovaní a pokud bude vše správně, změny přes editor aplikovat.

Jak je vidět, je tedy možné měnit jak HTML prvky, ale používat i CSS vlastnosti. Pokud bychom danou třídu seznamu změnili například na style="background-color: #000; color: #fff;", změny se také projeví a to i při editování v pravé části vývojářské konzole, kde jsou načteny všechny styly a vlastnosti daných HTML elementů.

A pokud si stránku znovu načtete, opět označíte vybraný seznam a podíváte se do pravého sloupce vývojářské konzole, uvidíte vypsanou třídu vybraného elementu se všemi vlastnostmi. Jak jsem již zmínil, je samozřejmě možné tyto atributy upravit a element si tak nově nastylovat. Zkusíme tedy vybraný seznam nastylovat, ale necháme mu danou třídu, pro kterou však upravíme jednotlivé CSS atributy. Pokud se opět podíváte na stránku, uvidíte provedenou změnu, opět bez jakéhokoliv zásahu do vlastního kódu Twitteru a bez znovunačtení obsahu.

Kontrolujeme zdroje a požadavky webové aplikace

Ladění, nebo spíše procházení, požadavků, které webová aplikace vytváří či přijímá, je jednou z důležitých a problematických součástí odstraňování možných chyb. Pokud například máte interaktivní webovou aplikaci, bude tato část pro vás velmi cenná, neboť zde můžete kontrolovat odesílané AJAX/JSON požadavky a přijatá data a v případě nějaké chyby vysledovat počátek.

Tyto požadavky je možné sledovat pod záložkou Resources. Jak můžete vidět na obrázku, rozlišení jednotlivých požadavků načítaných aplikací je velice hezky vyvedeno. Mně osobně se líbí mnohem víc a připadá mi přehlednější než například u výše zmíněného nástroje FireBug. Jak můžete vidět, jednotlivé načítané zdroje jsou rozdělené do jednotlivých kategorií (pokud nevíte, XHR jsou AJAX/JSON požadavky), podle kterých je možné požadavky vypsat, případně je vypsat všechny, a na vertikální časové posloupnosti pak můžete tyto zdroje sledovat v pořadí, ve kterém se načítaly (pokud nemáte zvoleno jinak). Všimněte si také, že když máte otevřené okno Twitter, který na úvodní stránce zobrazuje jednotlivé tweety a při nových příspěvcích vás o nich informuje, jak se časová osa aktualizuje pro nově přijaté požadavky. Jednotlivé požadavky je také možné řadit podle vybraných kritérií. Pokud se podíváte na spodní část obrázku, je zde napsáno Sort by Response Time. Můžete si tak vybráním vhodného kritéria požadavky seřadit, například podle doby trvání požadavku (Sort by Duration).

Pokud budete chtít zobrazit detaily načítaného zdroje, například obsah, provedete tak kliknutím na požadovaný zdroj v levém sloupci v části Resources a vypíše se vám nahraný obsah. Zkuste tedy kliknout například na geo.css. Otevře se vám tak načtený soubor stylů, ale vy si můžete zobrazit také hlavičku požadavku, kde uvidíte jednotlivé parametry hlavičky – jak požadované, tak i přijaté. To je vhodné například pro ladění AJAX/JSON požadavků, kde můžete sledovat jejich aktuální stav (že se například provádějí, byly úspěšně provedeny, apod.).

Výhodou také je, že si můžete zobrazit časové zpracování požadavků pro každý zvlášť a to tak, že najedete myší pro vybraný zdroj na vertikální časové ose na jemu přiřazený bod, kdy se vám zobrazí počáteční a koncový čas zpracování a informace o jednotlivých úsecích zpracování.

V části Resources můžete sledovat nejen dobu provádění požadavků, ale také jejich velikost. Při vývoji webových aplikací je to také důležitá součást, neboť není vhodné, pokud stránka načítá příliš velké množství dat – může to způsobit její pomalejší start a u některých vyhledávačů horší pozici. Tato část funguje stejně jako předchozí. Je tedy možné zobrazit velikost všech zpracovaných požadavků, ale i samostatných požadavků.

Ladění JavaScriptu

Další neocenitelnou pomůckou může být možnost ladit JavaScriptové funkce. I tuto možnost Developers Tools nabízí a je to velice jednoduché. Funguje to na principu krokování, se kterým se snad každý programátor již setkal. Pokud se vám například nedaří spustit některou z vašich JavaScriptových funkcí, je možné díky krokování postupně funkci spouštět a dopracovat se tak k místu, kde vznikne vámi hledaná chyba a vy jí pak můžete lépe eliminovat.

Přišlo mi zajímavé, že pokud se pokusíte vložit break point na řádek, kde je komentář, automaticky to break point vloží na první řádek po ukončené symbolice komentáře.

Sledování kompletního zpracování stránky

Řeč je o funkci Timeline, která je jistě jednou z nejlepších funkcí, kterou Developers Tools nabízí (touto funkcí, pokud vím, nedisponuje ani FireBug). Umožnuje tak sledovat přesně cyklus stránky, než dojde k uživateli do prohlížeče – tedy části nahrávání, skriptování a vykreslení. A to jak z časového hlediska (Timelines), tak i z hlediska množství celkového objemu dat (Memory). Tuto funkci je však potřeba aktivovat tím, že se spustí nahrávání pro danou stránku a to kliknutím na Record (jak ukazuje kurzor na obrázku a je potřeba stránku znovu načíst).

Jak můžete vidět, opět je rozhraní velice přehledné a jednotlivé fáze jsou barevně rozlišené. Pokud je i nějaká fáze rozdělena na několik dalších, je celá akce sbalena do jedné a je možné ji rozkliknout a zobrazit tak její detaily. Pro jednotlivé části je také možné zobrazit detaily kliknutím myši na vybranou část.

Jak ukazuje obrázek, detail akce je přehledně rozdělen na části informující o jednotlivých cyklech. Například námi vybraná akce Send Request byla volána metodou GET, její zpracování trvalo 1.26s a jednotlivé fáze, tedy nahrávání, skriptování a vykreslení se také vykonávaly určitý čas. Je zde i informace o zdroji, který tuto akci vyvolal a jaké množství dat spotřeboval. Je tak možné přesně sledovat zpracovávání stránky a její následné používání a odladit tak některé chybné segmenty, které by stránku mohli brzdit či přenášet příliš velké objemy dat.

Můžete si také všimnout, že si můžete pomocí myši zobrazit pouze vybranou část z celkové časové osy (která indukuje celkový čas používání stránky). Budete tak mít přehled o tom, jaké operace se v daný časový úsek provedly, jaký obsah byl volán a jaká data se načetla.

Profily – sledování rozdílů využití procesoru a paměti

Další zajímavou funkcí, kterou Developers Tools nabízí, je možnost profilování webové aplikace. Díky možnosti Profiles tak můžeme sledovat, jak náročné jsou jednotlivé části webové stránky a kolik paměti si vyžádaly. Ale to není všechno. Je zde možnost vytvořit pro jednotlivé časové úseky vlastní profily, které je tak možné mezi sebou porovnávat a například při špatném fungování webové aplikace tak zachytit špatně fungující část.

Profily je možné vytvářet kliknutím na označené části v obrázku. Je možné vytvořit libovolné množství profilů a pro jednotlivé úseky pořízení je tak mezi sebou porovnávat. Na obrázku je vidět, jak vypadá snímek paměti v jednom časovém úseku, který je zároveň porovnán s předchozím snímkem v předchozím časovém úseku (časovými úseky myslím dobu, kdy byl snímek pořízen a s určitým odstupem byl pořízen další snímek). Tato funkce se může stát opravdu velice užitečnou, pokud bude webová aplikace vykazovat nepředpokládané příliš velké zatěžování CPU nebo zpracování příliš velkého objemu dat.

Správa uložených dat – cookies, sessions, cache, lokální databáze

Potřebujete sledovat jednotlivá data, která se ukládají v prohlížeči? Například cookies, sessions, cache a nebo také data pro lokální databázi? Developers Tools myslí i na tuto potřebu a nabízí tak přehledné rozřazení pro „prohlížečová data“. Přepnutím na možnost Storage zobrazíte zmíněná úložiště a jejich obsah. V našem případě však služba Twitter do lokální databáze nic neukládá a ani necachuje, takže je možné si prohlédnout pouze cookies a sessions.

Jak můžete vidět na obrázku, jednotlivá úložiště vás také informují bez nutnosti je zobrazit, kolik položek o jaké velikosti je právě uloženo. Z bezpečnostních důvodů nechci otevírat část Cookies, kde jsou uložena data pro můj Twitter účet, takže je nabízen pouze rozmazaný obrázek. Jen pro informaci, je zde kompletní seznam uložených cookies a sessions s jejich názvem a hodnotou a dále s platností pro daný server, dobrou vypršení a velikostí. Díky skvělým možnostem, které tato vývojářská konzole je možné testovat, co se stane s aplikací, pokud některou z cookies vymažeme. Není tak nutné prohledávat úložiště přímo v prohlížeči. Zde je to přehlednější a snadněji dostupné.

Audity

Poslední částí, o které bych se chtěl v souvislosti s Developers Tools zmínit, je část Audits. V této části máte po spuštění vyhodnocení zobrazeny návrhy vývojové konzole na zlepšení a zrychlení své webové aplikace a to v podobě několika kategorií. Je možné vytvářet jednotlivé audity i pro jednotlivé stránky a porovnávat tak výsledky auditů, což může být užitečné například při stylování, cáchování, atd., pokud by se na něco zapomnělo a mohlo by to případně (i když nepatrně) zpomalit běh webové aplikace.

Jak je možné vyčíst z obrázku, audity se týkají například cáchování, nastavování cookies nebo css vlastností. Jednotlivé zprávy vás informují o možnostech, jak některé prvky lépe vykonat či formátovat. Na obrázku je například vidět, po rozkliknutí, že je doporučeno cachovat některé prvky jiným způsobem, například prodloužit životnost cache pro obrázky, případně vás informují o krátké životnosti některých prvků.

Může se hodit také informace, že na stránce, pro kterou jste provedli audit, nejsou využity některé CSS styly, které máte nadefinované ve svých CSS souborech. Pokud jste tak pro testování vložili některé styly, které již nepoužíváte, díky této informaci je budete moci vymazat, aby se zbytečně nenačítaly. Je to samozřejmě informace, kterou musí každý vývojář zvlášť zvážit, neboť styly jsou definovány vždy pro celou stránku včetně podstránek, takže informace o nevyužitých stylech se bude zobrazovat téměř vždy (tedy pokud pro každou stránku nenačítáte vlastní styl). Pokud si tedy budete chtít zobrazit některý CSS soubor a prozkoumat jednotlivé vlastnosti, můžete bez obav nakliknout nabízený odkaz, který vás přesune ve vývojářské konzoli na danou sekci a zobrazí vám zdrojový kód vybraného souboru (což je užitečné).

Slovo závěrem

Po bližším seznámení s Nástrojem pro vývojáře prohlížeče Google Chrome se tak může jevit ladění webových aplikací v tomto prohlížeči velice snadné, přehledné a jistě do budoucna i efektivní. Mně osobně se některé možnosti zamlouvají více než u zmiňovaného FireBugu, který já například hodně používám, a díky dalším rozšířením, které je možno do Chrome nainstalovat, se tak z prohlížeče stane opravdu silný vývojářský nástroj (o těchto rozšířeních v dalších článcích).

Jediná věc, která mi u Developers Tools chybí je, že zde není možnost ladit PHP kód (nebo jiný server-side skriptovací jazyk), jako je například možnost u FireBugu v podobě doinstalovaného rozšíření FirePHP. Pro Chrome jsem žádný podobný doplněk nenašel a je tak nutné se spolehnout na chybové hlášky, odchycené vyjímky přímo ze serveru do prohlížeče.