Netzwerkaktivität überprüfen

Kayce Basques

Dies ist ein praxisorientiertes Tutorial zu einigen der am häufigsten verwendeten Entwicklertools-Funktionen zur Prüfung der Netzwerkaktivität einer Seite.

In der Netzwerkreferenz finden Sie Informationen zu den 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 Sie dort gezielte Vorschläge zur Verbesserung Ihrer Seite erhalten. Siehe Websitegeschwindigkeit optimieren.

Netzwerkbereich öffnen

Öffnen Sie die Demo und probieren Sie die Funktionen auf der Demoseite aus, um dieses Tutorial optimal zu nutzen.

1. Öffnen Sie die Demo „Einstieg“.

   

   Möglicherweise möchten Sie die Demo in ein separates Fenster verschieben.

   

2. Öffnen Sie die Entwicklertools mit der Tastenkombination Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac). 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 DevTools die Netzwerkaktivität nur dann protokolliert, wenn es geöffnet ist. Seit dem Öffnen der Entwicklertools sind keine Netzwerkaktivitäten aufgetreten.

Netzwerkaktivitäten protokollieren

So zeigen Sie die Netzwerkaktivität an, 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: Über das Netzwerk übertragene Ressourcenmenge.
   • Zeit: Dauer der Anfrage.
   Hinweis :Die Grafik über dem Netzwerkprotokoll wird „Übersicht“ genannt. 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 am Ende des Netzwerkprotokolls 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 Netzwerkprotokoll 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. Nicht verwendete Spalten können ausgeblendet werden. 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 :Sie können die vollständige URL einer Ressource sehen, wenn Sie den Mauszeiger auf die entsprechende Zelle in der Spalte Name bewegen.

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 einen Seitenaufbau erlebt.

   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 im Artikel 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 noch einmal.

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 Headers (Überschriften) wird angezeigt. Verwenden Sie diesen Tab, um HTTP-Header zu prüfen.

   

2. Klicken Sie auf den Tab Vorschau, um ein einfaches HTML-Rendering zu sehen.

   

   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 wurde, wird der Inhalt der Datei zur besseren Lesbarkeit neu formatiert, wenn Sie unten auf dem Tab Response (Antwort) auf die Schaltfläche Format data_object klicken.

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 Ressourcenheadern oder Inhalten gefunden werden.

   

3. Klicken Sie auf ein Ergebnis, um es aufzurufen. Wenn die Abfrage in einem Header gefunden wurde, wird der Tab „Headers“ 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 den Filter einzublenden.

Nach String, regulärem Ausdruck oder Property 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 konzentrieren Sie sich auf einen bestimmten Dateityp, z. B. Stylesheets:

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

   

2. Wenn Sie sich auch Skripts ansehen möchten, halten Sie die Strg- oder Befehlstaste (Mac) gedrückt und klicken Sie dann auf JS.

   

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

Weitere Informationen zu Filter-Workflows finden Sie unter Filteranfragen.

Anfragen blockieren

Wie sieht eine Seite aus und wie funktioniert sie, wenn einige ihrer Ressourcen nicht verfügbar sind? Funktioniert es überhaupt nicht mehr oder ist es noch teilweise 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. Der rote 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.