DevTools - je to nástroj zabudovaný do většiny moderních prohlížečů, který umožňuje vývojářům analyzovat a ladit webové stránky a webové aplikace. Poskytuje mnoho užitečných funkcí, jako je kontrola položek, změna pravidel CSS, sledování síťových požadavků a další. Zahrnutí DevTools je prvním krokem k prozkoumání a vylepšení webové stránky nebo webové aplikace.
Chcete-li povolit DevTools v prohlížeči, postupujte podle těchto jednoduchých kroků:
- Otevřete prohlížeč. Spusťte prohlížeč, který chcete použít k vývoji. Například Google Chrome, Mozilla Firefox, Safari nebo Microsoft Edge.
- Otevřete webovou stránku nebo webovou aplikaci. Zadejte adresu URL webové stránky nebo webové aplikace, kterou chcete analyzovat a ladit.
- Otevřete DevTools. Pomocí jednoho z následujících způsobů otevřete DevTools v prohlížeči:
- Klikněte pravým tlačítkem na stránce a vyberte "prozkoumat položku" (v prohlížeči Chrome a Firefox) nebo "zkontrolovat položku" (v Safari).
- Použijte kombinaci kláves Ctrl + Shift + I (v prohlížeči Chrome a Microsoft Edge) nebo Command + Option + I (v Safari).
- Klikněte na ikonu nabídky prohlížeče (obvykle tři tečky nebo tři vodorovné čáry) a poté vyberte "Vývojářské nástroje" nebo "DevTools".
Po provedení těchto kroků bude DevTools úspěšně povolen ve Vašem prohlížeči. Nyní můžete použít všechny jeho funkce a funkce k analýze a ladění webové stránky nebo webové aplikace. Hodně štěstí ve vývoji!
Krok 1: otevření nastavení prohlížeče
Než povolíte DevTools v prohlížeči, musíte otevřít nastavení prohlížeče. Chcete-li to provést, postupujte takto:
| Google Chrome: | Klikněte na ikonu nabídky, která je v pravém horním rohu okna prohlížeče. V rozbalovací nabídce vyberte možnost "Nastavení". |
| Mozilla Firefox: | Klikněte na ikonu nabídky, která je v pravém horním rohu okna prohlížeče. V rozbalovací nabídce vyberte možnost "Nastavení". |
| Microsoft Edge: | Klikněte na ikonu nabídky, která je v pravém horním rohu okna prohlížeče. V rozbalovací nabídce vyberte možnost "Nastavení". |
Krok 2: vyhledejte kartu DevTools
Po otevření prohlížeče klikněte pravým tlačítkem myši na libovolnou část webové stránky a z kontextové nabídky, která se zobrazí, vyberte možnost "prozkoumat položku".
Můžete také použít klávesovou zkratku Ctrl + SHIFT + I (pro Windows) nebo CMD + OPT + I (pro Mac OS) k otevření přímo vývojářských nástrojů DevTools.
Poté se v prohlížeči otevře nové okno nebo panel nástrojů vývojáře. Obvykle se objeví napravo nebo zespodu od hlavního okna prohlížeče.
Pokud kartu DevTools nevidíte, zkontrolujte, zda není skryta za jinými kartami nebo sekcemi okna prohlížeče.
Pokud stále nemůžete najít kartu DevTools, zkuste aktualizovat prohlížeč nebo použít jiný prohlížeč, který podporuje vývojářské nástroje.
Krok 3: Povolení režimu vývojáře
Chcete-li povolit režim vývojáře v prohlížeči, postupujte podle níže uvedených pokynů
- Otevřete nabídku prohlížeče kliknutím na ikonu se třemi tečkami v pravém horním rohu okna.
- Z rozbalovací nabídky vyberte položku "More Tools" (další nástroje).
- V podmeně, která se otevře, vyberte "Developer Tools" (Vývojářské nástroje).
- Otevřete nabídku prohlížeče kliknutím na ikonu se třemi vodorovnými pruhy v pravém horním rohu okna.
- V rozevírací nabídce vyberte položku "Web Developer" (Web Developer).
- V podmeně, která se otevře, vyberte "Inspektor" (Inspektor).
- Otevřete nabídku prohlížeče kliknutím na ikonu se třemi tečkami v pravém horním rohu okna.
- Z rozbalovací nabídky vyberte položku "More Tools" (další nástroje).
- V podmeně, která se otevře, vyberte "Developer Tools" (Vývojářské nástroje).
Po provedení těchto kroků se ve Vašem prohlížeči aktivuje režim vývojáře a můžete použít DevTools k ladění, analýze a provádění změn na webových stránkách.
Krok 4: Kontrola stavu DevTools
Jakmile úspěšně povolíte DevTools ve svém prohlížeči, měli byste se ujistit, že je funkční. K tomu budete muset otevřít webovou stránku a zkontrolovat, zda se DevTools bez problémů stahují.
Chcete-li otevřít DevTools, musíte postupovat podle následujících kroků:
- Klikněte pravým tlačítkem kdekoli na webové stránce.
- V kontextové nabídce vyberte možnost "prozkoumat položku".
- Otevře se panel DevTools s dalšími informacemi o vybrané položce a dalších nástrojích. Zde budete moci upravovat CSS, ladit JavaScript a další.
Pokud se DevTools úspěšně otevřel a máte k dispozici všechny jeho funkce, funguje to správně. Můžete začít používat výkonné nástroje pro vývojáře k prozkoumání a ladění webových stránek.