Konzole pro vývojáře

Kód je náchylný k chybám. Dost pravděpodobně uděláte chyby... Oh, o čem to mluvím? Jste naprosto budete dělat chyby, alespoň pokud jste člověk, ne robot.

Ale v prohlížeči uživatelé ve výchozím nastavení nevidí chyby. Pokud se tedy ve skriptu něco pokazí, neuvidíme, co je rozbité, a nemůžeme to opravit.

Chcete-li zobrazit chyby a získat spoustu dalších užitečných informací o skriptech, byly do prohlížečů vloženy „nástroje pro vývojáře“.

Většina vývojářů se při vývoji přiklání k Chrome nebo Firefoxu, protože tyto prohlížeče mají nejlepší vývojářské nástroje. Jiné prohlížeče také poskytují vývojářské nástroje, někdy se speciálními funkcemi, ale obvykle se „dohánějí“ Chrome nebo Firefox. Většina vývojářů má tedy „oblíbený“ prohlížeč a přepne na jiný, pokud je problém specifický pro prohlížeč.

Vývojářské nástroje jsou účinné; mají mnoho funkcí. Nejprve se naučíme, jak je otevřít, podívat se na chyby a spouštět příkazy JavaScriptu.

Google Chrome

Otevřete stránku bug.html.

Je na něm chyba v kódu JavaScript. Je skryta očím běžného návštěvníka, takže otevřete vývojářské nástroje, abyste si to mohli prohlédnout.

Stiskněte F12 nebo pokud používáte Mac, pak Cmd+Opt+J .

Vývojářské nástroje se ve výchozím nastavení otevřou na kartě Console.

Vypadá to nějak takto:

Přesný vzhled vývojářských nástrojů závisí na vaší verzi Chromu. Čas od času se mění, ale měla by být podobná.

  • Zde vidíme červeně zbarvenou chybovou zprávu. V tomto případě skript obsahuje neznámý příkaz „lalala“.
  • Vpravo je klikací odkaz na zdroj bug.html:12 s číslem řádku, kde došlo k chybě.

Pod chybovou zprávou je modrý > symbol. Označuje „příkazový řádek“, kam můžeme zadávat příkazy JavaScriptu. Stiskněte Enter k jejich spuštění.

Nyní vidíme chyby a to pro začátek stačí. K vývojářským nástrojům se vrátíme později a ladění se budeme věnovat podrobněji v kapitole Ladění v prohlížeči.

Víceřádkový vstup

Obvykle, když do konzole vložíme řádek kódu a poté stiskneme Enter , provede se.

Chcete-li vložit více řádků, stiskněte Shift+Enter . Tímto způsobem lze zadávat dlouhé fragmenty kódu JavaScript.

Firefox, Edge a další

Většina ostatních prohlížečů používá F12 otevřete nástroje pro vývojáře.

Vzhled a dojem z nich je velmi podobný. Jakmile budete vědět, jak používat jeden z těchto nástrojů (můžete začít s Chrome), můžete snadno přejít na jiný.

Safari

Safari (prohlížeč Mac, nepodporovaný systémem Windows/Linux) je zde trochu speciální. Nejprve musíme povolit nabídku „Develop“.

Otevřete Předvolby a přejděte do podokna „Upřesnit“. Dole je zaškrtávací políčko:

Nyní Cmd+Opt+C umí přepínat konzoli. Všimněte si také, že se objevila nová položka horní nabídky s názvem „Develop“. Má mnoho příkazů a možností.

Shrnutí

  • Nástroje pro vývojáře nám umožňují vidět chyby, spouštět příkazy, zkoumat proměnné a mnoho dalšího.
  • Lze je otevřít pomocí F12 pro většinu prohlížečů ve Windows. Chrome pro Mac potřebuje Cmd+Opt+J , Safari:Cmd+Opt+C (Nejdříve je nutné povolit).

Nyní máme připravené prostředí. V další části se dostaneme k JavaScriptu.