Sensoren: emuleer apparaatsensoren

Sofia Emelianova
Sofia Emelianova

Gebruik het paneel Sensoren om sensorinvoer van elk apparaat te emuleren.

Overzicht

In het paneel Sensoren kunt u het volgende doen:

Open het paneel 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 paneel Sensoren te openen.

  2. Typ sensors , selecteer Sensoren tonen en druk op Enter . Het paneel Sensors 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 paneel Sensoren en selecteert u in de geolocatielijst 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 paneel Sensors 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 paneel Sensoren .
  2. Selecteer in de vervolgkeuzelijst Aanraken Aanraking forceren . 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 paneel 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.

Emuleer gelijktijdigheid van hardware

Om te emuleren hoe uw website presteert op apparaten met verschillende aantallen processorkernen, kunt u de waarde overschrijven die wordt gerapporteerd door de eigenschap navigator.hardwareConcurrency . Sommige toepassingen gebruiken deze eigenschap om de mate van parallelliteit van hun toepassing te regelen, bijvoorbeeld om de grootte van de Emscripten pthread pool te bepalen.

Hardware-gelijktijdigheid emuleren:

  1. Open het paneel Sensoren .
  2. Zoek onderaan het paneel Hardware concurrency en schakel dit in.
  3. Voer in het getalinvoervak ​​het aantal kernen in dat u wilt emuleren.

'Hardware-concurrency' ingeschakeld met het aantal cores ingesteld op 10.

Om terug te keren naar de standaardwaarde, klikt u op de knop ongedaan maken .