Web Inspektor dělá ze Safari nástroj pro vývoj stránek

Součástí projektu WebKit je i Web Inspektor, mocný nástroj pro webdesignery a webové vývojáře. Je distribuován s vývojovými verzemi prohlížeče Safari a nově i s prohlížečem Google Chrome. Jak Web Inspektor vypadá a jaké možnosti vývojářům nabízí? Obojí se dozvíte z dnešního článku.

Nenápadnou součástí prohlížeče Safari je i Web Inspektor (WI), nástroj pomáhající vývojářům s laděním webových stránek. Slyšel jsem o něm už před časem, ale tehdy mě ničím nezaujal a tak jsem ho pustil z hlavy. Nedávno se ke mně dostala informace o vydání jeho nové verze s výrazně vylepšeným uživatelských rozhraním. Tato verze mě už zaujala a domnívám se, že se jedná o užitečný nástroj. V tomto článku vám představím jeho možnosti.

Co je Web Inspektor?

Web Inspektor je analytický nástroj určený tvůrcům webových stránek a aplikací. Pomůže jak ve fázi tvorby, tak i následné údržby a ladění výkonu. Domény působnosti:

  • HTML kód
  • JavaScript
  • kaskádové styly
  • databázová úložiště podporovaná standardem HTML5

Instalace

Na Windows si musíte nejdříve nainstalovat Safari, pak se vypravíte na stránky vývojářů a stáhnete si aktuální nightly build. Spustíte soubor run-nightly-webkit a po naběhnutí Safari vyberete z hlavního menu Edit > Preferences…, kde v záložce Advanced zaškrtnete Show Develop menu in menu bar.

Na Macu je to stejné, jen můžete vynechat fázi instalování Safari a po instalaci nigthly buildu spustíte aplikaci Webkit. (Na Macu se tedy nemusíte bát, že si nightly buildem rozhodíte systémové Safari. Na Windows se při každém spuštění souboru run-nightly-webkit znovu kopírují kamsi soubory, takže vyvozuji, že se také snaží neohrozit standardní instalaci.)

Nedávno byl Web Inspektor portován i na Linux.

Uživatelské rozhraní

Tak pojďme na to! Safari s poslední verzí Web Inspektoru nám běží, nahrajme si do něj nějakou stránku, na které si ukážeme základy. Já jsem zvolil CNN.com. Web Inspektor otevřeme přes menu Develop > Show Web Inspektor.

Myslím, že standardně naběhne Web Inspektor jako součást tabu zkoumané stránky. Mně přijde lepší ho odpoutat do nového okna. Slouží k tomu ikona v levém dolním rohu.

Grafické rozhraní Web Inspektoru

Obr. 1 – Web Inspektor otevřený v samostatném okně

Panel nástrojů Web Inspektoru (Elements, Resources, Scripts, Profiles a Databases) reflektuje nejdůležitější činnosti, které nám umožňuje provádět. Rozebereme je za chvíli. Vyhledávací pole funguje vždy v kontextu právě zvoleného nástroje.

Ještě si všimneme spodní lišty, kde kromě už zmiňovaného tlačítka pro otevření Web Inspektoru do samostatného okna, najdeme tlačítko, které otevírá konzoli (lze také přes klávesu Escape). Další tlačítka na spodní liště se liší v závislosti na vybrané položce z panelu nástrojů. Úplně vpravo se pak zobrazuje počet chyb a varování – podrobnosti najdete v konzoli, kterou můžete otevřít i kliknutím na údaj o chybách.

Nyní se podíváme na jednotlivé nástroje.

Nástroj Elements

Prohledávání HTML kódu

Jak název napovídá, tady půjde o HTML kód. Máme několik možností, jak se ve stromu elementů pohybovat. Můžeme prostě rozklikávat jednotlivé rodičovské tagy a zanořovat se hlouběji — šikovné je, že nám přitom Web Inspektor zpátky v okně Safari zvýrazňuje oblast, kterou daný element ve výsledném zobrazení stránky zabírá.

Proklikávání HTML stromem

Obr. 2 – Ukázka zvýraznění vybraného elementu zpátky v okně Safari

Můžeme se také pomocí tlačítka s obrázkem lupy, které je na spodní liště, přepnout do „opačného” módu, kdy se nám v okně Safari pod myší podbarvují bloky a po vybrání jsme přeneseni zpátky do okna Web Inspektoru a strom dokumentu se rozbalí až k elementu, který jsme vybrali.

Výběr myší v okně Safari

Obr. 3 – Vyhledání elementu pomocí výběru myší

V neposlední řadě můžeme hledat v kódu fulltextem. Funguje jako „live search”, tj. začnete psát a Web Inspektor hned zvýrazňuje a rozbaluje strom HTML, kde je první kousek kódu, který odpovídá zadání. Pokud najde víc výsledků, můžete se mezi nimi pohybovat pomocí opakovaného stisknutí klávesy Enter. Pozor, vyhledávání je case sensitive.

