Webhely előnézetének megtekintése különböző eszközökön a Google Chrome használatával

Amikor létrehoz egy webhelyet, azt szeretné, hogy az reszponzív legyen, és alkalmazkodjon a különböző képernyőméretekhez. Ennek tesztelésének egyik módja a Google Chrome beépített fejlesztői eszközeinek használata.

A Chrome DevTools lehetővé teszi webhelye különböző aspektusainak hibakeresését. Ez magában foglalja a HTML-forráskód és a CSS módosítását és előnézetét. Lehetővé teszi továbbá az ügyféloldali JavaScript kód hibakeresését és a hálózati forgalom megtekintését.

A DevTools lehetőséget kínál arra is, hogy megtekintse a webhely előnézetét különböző eszközökön. Ez magában foglalja a különböző típusú mobileszközöket, iPadeket, táblagépeket stb.

Az Eszköz eszköztár megnyitásához a Google Chrome böngészőben meg kell nyitnia a Chrome Fejlesztői Eszközök ablak:

1. Nyisson meg egy webhelyet.
2. Kattintson a jobb gombbal az oldalra, majd kattintson a gombra Vizsgálja meg.
3. Megnyílik a Chrome DevTools ablak. Megnyílhat a böngésző oldalára vagy aljára, vagy új ablakként.
4. Az ablak bal felső sarkában két ikon található. Kattintson a több különböző méretű eszközt megjelenítő ikonra.
instagram viewer
5. A képernyő megváltozik, és megmutatja, hogyan nézne ki a webhely mobileszközön.

Váltás a különböző eszközök között

Az eszköz eszköztárának tetején található legördülő menü segítségével válthat a különböző eszközök között.

1. Az eszköztár legtetején látható, hogy milyen típusú eszközön nézi éppen a webhelyét. Kattintson a legördülő menüre egy másik eszköz kiválasztásához a listából.
2. Ahelyett, hogy meglévő eszközt választana, választhatja a webhely reszponzív módban való megtekintését. Kattintson a legördülő menüre, és válassza ki a Fogékony választási lehetőség.
3. A legördülő menü mellett megadhatja az eszköz egyéni szélességét és magasságát is.
4. A szélesség és magasság beírása helyett az ablak sarkaira kattintva és húzással is módosíthatja a méretet.

Egyéni eszköz hozzáadása

Ha el szeretne menteni egy egyéni szélességet és magasságot, hozzáadhat egy egyedi eszközt. Az eszköz eszköztár ezután megjeleníti az új eszközt az eszközök legördülő menüjében.

1. Kattintson az összes eszközt felsoroló legördülő menüre.
2. Kattintson Szerkesztés.
3. A Beállítások oldalsáv alatt ellenőrizze, hogy rendelkezik-e a Eszközök fül kiválasztva. Itt megtekintheti a további választható eszközök listáját is.
4. Kattintson Egyéni eszköz hozzáadása.
5. Adja meg az eszköz nevét, szélességét és magasságát. Győződjön meg arról, hogy az eszköz típusát is kiválasztja, például, hogy mobil vagy asztali eszköz-e. Ha bővíti a Felhasználói ügynök kliens tippek opciót, további részleteket is hozzáadhat, például az eszköz modelljét, márkáját vagy verzióját.
6. Kattintson Hozzáadás.
7. Menjen vissza az összes eszközt felsoroló legördülő menühöz. A listában látni fogja új egyéni eszközét.
8. Ezeket a részleteket később újra szerkesztheti, ha visszatér az egyéni eszköz oldalára. Kattintson a szerkeszteni gombot az eszköz neve mellett a szerkesztés megkezdéséhez.

Több okból is nagyon hasznos, ha meg tudja tekinteni a webhely előnézetét különböző eszközökön és különböző méretű képernyőkön.

Először is tesztelheti webhelye teljesítményét különböző eszközökön. Egyes mobilok nagyobb hálózati sebességgel vagy CPU-szabályozással rendelkezhetnek, mint mások.

Az eszköz eszköztára lehetővé teszi a különböző hálózati sebességbeállítások közötti váltást. Ez lehetővé teszi, hogy tesztelje a szerverre irányuló hívások sebességét, vagy tesztelje az adatok betöltését és megjelenítését a webhelyén.

Ezenkívül azt is megtekintheti, hogyan néz ki a kialakítás egy adott eszközön, a felhasználói felület szempontjából. Ha használ CSS médialekérdezések, ezzel az eszközzel ellenőrizheti, hogy a várt módon működnek-e.

A Google Chrome DevTools ablakának segítségével tesztelheti, hogyan alkalmazkodik webhelye a különböző képernyőméretekhez, és megbizonyosodhat arról, hogy webhelye reszponzív. Használhatja webhelye teljesítményének tesztelésére is, illetve arra, hogy a médialekérdezések a várt módon működnek-e.

A Google Chrome DevTools programját más célokra is használhatja. Használhatja a CSS-problémák hibakeresésére, ha módosítja a CSS-t az Elem ablak Stílusok lapján. Ez lehetővé teszi a CSS-módosítások azonnali megtekintését, ami felgyorsíthatja a kódolási munkafolyamatot.

A Google Chrome használata a CSS hibakeresésére

Olvassa el a következőt