Netzwerkaktivität überprüfen

Kayce Basques

In dieser praktischen Anleitung werden einige der am häufigsten verwendeten DevTools-Funktionen zur Prüfung der Netzwerkaktivität einer Seite vorgestellt.

In der Netzwerkreferenz finden Sie Informationen zu den einzelnen Funktionen.

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an:

Wann sollte ich den Bereich „Netzwerk“ verwenden?

Im Allgemeinen verwenden Sie den Bereich Netzwerk, wenn Sie prüfen möchten, ob Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Die häufigsten Anwendungsfälle für den Bereich Netzwerk sind:

• Prüfen, ob Ressourcen überhaupt hochgeladen oder heruntergeladen werden
• Prüfung der Eigenschaften einer einzelnen Ressource, z. B. ihrer HTTP-Header, ihres Inhalts und ihrer Größe.

Wenn Sie nach Möglichkeiten suchen, die Seitenladeleistung zu verbessern, beginnen Sie nicht mit dem Bereich Netzwerk. Es gibt viele Arten von Leistungsproblemen beim Laden, die nicht mit der Netzwerkaktivität zusammenhängen. Beginnen Sie mit dem Lighthouse-Steuerfeld, da es Ihnen gezielte Vorschläge zur Verbesserung Ihrer Seite liefert. Weitere Informationen finden Sie unter Websitegeschwindigkeit optimieren.

Netzwerkbereich öffnen

Damit Sie diese Anleitung optimal nutzen können, sollten Sie die Demo öffnen und die Funktionen auf der Demoseite ausprobieren.

1. Öffnen Sie die Demo „Einstieg“.

   

   Sie können die Demo auch in ein separates Fenster verschieben.

   

2. Öffnen Sie die Entwicklertools, indem Sie Strg + Umschalttaste + J oder Befehlstaste + Optionstaste + J (Mac) drücken. Der Bereich Konsole wird geöffnet.

   

   Sie können die Entwicklertools auch unten im Fenster andocken.

   

3. Klicken Sie auf den Tab Netzwerk. Der Bereich Netzwerk wird geöffnet.

   

Derzeit ist der Bereich Netzwerk leer. Das liegt daran, dass in den Entwicklertools nur Netzwerkaktivitäten protokolliert werden, während sie geöffnet sind. Seit der Öffnung der Entwicklertools gab es keine Netzwerkaktivitäten.

Netzwerkaktivitäten protokollieren

So rufen Sie die Netzwerkaktivität auf, die eine Seite verursacht:

1. Lade die Seite neu. Im Bereich Netzwerk werden alle Netzwerkaktivitäten im Netzwerkprotokoll protokolliert.

   

   Jede Zeile im Netzwerkprotokoll steht für eine Ressource. Standardmäßig werden die Ressourcen chronologisch aufgelistet. Die oberste Ressource ist in der Regel das Haupt-HTML-Dokument. Die unterste Ressource ist diejenige, die zuletzt angefordert wurde.

   Jede Spalte enthält Informationen zu einer Ressource. Die Standardspalten sind:

   • Status: Der HTTP-Antwortcode.
   • Typ: Der Ressourcentyp.
   • Initiator: Was hat dazu geführt, dass eine Ressource angefordert wurde? Wenn Sie auf einen Link in der Spalte „Initiator“ klicken, gelangen Sie zum Quellcode, der die Anfrage verursacht hat.
   • Größe: Menge der über das Netzwerk übertragenen Ressourcen.
   • Zeit: Dauer der Anfrage.
   Hinweis: Das Diagramm über dem Netzwerkprotokoll wird als Übersicht bezeichnet. Sie wird in dieser Anleitung nicht verwendet. Sie können sie daher bei Bedarf ausblenden. Weitere Informationen finden Sie unter Übersichts-Track ausblenden.

2. Solange die DevTools geöffnet sind, werden Netzwerkaktivitäten im Netzwerkprotokoll aufgezeichnet. Sehen Sie sich dazu zuerst unten im Netzwerkprotokoll die letzte Aktivität an.

3. Klicken Sie jetzt in der Demo auf die Schaltfläche Daten abrufen.

4. Sehen Sie sich noch einmal das Ende des Netzwerkprotokolls an. Es gibt eine neue Ressource namens getstarted.json. Durch Klicken auf die Schaltfläche Daten abrufen wurde diese Datei von der Seite angefordert.

   

