Beim Erstellen einer Website oder Webanwendung haben wir immer die Aufgabe zu überprüfen, ob auf einem mobilen Gerät oder sogar einem 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 mobilen Gerät abrufen müssten.
Aber wir sollten uns keine Sorgen machen, da Google Chrome über eine Funktionalität verfügt, mit der wir mit wenigen einfachen Schritten überprüfen können, wie unsere Website oder Anwendung auf dem von uns gewünschten Mobilgerät funktioniert.
1. Mobilgerät in Google Chrome emulieren
Wie gesagt, Google Chrome enthält ein entwicklerorientiertes Tool, mit dem wir auf ausgeschlossene Optionen auf einen Blick zugreifen können. Einer davon ist der Mobile Device Emulator im Gerätemodus.
Schritt 1
Unten wird ein Menü angezeigt, das uns den HTML-Code der Seite anzeigt. Um das Chrome-Entwicklerpanel anzuzeigen, gehen wir zu "Menü / Weitere Tools / Entwicklertools" oder führen die folgende Tastenkombination aus:
Unter Windows und Linux
Strg + Umschalt + M
Auf dem Mac
+ ⌘ + M
Schritt 2
Wir werden sehen, dass sich ein Code-Panel öffnet. Wir schauen uns das Symbol an, das dem "Gerätemodus" entspricht und das aktiviert wird, wenn es blau erscheint. Klicken Sie darauf, um es zu aktivieren.
Schritt 3
Dort gehen wir zum oberen Menü über der emulierten Seite und wählen das Gerät aus, das wir emulieren möchten. In diesem Fall wählen wir Apple iPhone x und aktualisieren, damit die Änderungen wirksam werden. Wir haben eine Vielzahl von Voreinstellungen konfiguriert, sodass wir mit einem Klick unser simuliertes Modell haben.
Schritt 4
Wenn wir benutzerdefinierte Messungen erstellen möchten, gehen wir dorthin, wo das Terminalmodell angezeigt wird, und klicken auf "Bearbeiten".
Schritt 5
Die Modelle, die zuvor im Konfigurator waren, werden angezeigt oder wir können eines auf personalisierte Weise hinzufügen, indem Sie auf "Benutzerdefiniertes Gerät hinzufügen" klicken.
Schritt 6
In den Optionen im Gerätemodus haben wir die Möglichkeit, die Sensoren, die einen Touchscreen simulieren, zu aktivieren oder nicht.
NotizKlicken Sie auf das Drei-Punkte-Symbol, um unter anderem die Option "Sensoren" anzuzeigen
2. Emulieren Sie die Konnektivität des Mobilfunknetzes in Google Chrome
Der Zustand des Netzwerks und seine Tests dank Chrome ermöglichen es uns, unsere Website über verschiedene Arten von Netzwerkverbindungen wie 3G und sogar ohne Verbindung 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 aufklappbaren Liste einen Netzwerktyp aus.
Schritt 2
Wenn wir ein Limit festgelegt haben, sehen wir einen Warnhinweis, der uns daran erinnert, dass wir es aktiviert haben.
3. Beschränkungen für die Konnektivität des Mobilfunknetzes in Google Chrome hinzufügen
Schritt 1
Dieses Limit ist wichtig und wir können benutzerdefinierte Limits mit von uns konfigurierten Bedingungen festlegen. Dazu drücken wir die folgende Taste, um das Einstellungsfenster zu öffnen.
F1
Schritt 2
Klicken Sie auf die Option "Drosselung". Wir wählen die Möglichkeit "Benutzerdefiniertes Profil hinzufügen".
Schritt 3
Hier werden wir die Grenzwerteinstellungen auf benutzerdefinierte Weise festlegen.
4. Öffnen Sie das Fenster mit den Netzwerkbedingungen in Google Chrome
Wir haben mehr Optionen innerhalb des Entwicklerpanels in den DevTools.
Schritt 1
Dazu gehen wir in das Drei-Punkte-Menü auf der rechten Seite und klicken auf „Weitere Tools“ / „Netzwerkbedingungen“.
Schritt 2
Von hier aus können wir den Cache aktivieren oder deaktivieren und den Standardagenten in einen benutzerdefinierten ändern.
Mit dieser Funktionalität müssen wir nicht mehr nach unserem Handy suchen, um zu testen, ob unsere Website oder Anwendung richtig funktioniert. Es bleibt nur jedem übrig, dieses Tool ein wenig mehr zu erkunden und es zu verwenden, um die Test- und Implementierungszeiten zu verkürzen.
