So können Sie mit Google Chrome eine Vorschau Ihrer Website auf verschiedenen Geräten anzeigen

Wenn Sie eine Website erstellen, möchten Sie, dass sie reaktionsschnell ist und sich an verschiedene Bildschirmgrößen anpasst. Eine Möglichkeit, dies zu testen, ist die Verwendung der integrierten Entwicklertools von Google Chrome.

Mit den DevTools von Chrome können Sie verschiedene Aspekte Ihrer Website debuggen. Dies umfasst das Ändern und Anzeigen einer Vorschau des HTML-Quellcodes und des CSS. Es ermöglicht Ihnen auch, clientseitigen JavaScript-Code zu debuggen und den Netzwerkverkehr anzuzeigen.

DevTools bietet auch eine Option zum Anzeigen einer Vorschau Ihrer Website auf verschiedenen Geräten. Dazu gehören verschiedene Arten von Mobilgeräten, iPads, Tablets und mehr.

Um die Gerätesymbolleiste in Google Chrome zu öffnen, müssen Sie die öffnen Chrome-Entwicklertools-Fenster:

1. Öffnen Sie eine Website.
2. Klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf Prüfen.
3. Das Chrome DevTools-Fenster wird geöffnet. Es kann seitlich oder unten in Ihrem Browser oder als neues Fenster geöffnet werden.
instagram viewer
4. Oben links im Fenster befinden sich zwei Symbole. Klicken Sie auf das Symbol, das mehrere Geräte unterschiedlicher Größe anzeigt.
5. Der Bildschirm ändert sich, um Ihnen zu zeigen, wie die Website auf einem mobilen Gerät aussehen würde.

So wechseln Sie zwischen verschiedenen Geräten

Verwenden Sie das Dropdown-Menü oben in der Gerätesymbolleiste, um zwischen verschiedenen Geräten zu wechseln.

1. Ganz oben in der Symbolleiste wird angezeigt, auf welchem ​​Gerätetyp Sie Ihre Website gerade ansehen. Klicken Sie auf das Dropdown-Menü, um ein anderes Gerät aus der Liste auszuwählen.
2. Anstatt ein vorhandenes Gerät auszuwählen, können Sie die Website im Responsive-Modus anzeigen. Klicken Sie auf das Dropdown-Menü und wählen Sie die aus Reaktionsschnell Möglichkeit.
3. Neben dem Dropdown-Menü können Sie auch eine benutzerdefinierte Breite und Höhe eines Geräts eingeben.
4. Anstatt eine Breite und Höhe einzugeben, können Sie auch auf die Ecken des Fensters klicken und ziehen, um die Größe anzupassen.

So fügen Sie ein benutzerdefiniertes Gerät hinzu

Wenn Sie eine benutzerdefinierte Breite und Höhe speichern möchten, können Sie ein benutzerdefiniertes Gerät hinzufügen. Die Gerätesymbolleiste zeigt dann Ihr neues Gerät in der Dropdown-Liste für Geräte an.

1. Klicken Sie auf das Dropdown-Menü, das alle Geräte auflistet.
2. Klicke auf Bearbeiten.
3. Stellen Sie in der Seitenleiste „Einstellungen“ sicher, dass Sie die Geräte Registerkarte ausgewählt. Hier können Sie auch eine Liste mit weiteren Geräten anzeigen, aus denen Sie auswählen können.
4. Klicke auf Benutzerdefiniertes Gerät hinzufügen.
5. Geben Sie einen Namen, eine Breite und eine Höhe für das Gerät ein. Stellen Sie sicher, dass Sie auch den Gerätetyp auswählen, z. B. ob es sich um ein mobiles oder ein Desktop-Gerät handelt. Wenn Sie die erweitern Client-Hinweise für Benutzeragenten Option können Sie weitere Details wie Gerätemodell, Marke oder Version hinzufügen.
6. Klicke auf Hinzufügen.
7. Gehen Sie zurück zum Dropdown-Menü, das alle Geräte auflistet. Sie sehen Ihr neues benutzerdefiniertes Gerät in der Liste.
8. Sie können diese Details später erneut bearbeiten, indem Sie zur Seite für benutzerdefinierte Geräte zurückkehren. Klick auf das bearbeiten Schaltfläche neben dem Namen Ihres Geräts, um mit der Bearbeitung zu beginnen.

Es ist aus mehreren Gründen sehr nützlich, eine Vorschau Ihrer Website auf verschiedenen Geräten und Bildschirmgrößen anzeigen zu können.

Erstens können Sie die Leistung Ihrer Website auf verschiedenen Geräten testen. Einige Mobiltelefone haben möglicherweise schnellere Netzwerkgeschwindigkeiten oder CPU-Drosselung als andere.

Über die Gerätesymbolleiste können Sie zwischen verschiedenen Netzwerkgeschwindigkeitsoptionen umschalten. Auf diese Weise können Sie die Geschwindigkeit aller Aufrufe eines Servers testen oder das Laden und Rendern von Daten auf Ihrer Website testen.

Darüber hinaus können Sie auch anzeigen, wie das Design auf einem bestimmten Gerät aus Sicht der Benutzeroberfläche aussieht. Wenn Sie verwenden CSS-Medienabfragen, können Sie dieses Tool verwenden, um zu überprüfen, ob sie wie erwartet funktionieren.

Sie können das DevTools-Fenster von Google Chrome verwenden, um zu testen, wie sich Ihre Website an verschiedene Bildschirmgrößen anpasst, und um sicherzustellen, dass Ihre Website reaktionsschnell ist. Sie können es auch verwenden, um die Leistung Ihrer Website zu testen und ob Ihre Medienabfragen wie erwartet funktionieren.

Sie können die DevTools von Google Chrome auch für andere Zwecke verwenden. Sie können es zum Debuggen von CSS-Problemen verwenden, indem Sie das CSS auf der Registerkarte „Stile“ des Elementfensters ändern. Auf diese Weise können Sie alle CSS-Änderungen sofort anzeigen, was Ihren Codierungs-Workflow beschleunigen kann.

So verwenden Sie Google Chrome zum Debuggen von CSS

Lesen Sie weiter