Devtools
Devtools, developer's tools nebo vývojářské nástroje, je nezbytný denní chléb každého vývojáře.
I my s nimi budeme na našich lekcích pracovat. Postupně budeme objevovat další možnosti a zákoutí vývojářských nástrojů, pro začátek se naučíme prozkoumat prvky a stylování stránek.
Otevření devtools
Vývojářské nástroje není potřeba instalovat, jsou už součástí dnešních prohlížečů. Pokud máš v prohlížeči otevřenou stránku a zajímá tě, jak vypadá její HTML, stačí udělat jednu z možností:
- vybrat další možnosti (tři tečky) vpravo nahoře > More Tools > Developer Tools
- kamkoli na stránce stisknout pravým tlačítkem a vybrat prozkoumat nebo v angličtině inspect
F12
Měla by defaultně být otevřená záložka Elements.
Při najetí na elementy v html se nám vyznačí prvky na stránce. Po kliknutí můžeme vidět stylování prvků a dokonce je upravovat. Úpravy jsou pouze v našem prohlížeci a jsou dočasné, po refreshi se stránka načte v původním stavu. Vývojářské nástroje jsou nezbytné pro sledování našich změn i pro zkoušení stylování při kódování stránek.