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

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.

1. Nyisd meg a fejlesztői eszközöket, és kattints a Network fülre.
2. 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).
3. Nézd meg a Status oszlopot. Ez a HTTP-válaszkód, például 200 vagy 404.
4. 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:

1. Kattints az akciósávban az Export HAR (sanitized)… gombra.
2. 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.

Figyelem

A HAR-fájl érzékeny adatot tartalmazhat. A Chrome dokumentációja szerint az alapértelmezett, „sanitized” export kihagyja a Cookie, Set-Cookie és Authorization fejléceket, hogy ne szivárogjon ki véletlenül érzékeny információ. Ha a Settings > Preferences > Network alatt bekapcsolod az Allow to generate HAR with sensitive data beállítást, megjelenik az Export HAR (with sensitive data) lehetőség is. Ezt ne használd, hacsak a fejlesztő kifejezetten nem kéri. A fájlt így is bizalmasként kezeld: nyilvános helyre (fórum, nyilvános ticket) ne tedd fel.

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

1. Nyisd meg a fejlesztői eszközöket.
2. Kattints a Toggle device toolbar ikonra az akciósávban, vagy nyomd meg a Ctrl + Shift + M (Mac: Cmd + Shift + M) billentyűt.
3. A Dimensions listában a Responsive mód szabadon méretezhető. Itt egy konkrét eszközt is kiválaszthatsz.
4. 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

• Chrome DevTools
• A DevTools megnyitása
• Console referencia
• Network referencia
• Eszközmód (device mode)
• Firefox fejlesztői eszközök
• Safari fejlesztői menü (Apple)