Szimulálni Mobil Eszközök Eszköz Módban a Chrome DevTools

Által Kayce Baszkok
Műszaki Író, Chrome DevTools & Világítótorony

A Készülék Mód, hogy hozzávetőleges, hogy az oldal úgy néz ki, majd végrehajtja a mobil eszközön.

az eszköz mód a Chrome DevTools laza funkciógyűjteményének neve, amelysegít a mobil eszközök szimulálásában., Ezek a funkciók a következők:

  • Szimuláló mobil látkép
  • Fojtás a hálózati
  • Fojtás a CPU
  • Szimuláló térinformatikai
  • tájolását

Korlátozások

Hiszem, hogy a Készülék Mód, mint egy elsőrendű közelítés, hogy yourpage olyan, egy mobil eszközön. Az eszköz módban valójában nem futtatja a kódjátegy mobil eszközön. Szimulálja a mobil felhasználói élményt laptopjáról vagy asztaláról.

a mobil eszközöknek vannak olyan szempontjai, amelyeket a DevTools soha nem képes szimulálni., Forexample, a mobil CPU-k architektúrája nagyon különbözik a laptopor asztali CPU-k architektúrájától. Ha kétségei vannak, a legjobb megoldás az, ha ténylegesen futtatja az oldalt egy mobil eszközön. A távoli hibakeresés segítségével megtekintheti, módosíthatja,hibakeresheti és profilozhatja az oldal kódját laptopjáról vagy asztaláról, miközben valójában mobil eszközön fut.

mobil nézetport szimulálása

kattintson a Toggle Device Toolbar elemre a mobil nézetport szimulálásához szükséges felhasználói felület megnyitásához.

1.ábra., Az eszköztár

alapértelmezés szerint az eszköztár érzékeny nézetablakban nyílik meg.

reszponzív nézetablak mód

húzza a fogantyúkat a nézetablak átméretezéséhez bármilyen méretre. Vagy adjon meg konkrét értékeketszéles-magasságú dobozokban. A 2.ábrán a szélesség 628 értékre van állítva, a magasság pedig662értékre van állítva.

2.ábra., A fogantyúk változik a látkép méreteit, amikor az Érzékeny Látkép Mód

Show média lekérdezések

mutatni media query határértékek felett a látkép, kattintson a További lehetőségek elemre, majd válassza a Show mediaqueries.

3.ábra. Média lekérdezések megjelenítése

kattintson egy töréspontra a nézetablak szélességének megváltoztatásához, hogy a töréspont aktiválódjon.

4.ábra., Kattintson egy töréspontra a nézetablak szélességének megváltoztatásához

állítsa be az eszköz típusát

használja az eszköztípus listát mobil eszköz vagy asztali eszköz szimulálásához.

5.ábra. Az eszköz típusa list

az alábbi táblázat a lehetőségek közötti különbségeket írja le. Rendering methodre utal, hogy a Chrome teszi az oldalt, mint egy mobil vagy asztali nézetport. Kurzor ikonutal arra, hogy milyen típusú kurzort látsz, amikor az egérmutatót az oldal fölé viszi., A kirúgott események hivatkoznak arra, hogy az oldal tüzel-e touch vagy click események, amikor kölcsönhatásba lép az oldallal.,id=”b8e8c2fed7″>

Option Rendering method Cursor icon Events fired Mobile Mobile Circle touch Mobile (no touch) Mobile Normal click Desktop Desktop Normal click Desktop (touch) Desktop Circle touch

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Device list.,

Figure 6. The Device list

Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Figure 7. Landscape orientation

Note that the Rotate button disappears if your Device Toolbar is narrow.

Figure 8., Az eszköztár

Lásd még a beállítási tájolást.

Show készülék keret

Ha szimulálva a méretei egy adott mobil eszközön, mint egy iPhone 6, Több optionsand akkor válasszuk a Térkép készülék keret mutatni a fizikai eszköz keret körül a látkép.

9.ábra. Eszközkeret megjelenítése
10.ábra., Az iPhone 6 eszközkerete

egyéni mobileszköz hozzáadása

