Freigeben über

Emulieren von Gerätesensoren

Verwenden Sie das Sensortool, um die Sensoreingabe eines beliebigen Geräts zu emulieren.

Das Sensortool

Übersicht

Mit dem Sensortool können Sie folgende Aktionen ausführen:

Informationen zum Simulieren eines Viewports eines mobilen Geräts und zum Drosseln des Netzwerks und der CPU finden Sie unter Emulate mobile devices (Device Emulation).

Öffnen des Sensors-Tools

  1. Öffnen Sie eine Webseite, z. B. die Demoseite der TODO-App , in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Drücken Sie ESC ein- oder zweimal, sodass der Bereich Schnellansicht am unteren Rand von DevTools geöffnet ist.

  4. Klicken Sie im Bereich Schnellansicht auf die Schaltfläche Weitere Tools , und wählen Sie dann Sensoren aus.

    Das Tool Sensoren wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

Öffnen Sie das Sensortool über das Befehlsmenü.

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

    • Unter Windows, Linux oder ChromeOS drücken Sie CTRL+UMSCHALT+P.
    • Unter macOS : BEFEHL+UMSCHALT+P.

    Verwenden des Befehlsmenüs zum Öffnen des Sensors-Tools

  2. Geben Sie Sensoren ein, wählen Sie Sensoren anzeigen aus, und drücken Sie dann die EINGABETASTE.

    Das Sensortool wird unten in DevTools in der Schnellansicht geöffnet.

Außerkraftsetzung der Geolocation

Viele Websites nutzen den Benutzerstandort, um ihren Benutzern eine relevantere Erfahrung zu bieten. Beispielsweise kann eine Wetterwebsite die lokale Vorhersage für den Bereich eines Benutzers anzeigen, nachdem der Benutzer der Website die Berechtigung erteilt hat, auf seinen Standort zuzugreifen. Informationen zum Zugreifen auf die Geolocation eines Benutzers von Ihrer Website aus finden Sie unter Geolocation-API unter MDN.

Wenn Sie eine Benutzeroberfläche erstellen, die sich je nachdem, wo sich der Benutzer befindet, ändert, möchten Sie wahrscheinlich sicherstellen, dass sich die Website an verschiedenen Orten auf der ganzen Welt ordnungsgemäß verhält.

Um Ihre Geolocation zu überschreiben, öffnen Sie das Sensortool , und wählen Sie in der Liste Standort eine der folgenden Optionen aus:

  • Eine der voreingestellten Städte, wie Tokio.
  • Andere , um benutzerdefinierte Längen- und Breitengradkoordinaten einzugeben.
  • Wählen Sie Standort nicht verfügbar aus, um zu sehen, wie sich Ihre Website verhält, wenn der Standort des Benutzers nicht verfügbar ist.

Auswählen von Tokio aus der Liste

Simulieren der Geräteausrichtung

Mobile Geräte verfügen über Sensoren, die ihre physische Ausrichtung erkennen können. Websites wie webbasierte Spiele oder Kartenanwendungen können die Geräteausrichtung nutzen, um eine bessere Erfahrung zu bieten. Informationen zum Erkennen der Geräteausrichtung finden Sie unter Geräteausrichtungsereignisse bei MDN.

Wenn Sie eine Benutzeroberfläche erstellen, die sich abhängig von der Ausrichtung des Geräts des Benutzers ändert, müssen Sie die Benutzeroberfläche unter unterschiedlichen Geräteausrichtungen testen.

Um verschiedene Geräteausrichtungen zu simulieren, öffnen Sie das Sensortool, und wählen Sie dann in der Liste Ausrichtung eine der folgenden Optionen aus:

  • Eine der voreingestellten Ausrichtungen, z . B. Hochformat auf dem Kopf:

    Auswählen von

  • Benutzerdefinierte Ausrichtung, um Ihre eigene genaue Ausrichtung bereitzustellen.

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

    Nachdem Sie Benutzerdefinierte Ausrichtung ausgewählt haben, können Sie auch eine benutzerdefinierte Ausrichtung festlegen, indem Sie das Ausrichtungsmodell ziehen. Halten Sie die UMSCHALTTASTE gedrückt, bevor Sie ziehen, um sich entlang der Alphaachse zu drehen:

    Das Ausrichtungsmodell

Simulieren von Touchereignissen beim Klicken

So testen Sie Touchereignisse auf Ihrer Website, auch wenn Sie auf einem Gerät ohne Touchscreen testen:

  1. Öffnen Sie eine Webseite, z. B. die Demoseite der TODO-App , in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Drücken Sie ESC ein- oder zweimal, sodass der Bereich Schnellansicht am unteren Rand von DevTools geöffnet ist.

  4. Klicken Sie im Bereich Schnellansicht auf die Schaltfläche Weitere Tools , und wählen Sie dann Sensoren aus.

    Das Tool Sensoren wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

  5. Scrollen Sie im Sensortool nach unten zum Dropdownmenü Toucheingabe , und wählen Sie dann Aktiviert erzwingen aus:

    Erzwingen der Fingereingabe statt klicken

  6. Klicken Sie oben in DevTools auf die Schaltfläche DevTools neu laden .

