
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.

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.

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.

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

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

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″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,

Rotate the viewport to landscape orientation
Click Rotate to rotate the viewport to landscape orientation.

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

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.


egyéni mobileszköz hozzáadása
egyéni eszköz hozzáadásához:
-
kattintson az Eszközlistára, majd válassza a Szerkesztés lehetőséget.
11.ábra. A Szerkesztés -
kattintson az egyéni Eszköz hozzáadása elemre.
-
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.


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

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.

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.

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.

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

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.

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.

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.


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.

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


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.

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