# 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.

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ó](https://hub.hellowp.io/hu/knowledge-base/useful-tools/kepernyokep-video/).

## 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](https://hub.hellowp.io/hu/knowledge-base/developer-tools/bongeszo-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](https://developer.chrome.com/docs/devtools)
- [A DevTools megnyitása](https://developer.chrome.com/docs/devtools/open)
- [Console referencia](https://developer.chrome.com/docs/devtools/console/reference)
- [Network referencia](https://developer.chrome.com/docs/devtools/network/reference)
- [Eszközmód (device mode)](https://developer.chrome.com/docs/devtools/device-mode)
- [Firefox fejlesztői eszközök](https://firefox-source-docs.mozilla.org/devtools-user/)
- [Safari fejlesztői menü (Apple)](https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac)