HTML alapok › 8. modul: Ellenőrzés és közzététel › 8.2 lecke
HTML alapok · 8.2 lecke
A böngésző fejlesztői eszközei: nézz a színfalak mögé
Minden mai böngészőbe be van építve egy profi szerszámosláda: megmutatja az oldal szerkezetét, a hibákat, a letöltött fájlokat, és azt is, hogyan néz ki az oldal telefonon. A tanfolyam során már bele-belekóstoltál. Ebben a leckében rendszerezzük, és oldaldetektívként használod.
A lecke végére
- megnyitod a fejlesztői eszközöket, és eligazodsz a fülek között;
- az Elemek fülön megvizsgálod és ideiglenesen módosítod az oldalt;
- a Konzol és a Hálózat fülön megtalálod a hiányzó fájlokat;
- mobilnézetben tesztelsz, és Lighthouse-jelentést készítesz.
Mielőtt elkezded
Hasznos, ha emlékszel, hogyan jut el hozzád egy oldal.
Megnyitás
- Nyomd meg az F12-t, vagy a Ctrl + Shift + I billentyűket (Macen: Option + Command + I).
- Vagy kattints jobb gombbal egy elemre, és válaszd a Vizsgálat (Inspect) menüpontot: ekkor rögtön arra az elemre ugrik.
- A fülek nevei a böngésző nyelvétől függően angolul vagy magyarul jelennek meg. A leckében mindkettőt megadjuk.
A legfontosabb fülek
| Fül | Mire jó? | Hol láttad már? |
|---|---|---|
| Elements (Elemek) | A DOM-fa: az oldal szerkezete. Egy elemre kattintva látod a stílusait is, és ideiglenesen átírhatod. | 1.5, 6.2 |
| Console (Konzol) | Hibaüzenetek: hiányzó fájlok, JavaScript-hibák. | 3.2 |
| Network (Hálózat) | Minden letöltött fájl: méret, idő, állapotkód (200, 404). | 0.1 |
| Eszköz-eszköztár (Ctrl + Shift + M) | Mobil- és tabletnézet szimulálása. | 1.4 |
| Lighthouse | Automatikus minőségi jelentés pontszámokkal. | új |
Kísérlet: így készül a hamis képernyőkép
Kihívás: „szerkesztőség” egy percre
Nyiss meg egy hírportált. Kattints jobb gombbal egy cím szövegére, válaszd a Vizsgálatot, és az Elemek fülön kattints duplán a szövegre: írd át valami viccesre (például „A 10.B nyerte a világbajnokságot”). Nézd meg az oldalt, majd frissítsd (F5).
Mit tanulhatsz ebből?
A módosítás csak a te gépeden, csak addig látszott, amíg nem frissítetted az oldalt; a valódi webhely nem változott. Ugyanakkor ebből az is következik, hogy egy képernyőkép önmagában semmit nem bizonyít: bárki pillanatok alatt „átírhat” egy hírt vagy egy üzenetet, és lefotózhatja. Ha egy megdöbbentő képernyőképet látsz, keresd meg az eredeti forrást!
Felelősség
Hamisított képernyőkép terjesztése valakiről lehet zaklatás vagy rágalmazás, akkor is, ha „csak viccnek” indult. A kísérlet célja, hogy felismerd a hamisítást, ne az, hogy készíts.
Lighthouse: az oldal „bizonyítványa”
A Chrome és az Edge fejlesztői eszközeiben a Lighthouse fülön egy kattintással jelentést kérhetsz az oldalról, négy területen 0–100 pontos értékeléssel:
| Terület | Mit mér? |
|---|---|
| Performance (teljesítmény) | Milyen gyorsan töltődik be az oldal (például a képek mérete, 4.1). |
| Accessibility (akadálymentesség) | Alt szövegek, címkék, kontraszt, nyelv (8.3). |
| Best Practices (bevált gyakorlatok) | HTTPS, konzolhibák, elavult megoldások. |
| SEO (keresőoptimalizálás) | Cím, leírás, viewport, beszédes linkek (1.4, 3.1). |
A 100 pont nem minden
A Lighthouse automatikus eszköz: sok mindent nem lát. Egy 100 pontos oldal is lehet nehezen használható. A javaslatai viszont nagyon hasznosak, mert mindegyikhez magyarázatot is ad.
Oldaldetektív: tünetből a hiba nyomára
Melyik fülön keresnéd az okot? Gondold végig, aztán nyisd ki!
1. eset: a kép helyén csak egy törött ikon látszik
Nyomozás
Konzol vagy Hálózat: a képnél 404-es (nem található) állapotkódot látsz. Valószínűleg rossz az útvonal vagy a fájlnév kis- és nagybetűje (3.1, 4.1).
2. eset: az oldal „csupasz”, nincsenek színek
Nyomozás
Hálózat: a stíluslap (.css) nem töltődött be (404), vagy hiányzik a rel="stylesheet" (3.2). Ha a Hálózat fülön meg sem jelenik a .css fájl, a link címkével van baj.
3. eset: telefonon minden apró
Nyomozás
Eszköz-eszköztár (mobilnézet), majd az Elemek fülön a head: valószínűleg hiányzik a viewport meta címke (1.4).
4. eset: egy szövegrész rossz helyen van, máshogy néz ki, mint várnád
Nyomozás
Elemek: nézd meg a DOM-fát. Gyakran egy lezáratlan címke miatt a böngésző máshová teszi az elemet, mint gondolnád. Ezt a validátor is megerősíti (8.1).
Projekt: oldalorvosi vizsgálat
Vizsgáld meg a saját oldaladat a fejlesztői eszközökkel!
- Konzol és Hálózat: van-e hiányzó (404-es) fájl? Javítsd!
- Mobilnézet: nézd meg az oldaladat legalább két telefonméretben.
- Készíts Lighthouse-jelentést, és írd fel a négy pontszámot. Válassz ki két javaslatot, és valósítsd meg őket, majd mérj újra.
Kész vagy, ha…
…a konzolban nincs piros hiba, a Hálózat fülön minden fájl 200-as, és a Lighthouse-pontszámaid javultak a két javítás után.
Ellenőrizd magad!
Hogyan nyitod meg a fejlesztői eszközöket?
F12, Ctrl + Shift + I, vagy jobb klikk → Vizsgálat.
Hol látod, ha egy fájl nem található?
A Konzol és a Hálózat fülön (404-es állapotkód).
Miért nem bizonyíték egy képernyőkép?
Mert a fejlesztői eszközökkel bárki ideiglenesen átírhatja az oldal szövegét, és lefotózhatja.
Milyen területeket értékel a Lighthouse?
Teljesítmény, akadálymentesség, bevált gyakorlatok, SEO.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9–10. évfolyam: Publikálás a világhálón (weblap ellenőrzése, hibakeresés), valamint Az információs társadalom, e-Világ (információhitelesség, álhírek felismerése, digitális felelősség).
Módszertan
A lecke a tanfolyamban szétszórtan használt eszközöket rendszerezi, visszautalva a korábbi leckékre. A „hamis képernyőkép” kísérlet erős médiatudatossági élmény, amely a digitális felelősségvállalásra is kitér. Az oldaldetektív-esetek tünetből kiinduló hibakeresési gondolkodást gyakoroltatnak.
Időterv
Megnyitás és fülek: 10 perc. Hamis hír-kísérlet és megbeszélés: 10 perc. Lighthouse: 10 perc. Oldaldetektív: 10 perc. A projekt otthoni vagy következő órai feladat.