Jak zapnout Inspect Element v Chrome

Při úpravách webových stránek nebo při ladění jejich vzhledu je velmi užitečné umět si zobrazit strukturu HTML a CSS přímo v prohlížeči. Google Chrome nabízí výkonný nástroj pro vývojáře, pomocí kterého můžete snadno zkontrolovat a upravit jednotlivé prvky stránky.

Co je funkce „Prozkoumat“ (Inspect)

Funkce umožňuje zobrazit zdrojový kód webové stránky – konkrétně HTML, CSS a JavaScript, které určují, jak stránka vypadá a jak se chová. Tento nástroj se používá například k:

• nalezení konkrétního prvku na stránce (např. tlačítka, obrázku, textu),
• úpravám vzhledu prvku (např. barvy, velikosti, okraje),
• ladění webových stránek během vývoje,
• kontrole responzivity a chování stránky na různých zařízeních.

Jak otevřít nástroj pro vývojáře v Chrome

Existuje několik způsobů, jak nástroj otevřít.

Pravým tlačítkem myši

Klikněte pravým tlačítkem myši na libovolný prvek webové stránky. Z nabídky vyberte Prozkoumat (nebo Inspect – dle jazykového nastavení prohlížeče).

Pomocí klávesové zkratky

Stiskněte klávesy Ctrl + Shift + I (nebo Cmd + Option + I na Macu).

Přes nabídku Chrome

Klikněte na tři tečky v pravém horním rohu prohlížeče. Zvolte Další nástroje > Nástroje pro vývojáře (anglicky More tools > Developer tools).

Práce s panelem „Elements“

Po otevření nástroje pro vývojáře se zobrazí panel Elements, kde můžete:

• Vidět strukturu HTML dané stránky.
• Kliknutím na konkrétní HTML značku se zvýrazní odpovídající prvek na stránce.
• V pravé části vidíte připojené CSS styly, které můžete dočasně měnit.
• Vyzkoušet, jak by stránka vypadala s jinými barvami, fonty nebo rozměry.

Další užitečné funkce

Mobilní zobrazení

Klikněte na ikonu mobilu/tabletu v horní části nástroje pro vývojáře a můžete si stránku zobrazit v různých rozlišeních – například pro iPhone nebo Android zařízení.

Konzole

V záložce Console můžete sledovat chyby JavaScriptu nebo zadávat vlastní příkazy.

Síť (Network)

Pomocí záložky Network můžete sledovat, jaké soubory se načítají při zobrazení stránky, což je užitečné při analýze rychlosti načítání.