Emulieren des Zustands der Leerlauferkennung

Mit der Idle Detection-API können Sie inaktive Benutzer erkennen und auf Änderungen des Leerlaufzustands reagieren. Mit DevTools können Sie Änderungen des Leerlaufzustands sowohl für den Benutzerzustand als auch für den Bildschirmzustand emulieren, anstatt darauf zu warten, dass sich der tatsächliche Leerlaufzustand ändert.

So emulieren Sie Leerlaufzustände:

  1. Öffnen Sie eine Webseite, z. B. die Demo zur Erkennung von Leerlauf, in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Drücken Sie esc ein oder zweimal, damit die Schnellansicht unten in DevTools geöffnet wird.

  4. Klicken Sie auf der Symbolleiste Schnellansicht auf die Schaltfläche Weitere Tools , und wählen Sie dann Sensoren aus.

    Das Tool Sensoren wird im Bereich Schnellansicht geöffnet.

  5. Klicken Sie auf der Demoseite auf die Schaltfläche Start detecting idle state (Start detecting idle state ).

    Nur beim ersten Mal wird ein Dialogfeld Zulassen geöffnet.

  6. Klicken Sie auf die Schaltfläche Zulassen .

    Der Demoseite wird die Berechtigung zur Erkennung von Leerlauf gewährt.

  7. Scrollen Sie in DevTools im Sensortool nach unten zur Dropdownliste Zustand der Idle Detector emulieren , und wählen Sie dann eine Option aus:

    • Keine Emulation im Leerlauf
    • Benutzer aktiv, Bildschirm entsperrt
    • Benutzer aktiv, Bildschirm gesperrt
    • Benutzer im Leerlauf, Bildschirm entsperrt
    • Benutzer im Leerlauf, Bildschirm gesperrt

    Auf der Demoseite werden die emulierten Benutzer- und Bildschirmzustände angezeigt:

    Auswählen eines Leerlaufs und gesperrten Zustands auf einer Demoseite

Siehe auch:

Hardwareparallelität emulieren

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

So emulieren Sie Hardwareparallelität:

  1. Öffnen Sie eine Webseite, z. B. die Demoseite der TODO-App , in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Drücken Sie ESC ein- oder zweimal, sodass der Bereich Schnellansicht am unteren Rand von DevTools geöffnet ist.

  4. Klicken Sie im Bereich Schnellansicht auf die Schaltfläche Weitere Tools , und wählen Sie dann Sensoren aus.

    Das Tool Sensoren wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

  5. Scrollen Sie im Sensortool nach unten zum Kontrollkästchen Hardwareparallelität , und wählen Sie es aus.

  6. Geben Sie im Eingabefeld Zahl die Anzahl der Kerne ein, die Sie emulieren möchten:

    Achtung: Eine Überschreitung des Standardwerts kann die Leistung beeinträchtigen.

Um den Standardwert zu rückgängig machen, klicken Sie auf die Schaltfläche Zurücksetzen (Symbol Zurücksetzen).

Emulieren der CPU-Auslastung

Cpu- oder Computeauslastung ist eine Reihe gemeldeter Zustände, die Ihnen eine Vorstellung davon vermitteln, wie viel Workload die Computeleistung des Systems durchläuft und ob sie sich dem Grenzwert nähert. Mithilfe dieser Informationen können Sie Ihre Echtzeitanwendung anpassen, z. B. Videokonferenzen oder Videospiele, um die gesamte verfügbare Verarbeitungsleistung zu nutzen und gleichzeitig die Reaktionsfähigkeit des Systems zu gewährleisten, indem Sie die Workloads in Echtzeit anpassen.

Mit dem Sensortool können Sie die Zustände emulieren, die von der Compute Pressure-API gemeldet werden können.

So emulieren Sie den CPU-Druck auf Ihrer Website:

  1. Öffnen Sie eine Webseite, z. B. die Demoseite der TODO-App , in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Drücken Sie ESC ein- oder zweimal, sodass der Bereich Schnellansicht am unteren Rand von DevTools geöffnet ist.

  4. Klicken Sie im Bereich Schnellansicht auf die Schaltfläche Weitere Tools , und wählen Sie dann Sensoren aus.

    Das Tool Sensoren wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

  5. Scrollen Sie im Sensortool nach unten zum Abschnitt CPU-Druck , und wählen Sie dann einen der für Menschen lesbaren Druckzustände aus:

    • Keine Außerkraftsetzung
    • Nominal
    • Gerecht
    • Ernst
    • Kritisch

  6. Klicken Sie oben in DevTools auf die Schaltfläche DevTools neu laden :

    Emulieren eines

Weitere Informationen

MDN:

Demos:

Emscripten:

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite ist hier zu finden und wird von Kayce Basken und Sofia Emelianova geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.

  • Last updated on