Sensoren: emuleer apparaatsensoren

Sofia Emelianova
Sofia Emelianova

Gebruik het tabblad Sensoren om sensorinvoer van elk apparaat te emuleren:

Open het tabblad Sensoren

  1. Afhankelijk van uw besturingssysteem drukt u op de volgende knop om het Commandomenu te openen:

    • Op MacOS: Command + Shift + P
    • Op Windows, Linux of ChromeOS gebruikt u Control + Shift + P

    Gebruik het Commandomenu om het tabblad Sensoren te openen.

  2. Typ sensors , selecteer Sensoren tonen en druk op Enter . Het tabblad Sensoren wordt onderaan uw DevTools-venster geopend.

Geolocatie overschrijven

Veel websites maken gebruik van de gebruikerslocatie om hun gebruikers een relevantere ervaring te bieden. Een weerwebsite kan bijvoorbeeld de lokale voorspelling voor het gebied van een gebruiker weergeven, zodra de gebruiker de website toestemming heeft gegeven om toegang te krijgen tot zijn locatie.

Als u een gebruikersinterface bouwt die verandert afhankelijk van waar de gebruiker zich bevindt, wilt u er waarschijnlijk voor zorgen dat de site zich op verschillende plaatsen in de wereld correct gedraagt.

Om uw geolocatie te overschrijven, opent u het tabblad Sensoren en selecteert u in de lijst Geolocatie een van de volgende opties:

  • Een van de vooraf ingestelde steden, zoals Tokio .
  • Aangepaste locatie om aangepaste lengte- en breedtegraadcoördinaten in te voeren.
  • Selecteer Locatie niet beschikbaar om te zien hoe uw site zich gedraagt ​​wanneer de locatie van de gebruiker niet beschikbaar is.

Selecteer 'Tokio' uit de lijst 'Geolocatie'.

Simuleer de oriëntatie van het apparaat

Om verschillende apparaatoriëntaties te simuleren, opent u het tabblad Sensoren en selecteert u in de lijst Oriëntatie een van de volgende opties:

  • Een van de vooraf ingestelde oriëntaties, zoals Portret ondersteboven .
  • Aangepaste oriëntatie om uw eigen exacte oriëntatie aan te geven.

Selecteer 'Portret ondersteboven' uit de lijst 'Oriëntatie'.

Nadat u Aangepaste oriëntatie hebt geselecteerd, zijn de alfa- , bèta- en gammavelden ingeschakeld. Zie Alfa , Bèta en Gamma om te begrijpen hoe deze assen werken.

U kunt ook een aangepaste oriëntatie instellen door het Oriëntatiemodel te slepen. Houd Shift ingedrukt voordat u sleept om langs de alfa- as te roteren.

Het Oriëntatiemodel.

Forceer aanraking

Als u aanraakgebeurtenissen op uw website wilt testen, kunt u aanraking forceren in plaats van klikken, zelfs als u test op een apparaat zonder aanraakscherm.

Aanraakgebeurtenissen activeren met uw aanwijzer:

  1. Open het tabblad Sensoren .
  2. Selecteer Forceer aanraking in de vervolgkeuzelijst Aanraken . Aanraking forceren in plaats van klikken.
  3. Klik op DevTools opnieuw laden in de prompt bovenaan.

Emuleer de status van de inactieve detector

Met de Idle Detection API kunt u inactieve gebruikers detecteren en reageren op wijzigingen in de inactieve status. Met DevTools kunt u wijzigingen in de inactieve status emuleren voor zowel de gebruikersstatus als de schermstatus, in plaats van te wachten tot de daadwerkelijke inactieve status verandert.

Inactieve toestanden emuleren:

  1. Open het tabblad Sensoren . Voor deze tutorial kunt u deze proberen op deze demopagina .

  2. Schakel het selectievakje naast Ephemeral in en geef in de prompt de demopagina toestemming voor inactieve detectie. Laad vervolgens de pagina opnieuw.

    Toestemming voor inactieve detectie verlenen op een demopagina.

  3. Selecteer onder de vervolgkeuzelijst Inactieve detectorstatus emuleren een van de volgende opties:

    • Geen inactieve emulatie
    • Gebruiker actief, scherm ontgrendeld
    • Gebruiker actief, scherm vergrendeld
    • Gebruiker inactief, scherm ontgrendeld
    • Gebruiker inactief, scherm vergrendeld

Een inactieve en vergrendelde status selecteren op een demopagina.

In dit voorbeeld emuleert DevTools een inactieve, schermvergrendelde status van de gebruiker en in dit geval begint de demopagina met het aftellen van 10 seconden om het canvas leeg te maken.