Přejít k navigační liště

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

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

Články JavaScript, Různé, Webdesign

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?

Komentáře

Subscribe
Upozornit na
guest
15 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Yetty

Úplně stejnou funkci mi ve Firefoxu už dlouho zastává Firebug, mohu vřele doporučit.

warriant

Konečně máme solidní vývojové nástroje nejen pro Firefox… Pro Operu je na cestě Dragonfly.

Martin Hassman

A IE8 už bude mít také podobný nástroj, tím se nám prohlížeče pomalu kompletují 8-) Zkusíme na Zdrojáku postupně představit všechny.

kraag

jo? a zkousel si ho? Se neda s firebugem srovnavat. To ze jdou udelat hezky screenshoty je fain, ale pouzitelny to neni.

Zkousel sem v tom ladit bug v safari -> kliknutim na cast stranky se sice otevre zdrojovy kod, ale otevre se nazacatku a ne v miste kde je prislusna cast. Nevsiml jsem si, ze by tam sel menit kod. Tusim ze to funguje blbe s frame a co je nejvtipnejsi, tak ten kod co sem potreboval opravit se v tom pro jistotu ani nezobrazil.

Takze na obrazky a recenze hezke – pouzitelne zatim vubec

Martin Hassman

Píšete o té starší verzi, nebo o té nové, která vyšla před několika dny a kterou popisuje článek?

viprion

Mno – celý problém je asi v tom, že titulek článku říká Safari, zatímco článek jako takový je o WebKitu. Takže pokud jste to zkoušel v Safari (já mám 3.1.2 (5525.20.1)), tak Vám pravděpodobně nefunguje to, co článek popisuje. Na druhou stranu je určitá šance, že pokud nainstalujete WebKit, bude Vám fungovat spousta věcí navíc.

Mimochodem – zvolíte-li v současném oficiálním buildu Safari "Inspect Element", tak se kód stránky otevře na místě, kde se onen elementál vyskytuje a na stránce v browseru je zvýrazněn. Přejdete-li v inspectoru jinam, zvýrazní se v prohlížeči příslušná část stránky. Měnit kód tam asi opravdu nejde, ale nebudu nad tím hloubat – nikdy jsem to nepotřeboval…

Jirka

Používám sice vývojářskou verzi 4 (takže ani přesně nevím, co všechno stávající oficiální verze dělá a nedělá), ale mohu potvrdit, že u mne funguje vše, co je zde popsáno a také toho využívám. Lze editovat vše – jak samotný zdroják, tak jednotlivé položky stylového předpisu – cokoliv. A otevírání zdrojáku na nesprávném místě neznám.
Samozřejmě používám také FireBug pro FF a oba nástroje považuji za rovnocenné. Jen forma prezentace některých záležitostí (stavy komunikace při AJAXových operacích apod.) mi zatím připadá trochu použitelnější ve FireBugu.

kraag

no zkousel sem to asi pred 2-3 tydny. a to v google chrome. Takze pokud vyslo neco novyho v necem jinem, tak to sem nevidel.

Martin Hassman

Viz závěr článku. V Google Chrome je stará verze.

tomas

Na ceste ?

Dragonfly je jiz "davno" (9.5) soucasti Opery.

Tools->Advanced->Developer Tools

warriant

Mea culpa… Ani nevím, co tu mám :). Zrovna taková užitečná věc.

Vycházel jsem z okamžitých výsledků hledání Googlu a nějak jsem zprávu o final verzi nezahlédl.

warriant

No tak jsem se zrovna podíval znova a opravdu je poslední "alpha 2"… A to se _dá_ označit jako "na cestě".

igi

Mám Win XP Pro + Safari 3.1.2 (525.21)+Web Kit -r37458.
Webkit jsem nainstaloval, aktivoval v nastavení Safari, restartoval Safari. V menu se mi sice objevila položka Develop … ale když z ní téměř cokoli vyberu vč. ShowWeb Inspector, tak se nic nestane … neví někdo co s tím?
Díky
igi

Martin Hassman

Vzpomínám si, že na jedné instalaci mi to dělalo totéž. Nevím, čím je to způsobeno, ale vyřešil jsem to reinstalací Safari.

igi

Vyzkouším
Díky
igi

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.