HTTP kommunikáció vizsgálata

Ebben a demóban egy weboldalon keresztül vizsgáljuk a HTTP csomagok felépítését és átviteli folyamatát. Bemutatjuk továbbá a böngésző fejlesztői konzoljának használatát a hálózati forgalom elemzésére.

Előkészületek

1. Nyisd meg a Chrome vagy Firefox böngészőt.

2. Látogass el a https://aut.bme.hu oldalra.

3. Nyisd meg a Fejlesztői konzolt.

4. Nyomd meg F12 vagy Ctrl+Shift+I gombot a megnyitásához.

5. Válaszd a "Network" fület a hálózati forgalom figyeléséhez.

Dokumentum vizsgálata

1. Töltsd újra az oldalt (F5 vagy Ctrl+R). A Network panel listázni fogja a betöltött erőforrások sorát.

   • Name: a kérés erőforrása (pl. /, index.html, script.js).
   • Status: HTTP státuszkód (200, 301, 404, stb.).
   • Type: erőforrás típusa (document, script, stylesheet, image, xhr).
   • Initiator: mi indította a kérést (pl. HTML, script).
   • Size: átvitt méret.
   • Time: teljes betöltési idő.

2. Kattints a listában az első sorban található domain név elemre, a Type oszlopban document típussal.

   • A jobb oldali panelen több fül jelenik meg: Headers, Preview, Response, Cookies, Timing.

3. Headers fül

   • General: Request URL, Request Method (GET), Status Code, Remote Address.
   • Response Headers: itt láthatók a szerver által küldött mezők (Content-Type, Content-Length, Cache-Control, Set-Cookie, stb.).
   • Request Headers: a böngésző által küldött mezők (User-Agent, Accept, Referer, Host, stb.).
   • A Raw bepipálásával a nyers HTTP kérés / válasz fejlécek láthatóak.

4. Preview és Response fül

   • Preview: a böngésző által feldolgozott, strukturált nézet (DOM-szerű megjelenítés), gyors áttekintéshez.
   • Response: a nyers válasz (a teljes HTML forrás). Itt ellenőrizheted a beágyazott linkeket, inline script-eket és meta-adatokat közvetlenül a letöltött HTML-ben.

---

2025-10-28 Szerzők