egyéni eszköz hozzáadásához:

  1. kattintson az Eszközlistára, majd válassza a Szerkesztés lehetőséget.

    11.ábra. A Szerkesztés

  2. kattintson az egyéni Eszköz hozzáadása elemre.

  3. adja meg a készülék nevét, szélességét és magasságát. Az eszköz képpontaránya, a felhasználói ügynök karakterlánca és az eszköztípus mezői nem kötelezőek. Az eszköz típusa mező a lista, amely alapértelmezés szerint mobilra van állítva.,

    Figure 12. Creating a custom device

Show rulers

Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.

Figure 13. Show rulers
Figure 14., Vonalzók a nézetablak felett és balra

nagyítsa a nézetablakot

a nagyítási lista segítségével nagyítson vagy kicsinyítsen.

15.ábra. Zoom

A hálózat és a CPU

a hálózat és a CPU fojtásához válassza a középszintű mobil vagy az alacsony végű mobilt a fojtószelep listájából.

16.ábra., A fojtószelep lista

a középszintű mobil gyors 3G-t szimulál, és a CPU-t úgy fojtja meg, hogy 4-szer kisebb legyen, mint a normál. Low-end mobil szimulálja lassú 3G fojtja a CPU 6-szor lassabb, mint a normál.Ne feledje,hogy a fojtás a laptop vagy az asztal normál képességéhez viszonyítva van.

vegye figyelembe, hogy a fojtószelep lista el lesz rejtve, ha az eszköztár keskeny.

17.ábra., A Készülék Eszköztár

Gázt a CPU csak

A gázt a CPU csak nem a hálózathoz, akkor a Teljesítmény panel, clickCapture Beállítások , majd select4x lassulás vagy 6x lassulás a CPU lista.

18.ábra. A CPU listája

Gázt a hálózat csak

korlátozza a hálózat csak nem a CPU, a Hálózat panel selectFast 3G vagy 3G Lassú a Gázt lista.,

19.ábra. A fojtószelep lista

vagy nyomja meg a Command+Shift+P (Mac) vagy a Control+Shift+P (Windows, Linux, Chrome OS) gombot a megnyitáshoza parancs menü, írja be a 3G parancsot, majd válassza a gyors 3G fojtás engedélyezése vagy lassú 3G fojtás.

20.ábra. A parancs menü

hálózati fojtást is beállíthat a teljesítmény panelen., ClickCapture Beállítások majdválasszon gyors 3G vagy lassú 3G-t a hálózati listáról.

21.ábra. A hálózati fojtás beállítása a teljesítmény panelen

felülbírálja a helymeghatározást

a helymeghatározás megnyitásához nyomós UI kattintson a testreszabás és a vezérlő DevTools majd válassza ki a selectMore tools > érzékelőket.

22.ábra., Érzékelők
23.ábra. Érzékelők megjelenítése

válassza ki a helymeghatározási lista egyik készletét, vagy válassza az egyéni helyetbelépni a saját koordinátáit, vagy válassza ki a nem elérhető helyet annak teszteléséhez, hogyan viselkedik a webhely, ha a földrajzi helymeghatározás hibaállapotban van.

24.ábra., Geolocation

Set orientation

To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.

Figure 25. Sensors
Figure 26., Érzékelők megjelenítése

válassza ki a beállítási listából az egyik előre beállított értéket, vagy válassza az egyéni orientációthogy beállítsa saját alfa -, béta-és gamma-értékeit.

27.ábra. Tájékozódás

visszajelzés

hasznos volt ez az oldal?
Igen
mi volt a legjobb dolog ezen az oldalon?
ez segített befejezni a cél(ok)
köszönöm a visszajelzést., Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

ez volt a szükséges információkat
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

pontos információkkal rendelkezett
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

könnyű volt olvasni
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.,

valami más
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

nem
mi volt a legrosszabb az oldalon?
ez nem segített befejezni a cél(ok)
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

hiányzott az információ, amire szükségem volt
Köszönjük a visszajelzést., Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

pontatlan információ volt
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

nehéz volt olvasni
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.

valami más
Köszönjük a visszajelzést. Ha konkrét elképzelései vannak az oldal javításáról, kérjük, hozzon létre egy problémát.,

lásd: csatlakozzon a DevTools közösséghez más módokon, hogy visszajelzést hagyjon.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Tovább az eszköztárra