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

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