Weitere Informationen

Die Spalten des Netzwerkprotokolls sind konfigurierbar. Sie können Spalten ausblenden, die Sie nicht verwenden. Es gibt auch viele Spalten, die standardmäßig ausgeblendet sind und die für Sie nützlich sein könnten.

1. Klicken Sie mit der rechten Maustaste auf die Überschrift der Tabelle Netzwerkprotokoll und wählen Sie Domain aus. Die Domain jeder Ressource wird jetzt angezeigt.

   

Tipp :Wenn Sie den Mauszeiger auf die Zelle in der Spalte Name bewegen, wird die vollständige URL der Ressource angezeigt.

Langsamere Netzwerkverbindung simulieren

Die Netzwerkverbindung des Computers, mit dem Sie Websites erstellen, ist wahrscheinlich schneller als die Netzwerkverbindungen der Mobilgeräte Ihrer Nutzer. Wenn Sie die Seite drosseln, können Sie sich ein besseres Bild davon machen, wie lange das Laden einer Seite auf einem Mobilgerät dauert.

1. Klicken Sie auf das Drop-down-Menü Drosselung. Standardmäßig ist Keine Drosselung ausgewählt.

   

2. Wählen Sie 3G aus.

   

3. Halten Sie Aktualisieren Aktualisieren gedrückt und wählen Sie dann Cache leeren und vollständig aktualisieren aus.

   

   Bei wiederholten Besuchen ruft der Browser normalerweise einige Dateien aus seinem Cache ab, was das Laden der Seite beschleunigt. Bei Cache leeren und vollständig aktualisieren wird der Browser gezwungen, alle Ressourcen aus dem Netzwerk abzurufen. Das ist hilfreich, wenn Sie sehen möchten, wie ein Erstbesucher eine Seite sieht.

   Hinweis: Der Workflow Cache leeren und hart neu laden ist nur verfügbar, wenn die Entwicklertools geöffnet sind.

Screenshots aufnehmen

Screenshots zeigen, wie Ihre Seite zu verschiedenen Zeitpunkten während des Ladevorgangs aussieht, und geben an, welche Ressourcen in jedem Intervall geladen werden.

So erstellen Sie Screenshots:

1. Klicken Sie auf Einstellungen für Werbenetzwerke Einstellungen.

2. Aktivieren Sie das Kästchen Screenshots check_box.

3. Lade die Seite mit dem Workflow Cache leeren und vollständig aktualisieren noch einmal. Eine Anleitung dazu finden Sie unter Eine langsamere Verbindung simulieren. Auf dem Tab Screenshots sehen Sie Thumbnails, die zeigen, wie die Seite zu verschiedenen Zeitpunkten während des Ladevorgangs aussah.

   

4. Klicke auf das erste Thumbnail. In den DevTools sehen Sie, welche Netzwerkaktivitäten zu diesem Zeitpunkt stattgefunden haben.

   

5. Entfernen Sie das Häkchen bei Screenshots, um den Tab zu schließen.

6. Aktualisieren Sie die Seite.

Details einer Ressource prüfen

Klicken Sie auf eine Ressource, um weitere Informationen zu erhalten. Jetzt ausprobieren:

1. Klicken Sie auf getstarted.html. Der Tab Header wird angezeigt. Auf diesem Tab können Sie HTTP-Header prüfen.

   

2. Klicken Sie auf den Tab Vorschau, um sich ein einfaches HTML-Rendering anzusehen.

   

   Dieser Tab ist hilfreich, wenn eine API einen Fehlercode in HTML zurückgibt und der gerenderte HTML-Code leichter zu lesen ist als der HTML-Quellcode, oder wenn Sie Bilder prüfen.

3. Klicken Sie auf den Tab Antwort, um den HTML-Quellcode aufzurufen.

   

   Tipp :Wenn eine Datei minimiert ist, können Sie unten auf dem Tab Antwort auf die Schaltfläche Format data_object klicken, um den Inhalt der Datei für die Lesbarkeit neu zu formatieren.

4. Klicken Sie auf den Tab Initiator, um einen Baum aufzurufen, der die Initiatorenkette der Anfrage abbildet.

   

5. Klicken Sie auf den Tab Timing, um eine Aufschlüsselung der Netzwerkaktivitäten für diese Ressource aufzurufen.

   

6. Klicken Sie auf Schließen schließen, um das Netzwerkprotokoll wieder aufzurufen.

   

