Emulieren Sie mobile Geräte in Google Chrome

Beim Erstellen einer Website oder Webanwendung haben wir immer die Aufgabe zu überprüfen, ob auf einem mobilen Gerät oder sogar Tablet alles richtig funktioniert . Wenn wir in der Entwicklung arbeiten, haben wir keine Möglichkeit, dies zu überprüfen, da wir unsere Änderungen zuerst an den Server senden und dort auf unserem Mobilgerät abrufen müssen.

Wir sollten uns jedoch keine Sorgen machen, da Google Chrome über eine Funktion verfügt , mit der wir mit wenigen einfachen Schritten überprüfen können, wie unsere Website oder Anwendung auf dem gewünschten Mobilgerät funktioniert.

1. Emulieren Sie ein Mobilgerät in Google Chrome

Wie wir bereits sagten, enthält Google Chrome ein Tool für Entwickler, mit dem wir auf Optionen zugreifen können, die auf einen Blick ausgeschlossen sind. Einer davon ist der Emulator für mobile Geräte im Gerätemodus.

Schritt 1

Unten wird ein Menü angezeigt, in dem der HTML-Code der Seite angezeigt wird. Um das Bedienfeld für Chrome-Entwickler anzuzeigen, gehen Sie zu “Menü / Weitere Tools / Entwicklertools” oder führen die folgende Tastenkombination aus:

Unter Windows und Linux

+ Mayús + M Strg + Umschalt + M

Auf dem Mac

+ + M + + M

1-tools-for-developers.png

Schritt 2

Wir werden sehen, dass sich ein Codefeld öffnet. Wir sehen uns das Symbol an, das dem “Gerätemodus” entspricht und das aktiviert wird, wenn es blau angezeigt wird. Wir klicken darauf, um es zu aktivieren.

2-activate-device-mode.png

Schritt 3

Während wir dort zum obersten Menü auf der emulierten Seite gehen und das zu emulierende Gerät auswählen, wählen wir in diesem Fall Apple iPhone x und aktualisieren, damit die Änderungen wirksam werden. Wir haben eine Vielzahl von Voreinstellungen konfiguriert, so dass wir mit einem Klick unser simuliertes Modell haben.

See also  So fälschen Sie die Position im Edge- und Chrome-Browser

3-simulate-movil-en-pc.png

Schritt 4

Wenn Sie personalisierte Messungen erstellen möchten, gehen Sie zu der Stelle, an der das Terminalmodell angezeigt wird, und klicken Sie auf “Bearbeiten”.

4-emularo-movil-en-chrome.png

Schritt 5

Wir werden die zuvor konfigurierten Modelle sehen oder können sie auf personalisierte Weise hinzufügen, indem Sie auf “Benutzerdefiniertes Gerät hinzufügen” klicken.

5-add-custom-device.png

Schritt 6

In den Optionen im Gerätemodus haben wir die Möglichkeit, die Sensoren zu aktivieren oder nicht, die einen Touchscreen simulieren.

6-touch-enabled.png

Hinweis
Klicken Sie auf das Dreipunkt-Symbol, um unter anderem die Option “Sensoren” anzuzeigen

2. Emulieren Sie die Mobilfunknetzkonnektivität in Google Chrome

Der Status des Netzwerks und das Testen über Chrome ermöglichen es uns, unsere Website über verschiedene Arten von Netzwerkverbindungen wie 3G und sogar offline zu testen.

Schritt 1

Wir können auch das Netzwerk emulieren, in dem wir uns befinden. Dazu gehen wir auf die Registerkarte “Netzwerk” und wählen in der Klappliste einen Netzwerktyp aus.

7-emulate-connectivity-de-red-chrome.png

Schritt 2

Wenn wir ein Limit festgelegt haben, wird ein Warnhinweis angezeigt, der uns daran erinnert, dass wir es aktiviert haben.

8-limit-connection-chrome.png

3. Fügen Sie der Mobilfunknetzkonnektivität in Google Chrome Grenzen hinzu

Schritt 1

Dieses Limit ist wichtig und wir können benutzerdefinierte Limits mit von uns festgelegten Bedingungen festlegen. Dazu drücken wir die folgende Taste, um das Einstellungsfenster zu öffnen.

F1

Schritt 2

Wir klicken auf die Option “Throttling”. Wir wählen die Möglichkeit “Benutzerdefiniertes Profil hinzufügen”.

9-Add-custom-profile.png

Schritt 3

Hier legen wir die Grenzwertkonfiguration auf personalisierte Weise fest.

10-add-profile-network.png

4. Öffnen Sie das Fenster mit den Netzwerkbedingungen in Google Chrome

Wir haben mehr Optionen innerhalb des Entwickler-Panels in den DevTools.

Schritt 1

Gehen Sie dazu in das Dreipunktmenü rechts und klicken Sie auf “Weitere Tools” / “Netzwerkbedingungen”.

See also  Nginx - GeoIP-Modul

11-network-conditions.png

Schritt 2

Von hier aus können wir den Cache aktivieren oder deaktivieren und den standardmäßig verwendeten Agenten in einen benutzerdefinierten ändern.

12-network-conditions-chrome.png

Mit dieser Funktionalität müssen wir unser Handy nicht durchsuchen, um zu beweisen, dass unsere Website oder Anwendung ordnungsgemäß funktioniert. Es bleibt nur jedem einzelnen übrig, dieses Tool ein wenig genauer zu erkunden und es zu verwenden, um die Test- und Implementierungszeiten zu verkürzen.

administrator

Leave a Reply

Your email address will not be published.