Mi a Chrome fejlesztői eszközök (Chrome DevTools)?

Chrome DevTools egy beépített eszközkészlet a böngészőben a webfejlesztéshez és hibakereséshez.

Fő panelek:

• Elements: A weboldal HTML-struktúrájának és CSS-stílusainak valós idejű megtekintése és refaktorálása.
• Console: Naplók megjelenítése, JavaScript-kód futtatása, hibakeresés.
• Sources: JavaScript-kód hibakeresése töréspontokkal, teljesítményprofilozás.
• Network: Hálózati kérések figyelése (HTTP/HTTPS), azok időtartamának és tartalmának elemzése.
• Performance: Az oldal betöltési és futási teljesítményének elemzése.
• Memory: Memóriahasználat profilozása, szivárgások felismerése.
• Application: Az alkalmazás erőforrásainak vizsgálata — tárolás (Local Storage, Session Storage, IndexedDB), cookie-k, cache.
• Security: Az oldal biztonságának elemzése, SSL tanúsítványok ellenőrzése.
• Lighthouse: A weboldal auditálása a teljesítmény, hozzáférhetőség, SEO és legjobb gyakorlatok szerint.

QA-ban való használat:

• UI/UX ellenőrzés: Stílusok elemzése (Elements), alkalmazkodóképesség tesztelése (Toggle device toolbar).
• Frontend hibakeresés: JavaScript hibák felismerése (Console, Sources).
• API-interakciók elemzése: Kérések és válaszok figyelése (Network).
• Teljesítmény értékelése: A betöltési idő és a szkriptek futási idejének becslése (Performance).
• Tárolók vizsgálata: Local Storage, cookie-k ellenőrzése stb. (Application).
• Eszköz szimuláció: Tesztelés különböző képernyőméreteken és hálózati körülmények között (Network – Throttling).