Netzwerkheader und ‑antworten suchen

Verwenden Sie den Tab Suchen, wenn Sie in den HTTP-Headern und ‑Antworten aller Ressourcen nach einem bestimmten String oder regulären Ausdruck suchen möchten.

Angenommen, Sie möchten prüfen, ob für Ihre Ressourcen angemessene Cache-Richtlinien verwendet werden.

1. Klicke auf Suchen Suchen. Der Tab Suchen wird links neben dem Netzwerkprotokoll geöffnet.

   

2. Geben Sie Cache-Control ein und drücken Sie die Eingabetaste. Auf dem Tab Suchen werden alle Instanzen von Cache-Control aufgelistet, die in Ressourcenüberschriften oder -inhalten gefunden werden.

   

3. Klicken Sie auf ein Ergebnis, um es aufzurufen. Wenn die Suchanfrage in einem Header gefunden wurde, wird der Tab „Header“ geöffnet. Wenn die Suchanfrage in Inhalten gefunden wurde, wird der Tab Antwort geöffnet.

   

4. Schließen Sie die Tabs Suchen und Überschriften.

   

Ressourcen filtern

In DevTools gibt es zahlreiche Workflows, mit denen Ressourcen herausgefiltert werden können, die für die jeweilige Aufgabe nicht relevant sind.

Die Symbolleiste Filter sollte standardmäßig aktiviert sein. Falls nicht:

1. Klicken Sie auf Filter filter_alt, um ihn einzublenden.

Nach String, regulärem Ausdruck oder Attribut filtern

Das Eingabefeld Filter unterstützt viele verschiedene Arten von Filtern.

1. Geben Sie png in das Eingabefeld Filter ein. Es werden nur die Dateien angezeigt, die den Text png enthalten. In diesem Fall entsprechen nur die PNG-Bilder dem Filter.

   

2. Geben Sie /.*\.[cj]s+$/ ein. In DevTools werden alle Ressourcen mit einem Dateinamen herausgefiltert, der nicht auf j oder c gefolgt von mindestens einem s-Zeichen endet.

   

3. Geben Sie -main.css ein. main.css wird in den Entwicklertools herausgefiltert. Wenn eine andere Datei mit dem Muster übereinstimmt, wird sie ebenfalls herausgefiltert.

   

4. Geben Sie domain:raw.githubusercontent.com in das Textfeld Filter ein. In den DevTools werden alle Ressourcen mit einer URL herausgefiltert, die nicht mit dieser Domain übereinstimmt.

   

   Eine vollständige Liste der filterbaren Properties finden Sie unter Anfragen nach Properties filtern.

5. Löschen Sie den Text aus dem Eingabefeld Filter.

Nach Ressourcentyp filtern

So können Sie sich auf einen bestimmten Dateityp konzentrieren, z. B. auf Stylesheets:

1. Klicken Sie auf CSS. Alle anderen Dateitypen werden herausgefiltert.

   

2. Wenn Sie auch Scripts sehen möchten, halten Sie die Strg-Taste (Windows) oder die Befehlstaste (Mac) gedrückt und klicken Sie dann auf JS.

   

3. Klicken Sie auf Alle, um die Filter zu entfernen und alle Ressourcen wieder zu sehen.

Weitere Filterworkflows finden Sie unter Anfragen filtern.

Anfragen blockieren

Wie sieht eine Seite aus und wie verhält sie sich, wenn einige ihrer Ressourcen nicht verfügbar sind? Funktioniert es überhaupt nicht mehr oder ist es noch etwas funktionsfähig? Anfragen blockieren, um Folgendes herauszufinden:

1. Drücken Sie Strg + Umschalt + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.

   

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

   

3. Klicken Sie auf die Schaltfläche Muster hinzufügen.

4. Geben Sie main.css ein.

   

5. Klicken Sie auf Hinzufügen.

6. Lade die Seite neu. Wie erwartet, ist das Styling der Seite etwas durcheinander, weil das Haupt-Stylesheet blockiert wurde. Beachten Sie die Zeile main.css im Netzwerkprotokoll. Roter Text bedeutet, dass die Ressource blockiert ist.

   

7. Entfernen Sie das Häkchen aus dem Kästchen Anfrageblockierung aktivieren.

Weitere DevTools-Funktionen zur Prüfung der Netzwerkaktivität finden Sie in der Netzwerkreferenz.