Keď niekto povie inspect element, veľa ľudí si predstaví „hacking“. V realite je to skôr lupa pre web: pozrieš si, čo stránka zobrazuje, aké sú tam prvky a čo sa načítava v prehliadači. Je to legálne, bežné a super užitočné – či už chceš odhaliť podozrivý formulár, otravný tracker, alebo len zistiť, prečo sa ti na stránke rozsypal layout.
Čo je Inspect a prečo ho ľudia používajú
Inspect (inspect element) je funkcia v DevTools (Developer Tools) – nástrojoch v prehliadači. Umožní ti pozrieť si HTML/CSS/JS, ktoré tvoj prehliadač práve zobrazuje.
Najčastejšie dôvody, prečo ľudia používajú inspect element:
- Diagnostika problému: niečo nefunguje, bliká, načítava sa donekonečna.
- Overenie dôveryhodnosti webu: kam smeruje login, či to nie je podvod.
- Kontrola súkromia: aké skripty a zdroje stránka ťahá.
- UI a dizajn: prečo má tlačidlo divnú farbu, čo ho rozbíja.
Ako spustiť Inspect / DevTools
Vo väčšine prehliadačov otvoríš DevTools niektorým z týchto spôsobov:
- Pravý klik na stránku → Inspect / Skontrolovať / Preskúmať
- F12 (často funguje)
- Ctrl + Shift + I (Windows/Linux) alebo ⌥ Option + ⌘ Command + I (Mac – často)
Názvy sa líšia, ale princíp je rovnaký: otvoríš DevTools a máš karty ako Elements/Inspector, Console, Network, Application/Storage.
Ako sa dostať priamo na vybraný element bez hľadania
Toto je najpraktickejšia časť, kvôli ktorej si inspect element zamiluješ:
Pravý klik → Inspect (najjednoduchšie)
- Klikni pravým na konkrétne tlačidlo alebo text.
- Zvoľ Inspect.
- Prehliadač ťa hneď hodí na presný HTML prvok.
Výberový nástroj (kurzor v DevTools)
V DevTools býva ikona „kurzor/šipka“ (výber prvku). Zapneš ju a potom klikneš na element na stránke.
Console: overené príkazy, ktoré vieš použiť skoro všade
Console je miesto, kde môžeš spustiť JavaScript priamo v prehliadači. Nižšie sú príkazy, ktoré sú základné a štandardné.
Dôležité: nikdy nevkladaj do Console kód, ktorému nerozumieš (najmä „paste this to fix…“ návody z pochybných stránok).
Základ: kde som a či som na HTTPS
|
1 2 3 |
location.href location.origin location.protocol |
- Ak vidíš
http:namiestohttps:, je to varovanie (najmä pri prihlasovaní).
Kto ma sem poslal (referrer)
|
1 |
document.referrer |
- Pri podozrivých presmerovaniach vieš zistiť, z akej stránky si sem prišiel.
Základné info o stránke
|
1 2 |
document.title document.domain |
Všetky odkazy na stránke (rýchly prehľad)
|
1 |
Array.from(document.querySelectorAll('a')).map(a => a.href).slice(0, 20) |
- Ukáže prvých 20 odkazov (užitočné pri hľadaní „kam to vlastne vedie“).
Všetky formuláre a kam posielajú dáta
|
1 2 3 4 |
Array.from(document.querySelectorAll('form')).map(f => ({ action: f.action, method: (f.method || 'GET').toUpperCase() })) |
- Toto je top vec pri „overení webu cez inspect element“.
Aké externé skripty stránka načítava
|
1 |
Array.from(document.scripts).map(s => s.src).filter(Boolean) |
- Ak vidíš zvláštne domény, spomaľovanie alebo veľa trackerov, vieš, kde pátrať.
Klady a zápory (áno, aj Inspect má svoje mínusy)
Klady
- Inspect element je rýchly spôsob diagnostiky, čo stránka robí v prehliadači.
- Vieš odhaliť podozrivé formuláre, nečakané presmerovania a cudzie skripty.
- Je to výborné na učenie: HTML/CSS sa učíš na živých príkladoch.
Zápory a riziká
- Inspect element neukazuje serverové veci (databázu, interné logy). Vidíš len to, čo sa dostalo do prehliadača.
- Môžeš si „rozbiť“ stránku len u seba (dočasne) – napr. zmenou CSS.
- Najväčšie riziko: kopírovanie cudzieho kódu do Console.
Legálne overenie bezpečnosti webu cez Inspect element
1) Je to naozaj HTTPS?
- Pozri adresu alebo v Console:
Ak ti vráti
https:, si v bezpečí. Ak nie, tvoj web má problém, ktorý nevyrieši ani svätená voda. Aby si pochopil, prečo je ten „zámok“ v adrese taký dôležitý a čo všetko vlastne SSL rieši, pozri si týchto 6 kľúčových faktov o SSL certifikátoch. Je to základ, ktorý by mal ovládať každý, kto to s webom myslí vážne.
|
1 |
location.protocol |
2) Kam ide login formulár?
- Pravý klik na login tlačidlo → inspect element.
- V Elements/Inspector nájdi
<form>a skontrolujaction. - Alebo v Console:
|
1 |
Array.from(document.querySelectorAll('form')).map(f => f.action) |
3) Nevyzerá doména podozrivo?
- Sleduj preklepy, divné koncovky, alebo punycode.
- V Console si vypíš doménu:
|
1 |
location.hostname |
4) Aké skripty sa načítavajú?
- V DevTools pozri Network (Requests) a v Console aspoň zoznam scriptov:
|
1 |
Array.from(document.scripts).map(s => s.src).filter(Boolean) |
5) Sú tam podozrivé presmerovania?
- Sleduj, či sa URL mení sama.
- V Network karte si všimni 3xx presmerovania (ak ich je veľa, je to signál maskovania).
6) Cookie stopa (len orientačne)
- V DevTools (Application/Storage) vieš vidieť cookies a ich atribúty.
- Pozor: nie všetko uvidíš cez
document.cookie(HttpOnly cookies sú zámerne skryté).
Ak ťa zaujíma, prečo je okolo týchto malých textových súborov toľko kriku, že kvôli nim musíš na každom webe odklikávať otravné lišty, napísal som o tom celú „psychologicko-technickú“ sondu: Čo sú cookies a prečo ťa s nimi každá stránka otravuje?. Ver mi, po prečítaní ich začneš vnímať inak ako len otravný pop-up.
FAQ : Často kladené otázky : Inspect Element
- Je inspect element hackovanie?Nie. Inspect element je prehliadací nástroj v prehliadači. Pozeráš iba to, čo sa už načítalo do tvojho zariadenia.
- Môžem cez inspect element zmeniť stránke cenu v e-shope?Vieš to zmeniť iba u seba na obrazovke. Na serveri sa nič nezmení – pri platbe server aj tak počíta cenu sám.Prepnúť obsah
- Aké sú najčastejšie varovania, ktoré môžem nájsť cez inspect element?Nezabezpečené
http, podozrivéform action, množstvo presmerovaní, cudzie skripty z neznámych domén a chybové hlášky v Console. - Prečo mi document.cookie neukáže všetky cookies?HttpOnly cookies sú zámerne skryté pred JavaScriptom kvôli bezpečnosti. Uvidíš ich v Storage/Application časti DevTools.
- Fungujú DevTools rovnako v Chrome, Edge, Firefox a Safari?Základ áno (Elements/Inspector, Console, Network). Rozloženie a názvy sa môžu líšiť, ale princíp je rovnaký.
Mini tabuľka: kde čo nájdeš v DevTools
| Čo chceš zistiť | Kde v DevTools | Prečo je to užitočné |
|---|---|---|
| HTML prvok tlačidla / formulára | Elements/Inspector | rýchlo nájdeš form action, input name |
| Chyby skriptov | Console | uvidíš error, stack trace |
| Presmerovania a requesty | Network | zistíš, kam a čo sa posiela |
| Cookies a local storage | Application/Storage | súkromie, session, nastavenia |
Záver: Inspect element je „profi“ nástroj, nie zbraň
Ak chceš vyzerať ako „hacker“ (clickbait) a pritom robiť legit veci, inspect element je presne tá zóna: veľa zistíš, nič neútočíš, len pozoruješ. A keď si na webe niečím nie si istý, DevTools + Console ti často dajú dôkaz skôr, než klikneš na blbosť.
Zdroje :
