Böngésző fejlesztői eszközei hibabejelentéshez

Hogyan nyisd meg a böngésző fejlesztői eszközeit, olvasd a Console és a Network fület, exportálj HAR-fájlt, kerüld meg a gyorsítótárat és nézd meg az oldalt mobilnézetben.

This content is not available in your language yet.

Minden nagy böngészőben van beépített fejlesztői eszköztár. Ebből látszik, miért nem működik egy oldal: a Console fül a hibaüzeneteket, a Network fül a böngésző és a szerver közti kéréseket mutatja. Ügyfélként ezzel tudsz pontos hibajelentést adni, fejlesztőként ez az első hely, ahol keresni kell. A cikk a Chrome felületét írja le, a végén megtalálod a Firefox és a Safari megfelelőit.

Megnyitás

Chrome-ban az alábbi módok közül bármelyik jó:

Kattints jobb gombbal az oldalra, és válaszd az Inspect menüpontot.
Windows és Linux: F12 vagy Ctrl + Shift + I.
Mac: Cmd + Option + I (vagy Fn + F12).
A Console fülre közvetlenül: Ctrl + Shift + J (Windows, Linux), Cmd + Option + J (Mac).

Console: a hibák

A Console fülön a JavaScript-hibák és a figyelmeztetések látszanak. A hiba piros, a figyelmeztetés sárga. Néhány tudnivaló:

A Log Levels legördülő menüben kapcsolhatod be vagy ki a Verbose, Info, Warning és Error üzeneteket. Hibakereséskor elég az Error.
A hiba mellett lévő nyílra kattintva megjelenik a stack trace, vagyis hogy melyik fájl melyik sorából indult a hiba. Ezt másold a hibajelentésbe.
Alapból minden oldalbetöltéskor kiürül a Console. Ha át akarsz lépni egy másik oldalra, és meg akarod tartani az üzeneteket, nyisd meg a Console beállításait, és jelöld be a Preserve Log jelölőnégyzetet.

A hibajelentéshez a legjobb a képernyőkép, amin a hibasor és a fülek is látszanak. Az elkészítéséről lásd: Képernyőkép és videó.

Network: a kérések

A Network fül minden kérést kilistáz, amit az oldal indít. Fontos, hogy csak akkor naplóz, amikor az eszköztár nyitva van, ezért előbb nyisd meg, utána töltsd újra az oldalt.

Nyisd meg a fejlesztői eszközöket, és kattints a Network fülre.
Töltsd újra az oldalt, vagy ismételd meg a műveletet, ami hibát okoz (például az űrlap elküldését).
Nézd meg a Status oszlopot. Ez a HTTP-válaszkód, például 200 vagy 404.
Kattints a hibás sorra. A Headers fülön a kérés és a válasz fejléceit, a Response fülön a szerver válaszát látod.

A Status oszlopban más hibajelzések is előfordulnak:

Amit látsz	Jelentése
`404`	A kért fájl vagy oldal nem található.
`(failed)` és a hibaüzenet	A kérés nem tudott lezajlani.
`CORS error`	A böngésző a Cross-Origin Resource Sharing szabály miatt tiltotta a kérést.
`(blocked:origin)`	Hibásan beállított fejlécek miatt blokkolt kérés.

A Fetch/XHR szűrőgombbal csak a háttérben indított kéréseket látod. A Preserve log jelölőnégyzet a Network fülön is van: addig megtartja a kéréseket, amíg ki nem kapcsolod, így űrlapküldés után sem tűnik el a lista.

HAR-fájl exportálása

A HAR-fájl a teljes hálózati napló egyetlen fájlban. Fejlesztőnek sokkal többet mond egy képernyőképnél. Ha a hiba megismételhető, a kérések rögzítése után:

Kattints az akciósávban az Export HAR (sanitized)… gombra.
Mentsd el a fájlt, és küldd el a fejlesztőnek.

Alternatíva: jobb gombbal kattints a kéréslistára, és válaszd a Save all as HAR (sanitized) menüpontot.

Kemény újratöltés és a gyorsítótár kikapcsolása

A böngésző elmenti a fájlokat, ezért előfordul, hogy a javítás után is a régi oldalt látod.

Kemény újratöltés (Chrome): Ctrl + F5 vagy Ctrl + Shift + R (Mac: Cmd + Shift + R). Ez a gyorsítótár megkerülésével tölti újra az oldalt.
Disable cache: a Network fülön jelöld be a Disable cache jelölőnégyzetet. Így azt látod, amit egy első látogató.

Ha a szerver oldali gyorsítótár tartja a régi oldalt, a böngészőben beállított semmi nem segít. Ilyenkor tegyél az oldal címe végére egy egyedi paramétert, például ?v=123.

Mobilnézet

Nyisd meg a fejlesztői eszközöket.
Kattints a Toggle device toolbar ikonra az akciósávban, vagy nyomd meg a Ctrl + Shift + M (Mac: Cmd + Shift + M) billentyűt.
A Dimensions listában a Responsive mód szabadon méretezhető. Itt egy konkrét eszközt is kiválaszthatsz.
A Rotate gombbal fektetheted az eszközt.

Ez a nézet a képernyő méretét szimulálja, valódi telefont nem helyettesít.

Firefox és Safari

Firefox

A fejlesztői eszközök: Ctrl + Shift + K (Mac: Cmd + Opt + K) a Web Consolera, Ctrl + Shift + E (Mac: Cmd + Opt + E) a hálózati monitorra. A Browser Tools almenüből is elérhetők.
A hálózati monitor eszköztárában a Persist Logs megtartja a naplót betöltéskor, a Disable Cache kikapcsolja a gyorsítótárat. A naplót a Save All As HAR menüponttal mentheted.
Mobilnézet: Responsive Design Mode, Ctrl + Shift + M (Mac: Cmd + Opt + M). Részletek: Firefox Developer Edition.

Safari (Mac)

A fejlesztői funkciók alapból el vannak rejtve. Válaszd a Safari > Settings menüt, kattints az Advanced fülre, és jelöld be a Show features for web developers jelölőnégyzetet. Ezután megjelenik a Develop menü.

Mire figyelj

A böngészőbővítmények is okozhatnak Console-hibát. Ha a hiba gyanús, próbáld meg inkognitó ablakban, bővítmények nélkül.
A hibajelentésbe írd bele: melyik oldal, melyik böngésző, mit csináltál, mit vártál, mi történt.

Hasznos linkek

Published: 31 October 2026