# A webhely tesztelése több böngészőben

> Hogyan ellenőrizd, hogy a boltod minden böngészőben és eszközön ugyanúgy néz ki és működik, és hogyan vizsgálj meg egy oldalelemet.

A böngészők a kódot kissé eltérően értelmezik, ezért előfordulhat, hogy a boltod az egyik böngészőben hibátlan, a másikban viszont szétcsúszik vagy nem működik egy funkció. Ha több böngészőben is kipróbálod az oldalt, a hibát még azelőtt megtalálhatod, hogy a vásárlóid belefutnának. Ez megbízhatóbb élményt ad, és csökkenti a támogatási kérdések számát is.

> **Megjegyzés**
>
> Ez haladó hibaelhárítási útmutató. Az itt leírt eljárások a WooCommerce hivatalos támogatásának körén kívül esnek, ha elakadsz, fordulj hozzáértő WordPress- vagy WooCommerce-fejlesztőhöz.

## Böngészőtesztelő szolgáltatások

Külső szolgáltatásokkal különböző böngészőkben és eszközökön, többek között mobilon is megnézheted az oldalad. Azt is ki tudod próbálni, hogyan látják az oldalt a más országokból érkező látogatók.

- BrowserStack
- LambdaTest
- Sauce Labs

Ezek harmadik féltől származó szolgáltatások, a használatukkal kapcsolatos kérdésekkel a szolgáltatóhoz fordulj. A tárhelyszolgáltatód is kínálhat vagy ajánlhat ilyen eszközt.

## Egy oldalelem megvizsgálása

Az elemvizsgálattal megláthatod, hogyan épül fel az oldal egy része, és melyik stílus hat rá. A módosításaid csak a böngészőben látszanak: nem mentődnek a weboldal stíluslapjába, és az oldal frissítésekor eltűnnek. Hibakeresésre és egy lehetséges változtatás előnézetére jók.

### Chrome

1. Navigálj a vizsgálni kívánt oldalra, kattints jobb gombbal az elemre, és válaszd az **Inspect** (Vizsgálat) pontot. Megnyílik a fejlesztői eszközök panelje, és kijelöli az elemet a HTML-szerkezetben.
2. Az **Elements** fülön a HTML-szerkezetet látod. Ha a kód egy része fölé viszed az egeret, az oldalon kiemelődik a hozzá tartozó rész.
3. A **Styles** panelben (jobbra vagy alul) látod és szerkesztheted az elemre vonatkozó CSS-t. A változás azonnal látszik az oldalon.

### Firefox

1. Kattints jobb gombbal az elemre, és válaszd az **Inspect** pontot.
2. Megnyílik az Inspector, benne az oldal HTML és CSS kódjával. Közvetlenül szerkesztheted őket, és azonnal látod az eredményt.

### Edge

1. Kattints jobb gombbal az elemre, és válaszd az **Inspect** pontot a fejlesztői eszközök megnyitásához.
2. Az **Elements** fül DOM-fájában (az oldal szerkezetét mutató fa) böngészhetsz. A **Styles** panelben módosított CSS gépelés közben frissíti az oldalt.

### Safari

1. Először kapcsold be a **Develop** menüt: **Safari → Settings → Advanced**, majd jelöld be a **Show features for web developers** négyzetet.
2. Utána jobb gombbal kattints az oldalra, és válaszd az **Inspect Element** pontot, vagy a felső menüsor **Develop** menüjében a **Show Web Inspector** parancsot.

## Melyik fájl adja az elemet?

Ha egy elemet vizsgálsz, egy külön bővítménnyel, például a String Locatorral megtalálhatod, hogy melyik téma- vagy bővítményfájl állítja elő.