Simulere Mobile Enheder med Enhed-Tilstand i Chrome DevTools

Af Kayce Baskerne
Technical Writer, Chrome DevTools & Fyret

Brug-Enhed-Tilstand til at tilnærme hvordan din side ser ud og udfører på en mobil enhed.

enhedstilstand er navnet på den løse samling af funktioner i Chrome DevTools thathjælpe dig med at simulere mobile enheder., Disse funktioner omfatter:

  • Simulerer en mobil vindue
  • Kvæle nettet
  • Neddrosling af CPU ‘
  • Simulering af geolocation
  • Indstilling orientering

Begrænsninger

Tænk på Enheden Mode, som et første ordens tilnærmelse af, hvordan yourpage ser ud og føles på en mobil enhed. Med enhedstilstand kører du faktisk ikke din kodepå en mobilenhed. Du simulerer den mobile brugeroplevelse fra din bærbare eller stationære.

Der er nogle aspekter af mobile enheder, som DevTools aldrig vil kunne simulere., Foreamample, arkitekturen af mobile CPU ‘er er meget anderledes end arkitekturen af laptopor desktop CPU’ er. Når du er i tvivl, er din bedste chance faktisk at køre din side på en mobilenhed. Brug fjernfejlfinding til at se, ændre,debugge og profilere en sides kode fra din bærbare eller stationære computer, mens den faktisk kører på en mobilenhed.

Simulere en mobil vindue

Klik på Slå Enheden Værktøjslinje for at åbne UI thatenables dig til at simulere en mobil vindue.

Figur 1., Enhedsværktøjslinjen

Som standard åbnes Enhedsværktøjslinjen i responsiv visningstilstand.

responsiv visningstilstand

træk håndtagene for at ændre størrelsen på visningen til de dimensioner, du har brug for. Eller indtast specifikke værdieri boksene bredde og højde. I figur 2 er bredden indstillet til 628 og højden er indstillet til662.

Figur 2., Håndtagene for at ændre viewport ‘ s dimensioner, når i Responsive Viewport-Tilstand

Vis medier forespørgsler

for At vise medier forespørgsel breakpoints over din viewport, klik på Flere indstillinger, og vælg derefter Vis mediaqueries.

Figur 3. Vis medieforespørgsler

Klik på et breakpoint for at ændre visningsportens bredde, så breakpoint bliver udløst.

Figur 4., Klik på et breakpoint for at ændre visningens bredde

Indstil Enhedstype

Brug listen Enhedstype til at simulere en mobilenhed eller stationær enhed.

Figur 5. Listen Enhedstype

tabellen nedenfor beskriver forskellene mellem indstillingerne. Rendering metodehenviser til, Om Chrome gør siden som en mobil eller desktop vie .port. Markørikonhenviser til hvilken type markør du ser, når du holder musepekeren over siden., Begivenheder fyret refererer til, om siden brande touch eller click begivenheder, når du interagerer 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., Enhedsværktøjslinjen

Se også Indstil Orientering.

Vis enhedsramme

Når du simulerer dimensionerne på en bestemt mobilenhed som en iPhone 6, skal du åbne flere mulighederog vælg derefter Vis enhedsramme for at vise den fysiske enhedsramme omkring visningsporten.

Figur 9. Vis enhed stel
Figur 10., Enheden frame til iPhone 6

Tilføj en brugerdefineret mobile enhed

for At tilføje en brugerdefineret enhed:

  1. Klik på den liste over enheder, og vælg derefter Rediger.

    Figur 11. Valg af Rediger

  2. Klik på Tilføj brugerdefineret enhed.

  3. indtast et navn, bredde og højde for enheden. Thedevice pi .el ratio, user agent string,og enhedstype felter er valgfri. Feltet enhedstype er listen somer indstillet 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., Linealer over og til venstre for visningsporten

Zoom visningsporten

brug Zoomlisten til at .oome ind eller ud.

Figur 15. Zoom

Gashåndtaget netværket og CPU

At kvæle nettet, og CPU ‘ en, vælg Mid-tier mobil eller Low-end mobilefrom Gashåndtaget liste.

Figur 16., Gashåndtaget liste

Mid-tier mobile simulerer hurtig 3G-og kvæler din CPU, så det er 4 timesslower end normalt. Lo. – end mobil simulerer langsom 3G og dæmper din CPU 6 gange langsommere end normalt.Husk, at throttling er i forhold til den normale kapacitet på din bærbare eller stationære computer.

Bemærk, at Throttle-listen vil blive skjult, hvis enhedens værktøjslinje er smal.

Figur 17., Enheden Værktøjslinje

Gashåndtaget CPU kun

for At gashåndtaget CPU og ikke netværket, skal du gå til den Performance panel, clickCapture Indstillinger , og derefter select4x afmatning eller 6x opbremsning fra CPU-liste.

Figur 18. CPU list

Gashåndtaget netværket kun

At kvæle netværket og ikke kun CPU ‘ en, skal du gå Netværket panel og selectFast 3G eller Langsom 3G fra Gashåndtaget liste.,

Figur 19. Gashåndtaget liste

Eller tryk på Command+Skift+P (Mac) eller Ctrl+Shift+P (Windows, Linux, Chrome OS) for at åbnede Kommando i Menuen, type 3G, og vælg Aktivér hurtig 3G-regulering orEnable langsom 3G-regulering.

Figur 20. Kommandomenuen

Du kan også indstille netværksdrottling fra Præstationspanelet., ClickCapture Settings og vælg derefter Fast 3G eller Slo.3G fra netværkslisten.

Figur 21. Indstilling af netværket regulering fra Performance panel

Tilsidesætte geolocation

for At åbne geolocation overordnede UI klikke på Tilpas og kontrol DevTools og så selectMore værktøjer > Sensorer.

Figur 22., Sensorer
Figur 23. Vis Sensorer

Vælg en af forhåndsindstillingerne fra Geolocation listen, eller vælg Brugerdefineret locationto indtaste dine egne koordinater, eller vælg Placering utilgængelige for at afprøve, hvordan yourpage opfører sig, når geolocation er i en fejltilstand.

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

Vælg en af forhåndsindstillingerne fra Orientering listen, eller vælg Brugerdefineret orientationto sæt dit eget alfa -, beta-og gamma-værdier.

Figur 27. Orientering

Feedback

var denne side nyttig?
Ja
hvad var det bedste ved denne side?
det hjalp mig med at fuldføre mit mål
tak for feedbacken., Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

det havde de oplysninger, jeg havde brug for
tak for feedbacken. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

det havde nøjagtige oplysninger
tak for feedbacken. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

det var let at læse
tak for feedbacken. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.,

noget andet
tak for din feedback. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

Nej
hvad var det værste ved denne side?
det hjalp mig ikke med at fuldføre mit mål
tak for feedbacken. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

det manglede oplysninger, jeg havde brug for
tak for feedbacken., Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

det havde unøjagtige oplysninger
tak for feedbacken. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

det var svært at læse
tak for feedbacken. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.

noget andet
tak for din feedback. Hvis du har specifikke ideer til, hvordan du forbedrer denne side, skal du oprette et problem.,

se Deltag i DevTools-samfundet for andre måder at give feedback på.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Videre til værktøjslinje