Verwenden Gerät Modus zu approximieren wie Ihre Seite auf einem mobilen Gerät aussieht und funktioniert.
Gerätemodus ist der Name für die lose Sammlung von Funktionen in Chrome DevTools thathelp Sie mobile Geräte simulieren., Diese Funktionen umfassen:
- Simulieren eines mobilen Ansichtsfensters
- Drosselung des Netzwerks
- Drosselung der CPU
- Simulieren der Geolokalisierung
- Ausrichtung einstellen
Einschränkungen
Stellen Sie sich den Gerätemodus als Annäherung erster Ordnung vor, wie Ihre Seite auf einem mobilen Gerät aussieht und sich anfühlt. Im Gerätemodus führen Sie Ihren Codeon nicht wirklich auf einem mobilen Gerät aus. Sie simulieren die mobile Benutzererfahrung von Ihrem Laptop oder Desktop aus.
Es gibt einige Aspekte von mobilen Geräten, die DevTools niemals simulieren kann., Zum Beispiel unterscheidet sich die Architektur mobiler CPUs stark von der Architektur von Laptopor-Desktop-CPUs. Im Zweifelsfall ist es am besten, Ihre Seite tatsächlich auf einem mobilen Gerät auszuführen. Verwenden Sie Remote Debugging, um den Code einer Seite von Ihrem Laptop oder Desktop aus anzuzeigen, zu ändern,zu debuggen und zu profilieren, während er tatsächlich auf einem mobilen Gerät ausgeführt wird.
Simulieren Sie ein mobiles Ansichtsfenster
Klicken Sie auf Gerätesymbolleiste umschalten 
um die Benutzeroberfläche zu öffnen, mit der Sie ein mobiles Ansichtsfenster simulieren können.
Standardmäßig wird die Gerätesymbolleiste im Responsive Viewport Modus geöffnet.
Responsive Viewport Mode
Ziehen Sie die Handles, um die Größe des Viewports auf die gewünschten Abmessungen zu ändern. Oder geben Sie bestimmte valuesin den Feldern width und height ein. In Abbildung 2 wird die Breite auf 628 und die Höhe auf662gesetzt.
Medienabfragen anzeigen
Klicken Sie auf Weitere Optionen, um Medienabfrageumbruchspunkte über Ihrem Ansichtsfenster anzuzeigen, und wählen Sie dann Medienabfragen anzeigen.
Klicken Sie auf einen Haltepunkt, um die Breite des Ansichtsfensters so zu ändern, dass der Haltepunkt ausgelöst wird.
Legen Sie den Gerätetyp fest
Verwenden Sie die Gerätetypliste, um ein Mobilgerät oder Desktop-Gerät zu simulieren.
Die folgende Tabelle beschreibt die Unterschiede zwischen den Optionen. Rendering methodrefers, ob Chrome die Seite als mobile oder Desktop-Ansichtsfenster rendert. Cursor-Symbolbezieht sich darauf, welche Art von Cursor Sie sehen, wenn Sie mit der Maus über die Seite fahren., Ereignisse, die ausgelöst werden, beziehen sich darauf, ob die Seite touch oder click Ereignisse auslöst, wenn Sie mit der Seite interagieren.,id=“b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,
Rotate the viewport to landscape orientation
Click Rotate 
to rotate the viewport to landscape orientation.
Note that the Rotate button disappears if your Device Toolbar is narrow.
Siehe auch Ausrichtung einstellen.
Geräterahmen anzeigen
Wenn Sie die Abmessungen eines bestimmten Mobilgeräts wie eines iPhone 6 simulieren, öffnen Sie weitere Optionen und wählen Sie dann Geräterahmen anzeigen, um den physischen Geräterahmen um das Ansichtsfenster anzuzeigen.
Fügen Sie ein benutzerdefiniertes Mobilgerät hinzu
Um ein benutzerdefiniertes Gerät hinzuzufügen:
-
Klicken Sie auf die Geräteliste und wählen Sie Bearbeiten.
Bild 11. Wählen Sie Bearbeiten -
Klicken Sie auf Benutzerdefiniertes Gerät hinzufügen.
-
Geben Sie einen Namen, eine Breite und eine Höhe für das Gerät ein. Thedevice pixel-ratio, Benutzer-agent-Zeichenfolge,und Gerätetyp Felder sind optional. Das Feld Gerätetyp ist die Liste, dieist standardmäßig auf Mobil eingestellt.,
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.
Zoom das Ansichtsfenster
Mit der Zoomliste vergrößern oder verkleinern.
Drosseln Sie das Netzwerk und die CPU
Um das Netzwerk und die CPU zu drosseln, wählen Sie Mid-tier mobile oder Low-End Mobil aus der Drosselklappenliste.
Mid-tier mobile simuliert schnelle 3G und drosselt ihre CPU, so dass es ist 4 timesslower als normal. Low-End-Handy simuliert langsame 3G und drosselt Ihre CPU 6 mal langsamer als normal.Beachten Sie, dass die Drosselung relativ zur normalen Kapazität Ihres Laptops oder Desktops ist.
Beachten Sie, dass die Drosselklappenliste ausgeblendet wird, wenn die Gerätesymbolleiste eng ist.
Drossel die CPU nur
Zu drossel die CPU nur und nicht die netzwerk, gehen zu die Leistung panel, clickCapture Einstellungen 
, und dann select4x verlangsamung oder 6x verlangsamung von die CPU liste.
Nur das Netzwerk drosseln
Um nur das Netzwerk und nicht die CPU zu drosseln, gehen Sie zum Netzwerkfenster und wählen Sie aus der Drosselliste langsames 3G oder langsames 3G aus.,
Oder drücken sie Befehl+Shift+P (Mac) oder Control+Shift+P (Windows, Linux, Chrome OS) zu openthe Befehl Menü, typ 3G, und wählen Aktivieren schnelle 3G drosselung orEnable langsam 3G drosselung.
Sie können die Netzwerkdrosselung auch über das Leistungsfeld festlegen., ClickCapture Settings und thenselect Fast 3G oder Slow 3G aus der Netzwerkliste.
Geolocation überschreiben
Um die Geolocation-überschreibende Benutzeroberfläche zu öffnen, klicken Sie auf Anpassen und Steuern DevTools
und wählen Sie dann Weitere Tools > Sensoren.
Wählen Sie eine der Voreinstellungen aus der Geolocation-Liste aus, oder wählen Sie Custom locationum Ihre eigenen Koordinaten einzugeben, oder wählen Sie Location unavailable, um zu testen, wie sich Ihre Seite verhält, wenn sich die Geolocation in einem Fehlerzustand befindet.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
Wählen Sie eine der Voreinstellungen aus der Orientierungsliste oder wählen Sie Benutzerdefinierte Orientierungum Ihre eigenen Alpha -, Beta-und Gammawerte festzulegen.
Feedback
Weitere Möglichkeiten, Feedback zu hinterlassen, finden Sie in der DevTools-Community.