Simuleer mobiele apparaten met apparaatmodus in Chrome DevTools

gebruik de apparaatmodus om te schatten hoe uw pagina eruit ziet en presteert op een mobiel apparaat.

Device Mode is de naam voor de losse verzameling van functies in Chrome DevTools die u helpen bij het simuleren van mobiele apparaten., Deze functies omvatten:

• simuleren van een mobiele viewport
• Throttling het netwerk
• Throttling de CPU
• simuleren geolocatie
• instelling oriëntatie

beperkingen

zie apparaatmodus als een eerste-orde benadering van hoe uw pagina eruit ziet en voelt op een mobiel apparaat. Met Device Mode je niet echt uitvoeren van uw codeop een mobiel apparaat. U simuleert de mobiele gebruikerservaring vanaf uw laptop of desktop.

Er zijn een aantal aspecten van mobiele apparaten die DevTools nooit zal kunnen simuleren., Bijvoorbeeld, de architectuur van mobiele CPU ’s is heel anders dan de architectuur van laptopor desktop CPU’ s. Bij twijfel, uw beste weddenschap is om daadwerkelijk uitvoeren van uw pagina op een mobiel apparaat. Gebruik Remote Debugging te bekijken, te wijzigen, debuggen, en profiel van de code van een pagina van uw laptop of desktop, terwijl het eigenlijk draait op een mobiel apparaat.

Simuleer een mobiele viewport

klik op Toggle Device Toolbar om de gebruikersinterface te openen waarin u een mobiele viewport kunt simuleren.

standaard opent de Apparaatwerkbalk in responsieve Viewport-modus.

responsieve Viewport Mode

sleep de handvatten om de grootte van de viewport te wijzigen naar de afmetingen die u nodig hebt. Of voer specifieke waarden in in de vakken breedte en hoogte. In Figuur 2 is de breedte ingesteld op 628 en de hoogte op662.

mediaquery ’s tonen

om breekpunten voor mediaquery’ s boven uw viewport weer te geven, klikt u op Meer opties en selecteert u mediaquery ‘ s tonen.

klik op een breekpunt om de breedte van de viewport te wijzigen zodat het breekpunt wordt geactiveerd.

stel het apparaattype in

gebruik de lijst Apparaattype om een mobiel apparaat of desktopapparaat te simuleren.

de tabel hieronder beschrijft de verschillen tussen de opties. Rendering methode verwijst naar de vraag of Chrome maakt de pagina als een mobiele of desktop viewport. Cursor iconrefers naar welk type cursor u ziet wanneer u met de muisaanwijzer over de pagina gaat., Gebeurtenissen die zijn afgevuurd verwijzen naar of de pagina touch of click gebeurtenissen afvuurt wanneer u met de pagina communiceert.,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.,

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.

zie ook oriëntatie instellen.

apparaatframe tonen

wanneer u de afmetingen van een specifiek mobiel apparaat zoals een iPhone 6 simuleert, opent u meer opties en selecteert u apparaatframe tonen om het fysieke apparaatframe rond de viewport te tonen.

een aangepast mobiel apparaat toevoegen

om een aangepast apparaat toe te voegen:

1. klik op de apparaatlijst en selecteer vervolgens Bewerken.

   

2. klik op aangepast apparaat toevoegen.

3. voer een naam, breedte en hoogte voor het apparaat in. De Device pixel ratio, user agent string en device type velden zijn optioneel. Het veld apparaattype is de lijst die standaard op mobiel is ingesteld.,

   

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.

Zoom de viewport

Gebruik de Zoomlijst om in of uit te zoomen.

Throttle het netwerk en CPU

om het netwerk en CPU te throttle, selecteert u Mid-tier mobile of Low-end mobile uit de Throttle lijst.

Mid-tier mobile simuleert snelle 3G en smelt uw CPU zo dat het 4 keer minder is dan normaal. Low-end mobile simuleert langzame 3G en throttles uw CPU 6 keer langzamer dan normaal.Houd er rekening mee dat de throttling is relatief aan de normale mogelijkheden van uw laptop of desktop.

merk op dat de Gaskleplijst verborgen zal zijn als de werkbalk van uw apparaat smal is.

Gas alleen de CPU

om alleen de CPU en niet het netwerk te Gas geven, gaat u naar het Prestatiepaneel, klikt u op capture Settings en selecteert u 4x vertraging of 6x vertraging uit de CPU-lijst.

Throttle het netwerk alleen

om alleen het netwerk te throttle en niet de CPU, ga naar het netwerkpaneel en selecteer snel 3G of langzaam 3G uit de Throttle-lijst.,

of druk op Command+Shift+P (Mac) of Control+Shift+P (Windows, Linux, Chrome OS) om het commando-Menu te openen, typ 3G, en selecteer snel 3G-throttling inschakelen of traag 3G-throttling inschakelen.

u kunt ook netwerk throttling instellen vanuit het Prestatiepaneel., Klik op capture Settings en selecteer snel 3G of langzaam 3G uit de netwerklijst.

overschrijven geolocatie

om de geolocatie-overschrijdende UI te openen klik op DevTools aanpassen en beheren en selecteer vervolgens meer hulpmiddelen > sensoren.

selecteer een van de Voorkeuzen uit de Geolocatielijst, of Selecteer Aangepaste locatie om uw eigen coördinaten in te voeren, of selecteer Locatie niet beschikbaar om uit te testen hoe uw pagina zich gedraagt wanneer de geolocatie zich in een fouttoestand bevindt.

Set orientation

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

selecteer een van de Voorkeuzen uit de Oriëntatielijst of Selecteer Aangepaste oriëntatie om uw eigen alfa -, bèta-en gammawaarden in te stellen.

Feedback