Devtools

• V dnešní době jsou v moderních prohlížečích vestavěny nástroje pro ladění webových stránek - DevTools(developer tools).
• Mají nástroje pro zkoumání a upravování elementů, webového provozu, debugování JavaScriptu, přístupu k lokálním datům a dalších částí webových stránek.
• Jednotlivé nástroje jsou rozděleny do záložek. Například Inspector, Console, Network, Storage, Application apod..
• Lze otevřít na většině prohlížečů pomocí klávesové zkratky Ctrl+Shift+I(Cmd+Option+I na MacOS)
• Níže je uvedeno několik míst, kde jsou často přistupovaná data, které se hodí znát:

Cookies

• Cookies jsou jedna z mála věcí, ke kterým se přistupuje odlišně ve Firefoxu a Chromu - toto zahrnuje i Chromium based browsery, jako třeba Vivaldi, Edge, Brave, Opera a další.
• Ve Firefoxu se k cookies přistupuje přes Storage záložku.

Ukázka cookies v prohlížeči Firefox

• V prohlížečích založených na Chromiu Application záložku. V té je podzáložka Storage, kde se nacházejí cookies.

Ukázka cookies v prohlížeči Chromium

Network

• Network tab umožňuje procházet jednotlivé HTTP požadavky a odpovědi
• Umožňuje posílat znovu požadavky na server s upravenými parametry
• Je možné si zde zobrazit jednotlivé headery a body requestu Ukázka provozu v prohlížeči Firefox

Inspektor

• V inspektoru lze procházet a upravovat HTML a CSS stránky.
• Zároveň se zde ukazuje velikosti elementů, padding, margin apod.

Ukázka inspektoru v prohlížeči Firefox