Sensoren: Gerätesensoren emulieren

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Im Bereich Sensoren können Sie den Sensoreingang eines beliebigen Geräts emulieren.

Übersicht

Im Bereich Sensoren haben Sie folgende Möglichkeiten:

Bereich „Sensoren“ öffnen

  1. Drücken Sie je nach Betriebssystem die folgende Taste, um das Befehlsmenü zu öffnen:

    • Unter macOS: Befehlstaste + Umschalttaste + P
    • Windows, Linux oder ChromeOS: Strg + Umschalttaste + P

    Öffnen Sie das Steuerfeld, um den Bereich „Sensoren“ zu öffnen.

  2. Geben Sie sensors ein, wählen Sie Sensoren anzeigen aus und drücken Sie die Eingabetaste. Der Bereich Sensoren wird unten im DevTools-Fenster geöffnet.

Standortbestimmung überschreiben

Viele Websites nutzen den Standort des Nutzers, um Nutzern relevantere Inhalte anzubieten. Eine Wetterwebsite kann beispielsweise die lokale Vorhersage für den Wohnort eines Nutzers anzeigen, wenn der Nutzer der Website die Berechtigung zum Zugriff auf seinen Standort erteilt hat.

Wenn Sie eine Benutzeroberfläche erstellen, die sich je nach Standort des Nutzers ändert, sollten Sie darauf achten, dass sich die Website an verschiedenen Orten auf der Welt richtig verhält.

Wenn Sie Ihren Standort überschreiben möchten, öffnen Sie den Bereich Sensoren und wählen Sie in der Liste Standort eine der folgenden Optionen aus:

  • Eine der voreingestellten Städte wie Tokio.
  • Benutzerdefinierter Standort: Hier können Sie benutzerdefinierte Längen- und Breitengradkoordinaten eingeben.
  • Wählen Sie Standort nicht verfügbar aus, um zu sehen, wie sich Ihre Website verhält, wenn der Standort des Nutzers nicht verfügbar ist.

Wählen Sie in der Liste „Standortermittlung“ die Option „Tokio“ aus.

Geräteausrichtung simulieren

Wenn Sie verschiedene Geräteorientierungen simulieren möchten, öffnen Sie den Bereich Sensoren und wählen Sie in der Liste Ausrichtung eine der folgenden Optionen aus:

  • Eine der voreingestellten Ausrichtungen, z. B. Hochformat um 180° gedreht.
  • Benutzerdefinierte Ausrichtung, um eine genaue Ausrichtung anzugeben.

Wählen Sie in der Liste „Ausrichtung“ die Option „Porträt – Kopf unten“ aus.

Nachdem Sie Benutzerdefinierte Ausrichtung ausgewählt haben, werden die Felder Alpha, Beta und Gamma aktiviert. Weitere Informationen zur Funktionsweise dieser Achsen finden Sie unter Alpha, Beta und Gamma.

Sie können auch eine benutzerdefinierte Ausrichtung festlegen, indem Sie das Modell für die Ausrichtung ziehen. Halten Sie die Umschalttaste gedrückt, bevor Sie ziehen, um entlang der Alpha-Achse zu drehen.

Das Orientierungsmodell.

Force Touch

Wenn Sie Touch-Ereignisse auf Ihrer Website testen möchten, können Sie ein Touch-Ereignis erzwingen, anstatt auf „Klick“ zu klicken, auch wenn Sie auf einem Gerät ohne Touchscreen testen.

So lösen Sie Touch-Ereignisse mit dem Cursor aus:

  1. Öffnen Sie den Bereich Sensoren.
  2. Wählen Sie in der Drop-down-Liste Touch die Option Force Touch aus. Tippen statt Klicken erzwingen
  3. Klicken Sie oben in der Aufforderung auf DevTools neu laden.

Zustand des inaktiven Detektors emulieren

Mit der Inaktivitätserkennungs-API können Sie inaktive Nutzer erkennen und auf Änderungen des Inaktivitätsstatus reagieren. Mit DevTools können Sie Änderungen des Inaktivitätsstatus sowohl für den Nutzerstatus als auch für den Bildschirmstatus emulieren, anstatt auf die tatsächliche Änderung des Inaktivitätsstatus zu warten.

So emulieren Sie Inaktivitätszustände:

  1. Öffnen Sie den Bereich Sensoren. Für diese Anleitung können Sie es auf dieser Demoseite ausprobieren.

  2. Aktivieren Sie das Kästchen neben Ephemer und gewähren Sie der Demoseite in der Aufforderung die Berechtigung zur Inaktivitätserkennung. Aktualisieren Sie dann die Seite.

    Die Berechtigung zur Inaktivitätserkennung auf einer Demoseite gewähren

  3. Wählen Sie im Drop-down-Menü Emulate Idle detector State (Inaktivitätserkennungsstatus emulieren) eine der folgenden Optionen aus:

    • Keine Emulation in inaktivem Zustand
    • Nutzer aktiv, Bildschirm entsperrt
    • Nutzer aktiv, Bildschirm gesperrt
    • Nutzer inaktiv, Bildschirm entsperrt
    • Nutzer inaktiv, Bildschirm gesperrt

Auswahl eines Inaktivitäts- und Sperrstatus auf einer Demoseite

In diesem Beispiel emuliert DevTools den Status Nutzer inaktiv, Bildschirm gesperrt. In diesem Fall startet die Demoseite den 10-Sekunden-Countdown zum Leeren des Canvas.

Hardware-Parallelität emulieren

Wenn Sie die Leistung Ihrer Website auf Geräten mit unterschiedlicher Anzahl von Prozessorkernen emulieren möchten, können Sie den von der Property navigator.hardwareConcurrency gemeldeten Wert überschreiben. Einige Anwendungen verwenden diese Property, um den Grad der Parallelität ihrer Anwendung zu steuern, z. B. die Größe des Emscripten-pthread-Pools.

So emulieren Sie die Hardware-Parallelität:

  1. Öffnen Sie den Bereich Sensoren.
  2. Aktivieren Sie unten im Bereich das Kästchen Hardware concurrency.
  3. Geben Sie im Eingabefeld für die Zahl die Anzahl der Kerne ein, die Sie emulieren möchten.

„Hardware-Parallelität“ mit 10 Kernen aktiviert

Wenn Sie zum Standardwert zurückkehren möchten, klicken Sie auf die Schaltfläche Zurücksetzen.