Gerätesensoren emulieren

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

Das Sensortool

Übersicht

Mit dem Sensortool können Sie Folgendes tun:

Informationen zum Simulieren eines Viewports eines mobilen Geräts und zum Drosseln des Netzwerks und der CPU finden Sie unter Emulieren mobiler Geräte (Geräteemulation).

Öffnen des Sensortool

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

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

    DevTools wird geöffnet.

  3. Drücken Sie ein- bis zweimal die ESC-Taste , damit der Bereich "Schnellansicht " am unteren Rand der DevTools geöffnet wird.

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

    Das Sensortool wird im Schnellansichtsbereich am unteren Rand der DevTools geöffnet.

Öffnen des Sensortools über das Befehlsmenü

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

    • Unter Windows, Linux oder ChromeOS, CTRL+UMSCHALT+P.
    • Unter MacOS BEFEHL+UMSCHALT+P.

    Verwenden des Befehlsmenüs zum Öffnen des Sensortools

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

    Das Sensortool wird in der Schnellansicht am unteren Rand der DevTools geöffnet.

Außerkraftsetzung der Geolocation

Viele Websites nutzen den Standort des Benutzers, um ihren Benutzern eine relevantere Erfahrung zu bieten. Beispielsweise kann eine Wetterwebsite die lokale Vorhersage für das Gebiet eines Benutzers anzeigen, nachdem der Benutzer der Website die Erlaubnis erteilt hat, auf seinen Standort zuzugreifen. Informationen zum Zugreifen auf die Geolocation eines Benutzers von Ihrer Website aus finden Sie unter Geolocation-API bei 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 Welt ordnungsgemäß verhält.

Um Ihre Geolocation außer Kraft zu setzen, ö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 zum Eingeben benutzerdefinierter Längen- und Breitengradkoordinaten.
  • 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 Standortliste

Simulieren der Geräteausrichtung

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

Wenn Sie eine Benutzeroberfläche erstellen, die sich je nach Ausrichtung des Geräts des Benutzers ändert, müssen Sie Ihre Benutzeroberfläche unter verschiedenen 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:

    Auswahl von

  • Benutzerdefinierte Ausrichtung, um Ihre eigene genaue Ausrichtung bereitzustellen.

    Nach der Auswahl der benutzerdefinierten Ausrichtung werden die Felder Alpha, Beta und Gamma aktiviert. Die 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 vor dem Ziehen die Umschalttaste gedrückt, um ihn entlang der Alphaachse zu drehen:

    Das Orientierungsmodell

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 auf einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

    DevTools wird geöffnet.

  3. Drücken Sie ein- bis zweimal die ESC-Taste , damit der Bereich "Schnellansicht " am unteren Rand der DevTools geöffnet wird.

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

    Das Sensortool wird im Schnellansichtsbereich am unteren Rand der DevTools geöffnet.

  5. Scrollen Sie im Sensortool nach unten zum Dropdown-Menü Touch, und wählen Sie dann Force enabled aus:

    Toucheingabe statt Klick erzwingen

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

Emulieren des Leerlauf-Erkennungsstatus

Mit der Leerlauferkennungs-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 Benutzerstatus als auch für den Bildschirmstatus emulieren, anstatt darauf zu warten, dass sich der tatsächliche Leerlaufzustand ändert.

So wird der Ruhezustand emuliert:

  1. Öffnen Sie eine Webseite, z. B. die Demo zur Leerlauferkennung, in einem neuen Fenster oder auf 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 ein- bis zweimal ESC , damit die Schnellansicht am unteren Rand der 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 Sensortool wird im Schnellansichtsfenster geöffnet.

  5. Klicken Sie auf der Demoseite auf die Schaltfläche Leerlaufstatus ermitteln .

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

  6. Klicken Sie auf die Schaltfläche "Zulassen ".

    Der Demoseite wird die Berechtigung zur Leerlauferkennung erteilt.

  7. Scrollen Sie in DevTools im Sensortool nach unten zur Dropdownliste " Leerlauferkennungsstatus emulieren ", und wählen Sie dann eine Option aus:

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

    Auf der Demoseite werden der emulierte Benutzer- und Bildschirmstatus angezeigt:

    Auswählen eines Leerlauf- und gesperrten Zustands auf einer Demoseite

Siehe auch:

Emulieren der Hardwareparallelität

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 wird die Parallelität der Hardware emuliert:

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

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

    DevTools wird geöffnet.

  3. Drücken Sie ein- bis zweimal die ESC-Taste , damit der Bereich "Schnellansicht " am unteren Rand der DevTools geöffnet wird.

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

    Das Sensortool wird im Schnellansichtsbereich am unteren Rand der 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 für Zahlen die Anzahl von Kernen ein, die Sie emulieren möchten:

    Die Option

    Vorsicht: Das Überschreiten des Standardwerts kann die Leistung beeinträchtigen.

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

CPU-Auslastung emulieren

Der CPU- oder Rechendruck ist eine Reihe von gemeldeten Zuständen, die Ihnen eine Vorstellung davon geben, wie viel Workload die Rechenleistung des Systems durchläuft und ob sie sich dem Grenzwert nähert. Mit diesen Informationen können Sie Ihre Echtzeitanwendung, z. B. Videokonferenzen oder Videospiele, anpassen, um die gesamte verfügbare Rechenleistung zu nutzen und gleichzeitig das System reaktionsfähig zu halten, indem Sie die Arbeitslasten in Echtzeit anpassen.

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

So emulieren Sie die CPU-Auslastung auf Ihrer Website:

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

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

    DevTools wird geöffnet.

  3. Drücken Sie ein- bis zweimal die ESC-Taste , damit der Bereich "Schnellansicht " am unteren Rand der DevTools geöffnet wird.

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

    Das Sensortool wird im Schnellansichtsbereich am unteren Rand der 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
    • Ordentlich
    • 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 Originalseite findet sich hier und wurde von Kayce Basques und Sofia Emelianova verfasst.

Creative Commons License Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.

  • Zuletzt aktualisiert um