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“.

    Die Demowebsite.

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

    Die Demo in einem Fenster und diese Anleitung in einem anderen Fenster.

  2. Öffnen Sie die Entwicklertools mit der Tastenkombination Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac). Der Bereich Konsole wird geöffnet.

    Der Bereich „Console“ in den Entwicklertools.

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

    Die Entwicklertools sind unten im Fenster angedockt.

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

    Das Steuerfeld „Netzwerk“ der Entwicklertools ist unten im Fenster angedockt.

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.

    Das Netzwerkprotokoll mit fünf Anfragen.

    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.

  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.

    Eine neue Ressource im Netzwerkprotokoll.

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.

    Aktivieren Sie die Spalte „Domain“.

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.

    Das Drop-down-Menü „Drosselung“ im Bereich „Netzwerk“.

  2. Wählen Sie 3G aus.

    Wählen Sie im Bereich „Netzwerk“ die Option „3G“ aus.

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

    Leeren Sie den Cache und laden Sie ihn vollständig neu.

    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.

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 .

  2. Aktivieren Sie das Kästchen Screenshots .

  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.

    Screenshots des Seitenaufbaus im Bereich „Netzwerk“

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

    Die Netzwerkaktivität während des ersten Screenshots.

  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.

    Im Bereich „Netzwerk“ auf dem Tab „Header“.

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

    Über den Tab „Vorschau“ im Steuerfeld „Netzwerk“

    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.

    Im Bereich „Netzwerk“ auf dem Tab „Antwort“.

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

    Über den Tab „Initiator“ im Bereich „Netzwerk“

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

    Im Bereich „Netzwerk“ auf dem Tab „Timing“.

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

    Die Schaltfläche „Schließen“ für den Tab „Details“.

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 . Der Tab Suchen wird links neben dem Netzwerkprotokoll geöffnet.

    Auf dem Tab „Suchen“ links neben dem Netzwerkprotokoll

  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.

    Suchergebnisse für Cache-Control.

  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.

    Ein Suchergebnis, das auf dem Tab „Überschriften“ hervorgehoben ist.

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

    Die Schaltflächen „Schließen“.

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 Filtersymbolleiste.

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

  1. Klicken Sie auf Filter , 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.

    Stringfilterung im Netzwerkprotokoll

  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.

    Ergebnisse des Filters für reguläre Ausdrücke im Netzwerkprotokoll.

  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.

    Negative Filterergebnisse im Netzwerkprotokoll

  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.

    Die Property-Filterung wird im Netzwerkprotokoll berücksichtigt.

    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.

    Netzwerkbereich, in dem nur CSS-Dateien angezeigt werden

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

    Im Netzwerkbereich werden nur CSS- und JS-Dateien angezeigt.

  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.

    Das Befehlsmenü im Bereich „Netzwerk“.

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

    Die Option „Blockierung der Netzwerkanfrage anzeigen“

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

  4. Geben Sie main.css ein.

    main.css im Netzwerkbereich blockieren

  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.

    "main.css" wurde blockiert.

  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.