Testování v prohlížeči

00:00:00

Napsat kód je polovina práce. Druhá polovina je zjistit, jestli funguje správně. Prohlížeč a jeho vývojářské nástroje jsou tvůj hlavní pracovní stůl. Tato lekce ti ukáže, jak stránku otevřít a jak používat základní nástroje prohlížeče.

Jak otevřít HTML soubor v prohlížeči

Lokální HTML soubor otevřeš jednoduše: buď ho přetáhni do okna prohlížeče, nebo ho otevři přes menu Soubor → Otevřít soubor. V adresním řádku uvidíš URL začínající file:// – to znamená, že soubor čteš přímo z disku, ne ze serveru.

Po každé změně v editoru stačí v prohlížeči stisknout Cmd + R (Mac) nebo F5 (Windows) pro obnovení stránky.

Tip: Někteří editory (například VS Code s rozšířením Live Server) dokáží stránku automaticky obnovit po uložení souboru. To usnadní práci.

Vývojářské nástroje (DevTools)

Každý moderní prohlížeč má zabudované vývojářské nástroje – DevTools. Otevřeš je klávesou F12 (nebo Cmd + Alt + I na Macu) nebo pravým kliknutím na prvek a výběrem „Prozkoumat element".

Panel Elements (Inspector)

Zobrazí strukturu HTML dokumentu jako strom prvků. Můžeš v něm:

  • prohlédnout, jak prohlížeč parsoval HTML,
  • kliknout na prvek na stránce a okamžitě ho najít ve stromě,
  • dočasně upravit HTML nebo CSS přímo v prohlížeči (bez změny souboru).

Panel Console

Zobrazuje chyby a výstupy JavaScriptu. Pokud tvůj JavaScript nefunguje, první místo, kde hledat, je konzole. Červené chybové zprávy ti řeknou, kde je problém.

Panel Network

Zobrazuje, jaké soubory prohlížeč načetl. Hodí se pro zjištění, proč se nenačítá obrázek nebo CSS soubor – uvidíš, jestli soubor nebyl nalezen (chyba 404).

Panel Accessibility

Zobrazuje přístupnostní strom stránky – jak ji vidí odečítač obrazovky. Lze zkontrolovat role, popisky a strukturu.

Testování responzivity

DevTools umožňují simulovat různé velikosti obrazovky bez fyzického telefonu. V Chrome a Firefoxu najdeš ikonu telefonu/tabletu v liště DevTools; v Safari odpovídá volba Responzivní design v menu Vývoj.

Tímto způsobem přepneš do zobrazení, kde buď zadáš vlastní rozměry, nebo vybereš předvolby populárních zařízení (iPhone, iPad atd.).

Safari na Macu

Na Macu je Safari výchozí prohlížeč a nejlépe spolupracuje s VoiceOverem. Pro aktivaci vývojářských nástrojů v Safari musíš nejdříve povolit menu Vývoj: Safari → Nastavení → Pokročilé → Zobrazovat menu Vývoj. Poté se DevTools otevírají přes Vývoj → Zobrazit inspektor webstránek nebo klávesou Cmd + Alt + I.

Tip od Zdeňka

Zdeněk radí: Já testuji primárně v Safari, protože nejlépe spolupracuje s VoiceOverem. Ale výslednou stránku vždy zkontroluj i v Chrome nebo Firefoxu – prohlížeče se chovají podobně, ale ne identicky. Zvlášť pro přístupnostní testování: zapni VoiceOver, zavři oči nebo odlož myš, a zkus web projít pouze klávesnicí. To, co přitom zažiješ, ti řekne více než jakýkoli automatický test.