V kontextu panelu Elements podporuje vyhledávací pole také dotazy v XPath a ve tvaru CSS selektorů, např. „ //div[@style="display:none;"]” nebo „ #cnnContainer .cnnT1” vám vrátí užitečné výsledky.

Příklad full-textového vyhledávání

Obr. 4 – Vyhledání full-textem

Vlastnosti CSS jako na dlani

Jak už jste si určitě všimli z předcházejících screenshotů, v pravé části Web Inspektoru je postranní lišta, kde se zobrazují vlastnosti vybraného elementu z pohledu kaskádových stylů. Lišta je poměrně nabitá informacemi. Web Inspektor nám povídá o CSS ze třech různých pohledů.

Nejprve nám v záložce Computed Style ukáže výsledné parametry, které daný element má, pak vypíše všechny vlastnosti CSS, které pro daný element nastavil autor stránky (včetně názvu CSS souboru) a také nám ukáže, které vlastnosti dostává element od prohlížeče (user agent stylesheet).

Web Inspektor s lištou pro kaskádové styly

Obr. 5 – Postranní lišta panelu Elements s rozborem CSS

Pokud zaškrtnete volbu Show inherited, zobrazí se kompletní seznam všech CSS parametrů, které element má. Budete se divit, kolik jich je.

Na screenshotu vidíte také záložku Metrics, která asi nepotřebuje dlouhé vysvětlování – prostě zobrazuje, jak jsou definované vlastnosti margin, padding a jakou má element šířku a výšku.

A teď vychytávka: Veškeré uvedené vlastnosti můžete přímo v liště Web Inspektoru přepsat a úpravy se automaticky ihned projeví v analyzované stránce. Můžete dokonce přidávat nové definice, ačkoli to není moc intuitivní – musíte dvojkliknout na již existující vlastnost, jako když ji chcete editovat, pak za ni prostě napíšete definici, kterou chcete přidat, a stisknete Enter.

Informace o elementu z pohledu DOM

Konečně, záložka Properties vám poskytne opravdu vyčerpávající informace o elementu z hlediska DOM.

Výpis DOM vlastností elementu

Obr. 6 – Část výpisu DOM vlastností elementu

Nástroj Resources

Nástroj Resources vám poskytne přehledné údaje o tom, jak probíhá nahrávání zkoumané stránky. Snadno tak poznáte např. proč nahrávání stánky trvá neobvykle dlouho a dokážete problém lokalizovat. V levé postranní liště je vidět seznam všech souborů. V hlavní části se generuje přehledný graf, který zobrazuje buď jak dlouho trvalo načítání jednotlivých souborů nebo jejich velikost.

Pokud si necháte zobrazit seznam souborů podle doby načítání, můžete si ještě v dolní liště vybrat různý způsob třídění výpisu:

  • Start Time – kdy se začal soubor nahrávat
  • Response Time – jak rychle nám soubory poskytoval server
  • End Time – čas dokončení stahování souboru
  • Duration – doba stahování souboru
  • Latency – doba mezi naší žádostí o soubor a  odpovědí serveru
Graf nástroje Resources

Obr. 7 – Příklad grafu generovaného nástrojem Resources

Nástroj Scripts

Jak napovídá název, nástroj Scripts vám pomůže s laděním JavaScriptů. Pod panelem nástrojů nám přibyla lišta s rozklikávacím seznamem všech skriptů, které stránka načítá. Vyberete ten, který vás zajímá, a pak můžete kliknutím na číslo řádku nastavit bod, kde se zpracování skriptu zastaví (breakpoint) a Web Inspektor vám vypíše různé informace, které se daného místa týkají (hodnoty proměnných, stav zásobníku volání atd.).

Ladění skriptů

Obr. 8 – Příklad zastavení načítání stránky na definovaném bodu skriptu

Dokončení příště

Představili jsme si nejpoužívanější nástroje Web Inspektoru. V příštím díle si popíšeme zbývající dva méně používané nástroje Profiles a Databases. Pozn.: Web Inspektor je také součástí prohlížeče Google Chrome, ovšem Google Chrome obsahuje starší verzi nástroje, která se v některých detailech liší od nově vydané verze popisované v tomto článku.

Odkazy

Používáte Web Inspektor?

Jan Korbel píše nejen o webu a web aplikacích s důrazem na dojem uživatele a uživatelská rozhraní na svém blogu jankorbel.cz. Můžete ho také sledovat na Twitteru.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 15

Přehled komentářů

Yetty Firefox
warriant Re: Firefox
Martin Hassman Re: Firefox
kraag Re: Firefox
Martin Hassman Re: Firefox
viprion Re: Firefox
Jirka Re: Firefox
kraag Re: Firefox
Martin Hassman Re: Firefox
tomas Re: Firefox
warriant Re: Firefox
warriant Re: Firefox
igi na win xp nefunguje
Martin Hassman Re: na win xp nefunguje
igi Re: na win xp nefunguje
Zdroj: https://www.zdrojak.cz/?p=2834