Simulere Mobile Enheter med Enhet-Modus i Chrome DevTools

Etter Kayce Baskerne
Teknisk Forfatter, Chrome DevTools & Fyr

Bruk-Enhet-Modus for å simulere hvordan siden din ser ut og utfører på en mobil enhet.

Enhet-Modus er navnet på det løs samling av funksjonene i Chrome DevTools thathelp du simulere mobile enheter., Disse funksjonene inkluderer:

  • Simulerer en mobil viewport
  • Struping av nettverk
  • Struping av CPU
  • Simulere geolocation
  • innstillinger for retning

Begrensninger

Tenk på Enheten Modus som en første-ordens tilnærming av hvordan yourpage ser ut og føles på en mobil enhet. Med Enhet-Modus du trenger faktisk ikke kjøre din codeon en mobil enhet. Du simulere den mobile brukeren erfaring fra din bærbare eller stasjonære datamaskinen.

Det er noen aspekter av mobile enheter som DevTools vil aldri være i stand til å simulere., Forexample, arkitektur av mobile Prosessorer er svært annerledes enn arkitekturen av laptopor desktop-Prosessorer. Når du er i tvil, det beste alternativet er å faktisk kjøre siden din på en mobil enhet. Bruk Ekstern Feilsøking for å vise, endre, feilsøke og profil for en side kode fra din bærbare eller stasjonære mens det går faktisk på en mobil enhet.

Simulere en mobil viewport

Klikk Slå Enheten Verktøylinjen for å åpne UI thatenables du å simulere en mobil viewport.

Figur 1., Enheten Verktøylinjen

standard Enheten Verktøylinjen vises i Responsive Vindu-Modus.

Responsive Viewport-Modus

Dra i håndtakene for å endre størrelsen på vinduet til hva dimensjonene du trenger. Eller, angi bestemte valuesin bredde-og høyde-boksene. I Figur 2, bredden er satt til 628 og høyden er satt til662.

Figur 2., Håndtakene for å endre vindu mål når du er i Responsive Viewport-Modus

Vise media queries

for Å vise media query stoppunkt over vinduet, klikk Flere alternativer, og deretter velger du Vis mediaqueries.

Figur 3. Vis media queries

Klikk på et stoppunkt for å endre vindu er bredden, slik at stoppunkt blir utløst.

Figur 4., Klikk på et stoppunkt for å endre vindu bredde

Angi at enheten type

Bruke Enheten Type-listen for å simulere en mobil enhet eller stasjonære enheten.

Figur 5. Enheten Type list

tabellen nedenfor beskriver forskjellene mellom alternativene. Gjengivelse methodrefers om Chrome gjør side som en mobil eller desktop viewport. Markøren iconrefers til hvilken type markøren du ser når du holder musepekeren over siden., Hendelser sparken refersto om side branner touch eller click hendelsene når du arbeider med siden.,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., Enheten Verktøylinjen

Se også Angi retning.

Vis enheten frame

Når simulere dimensjoner av spesifikke mobile enheter, for eksempel en iPhone 6, åpne Mer optionsand deretter velger du Vis enheten ramme for å vise den fysiske enheten ramme rundt vindu.

Figur 9. Vis enheten frame
Figur 10., Enheten ramme for iPhone 6

Legg til en tilpasset mobile enheter

for Å legge til en egendefinert enhet:

  1. Klikk Enhet-listen, og velg deretter Rediger.

    Figur 11. Å velge Rediger

  2. Klikk på Legg til egendefinert enhet.

  3. skriv Inn et navn, bredde og høyde for enheten. Thedevice pixel ratio, user agent string,og enhetstype feltene er valgfrie. Enheten type-feltet er listen thatis satt til Mobil som standard.,

    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., Herskere over og til venstre for vinduet

Zoom viewport

Bruk Zoom-listen for å zoome inn eller ut.

Figur 15. Zoom

Gass nettverket og CPU

Til gass nettverket og CPU, velger du Mid-tier mobil eller Low-end mobilefrom Gass-listen.

Figur 16., Gassen liste

Mid-tier mobile simulerer raske 3G-og throttles din CPU, slik at det er 4 timesslower enn normalt. Low-end mobile simulerer treg 3G og throttles din CPU 6 ganger langsommere enn normalt.Husk at struping er i forhold til normal evne til din bærbare eller stasjonære datamaskinen.

Merk at Gass listen vil bli skjult hvis Enheten Verktøylinjen er smal.

Figur 17., Enheten Verktøylinjen

Gass CPU bare

Til gass CPU og ikke-nettverk, kan du gå til Ytelse panel, clickCapture Innstillinger , og trykk deretter select4x nedgang eller 6x nedgang fra CPU-listen.

Figur 18. CPU-liste

Gass nettverket bare

Til gass nettverket og ikke CPU-en, går du til Nettverk-panelet og selectFast 3G eller Treg 3G fra Gass-listen.,

Figur 19. Gassen liste

Eller trykk på Kommando+Skift+P (Mac) eller ctrl+Shift+P (Windows, Linux og Chrome OS) for å openthe Kommando-Menyen, skriver du inn 3G, og velg Aktiver rask 3G-struping orEnable treg 3G-throttling.

Figur 20. Kommandoen Meny

Du kan også stille nettverk struping fra Ytelse-panelet., ClickCapture Innstillinger og thenselect Raske 3G-eller Treg 3G fra Nettverk-listen.

Figur 21. Innstilling nettverk struping av Ytelsen panelet

Overstyre geolocation

for Å åpne geolocation overordnede UI klikk på Tilpass og kontroll DevTools og deretter selectMore verktøy > Sensorer.

Figur 22., Sensorer
Figur 23. Vis Sensorer

Velg en av forhåndsinnstillingene fra Geolocation listen, eller velg Tilpasset locationto inn dine egne koordinater, eller velg Sted utilgjengelig for å teste ut hvordan yourpage oppfører seg når geolocation er en feil staten.

Figur 24., Geolocation

Set orientation

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

Figure 25. Sensors
Figure 26., Vis Sensorer

Velg en av forhåndsinnstillingene fra Orientering listen, eller velg Tilpasset orientationto angi din egen alfa -, beta-og gamma-verdiene.

Figur 27. Orientering

Tilbakemelding

Var denne siden nyttig?
Ja
Hva var det beste med denne siden?
Det hjalp meg til å fullføre målet mitt(s)
Takk for tilbakemeldingen., Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Det hadde den informasjonen jeg trengte
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Det hadde nøyaktig informasjon
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Det var lett å lese
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.,

Noe annet
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Nei
Hva var den verste tingen om denne siden?
Det ikke hjelpe meg med å fullføre målet mitt(s)
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Det var manglende informasjon jeg trengte
Takk for tilbakemeldingen., Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Det hadde uriktige opplysninger
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Det var vanskelig å lese
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.

Noe annet
Takk for tilbakemeldingen. Hvis du har konkrete ideer på hvordan du kan forbedre denne siden, kan du opprette et problem.,

Se Bli med i DevTools samfunnet for andre måterfor tilbakemelding.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Hopp til verktøylinje