Überprüfen der Netzwerkaktivität

Verwenden Sie das Netzwerktool , um sicherzustellen, dass die Ressourcen, die Ihre Webseite ausführen muss, wie erwartet heruntergeladen werden und dass die Anforderungen an serverseitige APIs ordnungsgemäß gesendet werden. Überprüfen Sie die Eigenschaften einzelner HTTP-Anforderungen und -Antworten, z. B. die HTTP-Header, den Inhalt oder die Größe.

Dies ist eine schritt-für-Schritt-Tutorial exemplarische Vorgehensweise des Netzwerktools zum Überprüfen der Netzwerkaktivität für eine Seite.

Eine Übersicht über die netzwerkbezogenen DevTools-Features finden Sie unter Referenz zu Netzwerkfeatures.

Video: Verwenden des Netzwerktools

Eine Videoversion dieses Tutorials erfahren Sie im folgenden Video:

Wann sollte das Netzwerktool verwendet werden?

Verwenden Sie im Allgemeinen das Netzwerktool , wenn Sie sicherstellen müssen, dass Ressourcen ordnungsgemäß heruntergeladen werden und Anforderungen an serverseitige APIs erwartungsgemäß gesendet werden. Die häufigsten Anwendungsfälle für das Netzwerktool sind:

• Stellen Sie sicher, dass Ressourcen tatsächlich heruntergeladen werden.

• Überprüfen der Anforderungsparameter und Antworten serverseitiger API-Aufrufe.

Wenn Sie nach Möglichkeiten suchen, die Leistung beim Laden von Seiten zu verbessern, kann das Netzwerktool dabei helfen zu verstehen, wie viele Daten heruntergeladen werden und wie lange das Herunterladen dauert. Es gibt jedoch viele andere Arten von Problemen mit der Ladeleistung, die nicht mit der Netzwerkaktivität zusammenhängen. Um Leistungsprobleme beim Laden von Seiten weiter zu untersuchen, können Sie das Leistungstool, das Problemtool und das Lighthouse-Tool verwenden, da es Ihnen gezielte Vorschläge zur Verbesserung Ihrer Seite bietet. Weitere Informationen finden Sie z. B . unter Optimieren der Websitegeschwindigkeit mit Lighthouse.

Öffnen des Tools "Netzwerk"

Um dieses Tutorial optimal zu nutzen, öffnen Sie die Demo, und testen Sie die Features auf der Demoseite.

1. Öffnen Sie die Demo zur Überprüfung der Netzwerkaktivität auf einer neuen Registerkarte oder in einem neuen Fenster:

   

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Netzwerk aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools ():

   Möglicherweise möchten Sie DevTools am unteren Rand Ihres Fensters andocken:

   

Das Netzwerktool ist zunächst leer. DevTools protokolliert netzwerkaktivität nur nach dem Öffnen, und seit dem Öffnen von DevTools ist keine Netzwerkaktivität aufgetreten.

Grundlegendes zur Benutzeroberfläche des Netzwerktools

Das Netzwerktool ist in drei Standard Teile unterteilt:

• Die obere Symbolleiste enthält Optionen zum Anpassen des Tools und zum Filtern von Netzwerkanforderungen.
• Unterhalb der oberen Symbolleiste bietet das Übersichtsdiagramm eine allgemeine Übersicht über den Netzwerkdatenverkehr im Zeitverlauf und ermöglicht das Filtern von Netzwerkanforderungen.
• Unterhalb des Übersichtsdiagramms zeigt der Abschnitt Netzwerkprotokoll die Netzwerkaktivität an und ermöglicht die Überprüfung einzelner Anforderungen.

Netzwerkaktivität protokollieren

So zeigen Sie die Netzwerkaktivität an, die eine Seite verursacht:

1. Aktualisieren Sie die Webseite. Das Netzwerktool protokolliert alle Netzwerkaktivitäten im Netzwerkprotokoll:

   

   Jede Zeile des Netzwerkprotokolls stellt eine Ressource dar. Standardmäßig werden die Ressourcen chronologisch aufgelistet. Die oberste Ressource ist in der Regel das Standard HTML-Dokument. Die untere Ressource ist die zuletzt angeforderte Ressource.

   Jede Spalte stellt Informationen zu einer Ressource dar. In der vorherigen Abbildung werden die Standardspalten angezeigt.

   • Status. Der HTTP-status Code für die Antwort.

   • Typ. Der Ressourcentyp.

   • Initiator. Die Ursache der Ressourcenanforderung. Durch Klicken auf einen Link in der Spalte Initiator gelangen Sie zu dem Quellcode, der die Anforderung verursacht hat.

   • Zeit. Die Dauer der Anforderung.

   • Wasserfall. Eine grafische Darstellung der verschiedenen Phasen der Anforderung. Um eine Aufschlüsselung anzuzeigen, zeigen Sie auf einen Wasserfall.

   Beachten Sie, dass das Übersichtsdiagramm auch die Netzwerkaktivität anzeigt. Sie verwenden das Übersichtsdiagramm in diesem Tutorial nicht, sodass Sie es ausblenden können. Weitere Informationen finden Sie unter Ausblenden des Übersichtsbereichs.

   Nachdem Sie DevTools geöffnet haben, zeichnet es die Netzwerkaktivität im Netzwerkprotokoll auf.

2. Um dies zu veranschaulichen, sehen Sie sich zuerst den unteren Rand des Netzwerkprotokolls an, und notieren Sie sich die letzte Aktivität.

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

4. Sehen Sie sich den unteren Bereich des Netzwerkprotokolls erneut an. Eine neue Ressource mit dem Namen getstarted.json wird angezeigt:

   

Weitere Informationen anzeigen

Die Spalten des Netzwerkprotokolls können konfiguriert werden. Sie können Spalten ausblenden, die Sie nicht verwenden. Es gibt auch viele Spalten, die standardmäßig ausgeblendet sind, was Sie möglicherweise hilfreich finden können.

1. Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Netzwerkprotokoll, und wählen Sie dann Domäne aus. Die Domäne jeder Ressource wird jetzt angezeigt:

   

2. Um die vollständige URL einer Ressource anzuzeigen, zeigen Sie in der Spalte Name auf ihre Zelle.

Simulieren einer langsameren Netzwerkverbindung

Die Netzwerkverbindung des Computers, den Sie zum Erstellen von Standorten verwenden, ist wahrscheinlich schneller als die Netzwerkverbindungen der mobilen Geräte Ihrer Benutzer. Durch die Drosselung der Seite erhalten Sie eine bessere Vorstellung davon, wie lange das Laden einer Seite auf einem mobilen Gerät dauert.

1. Wählen Sie die Dropdownliste Drosselung auf der oberen Symbolleiste aus. Sie ist standardmäßig auf Keine Drosselung festgelegt.

2. Wählen Sie Slow 3G aus:

   

3. Drücken Sie lange Neu laden () (oder klicken Sie mit der rechten Maustaste auf Aktualisieren), und wählen Sie dann Leerer Cache und harte Aktualisierung aus:

   

Bei wiederholten Besuchen bedient der Browser in der Regel einige Dateien aus dem Cache, wodurch das Laden der Seite beschleunigt wird. Leerer Cache und harte Aktualisierung erzwingen, dass der Browser das Netzwerk für alle Ressourcen wechselt. Verwenden Sie es, um anzuzeigen, wie ein Erstbesucher eine Seite lädt.

Der Workflow Leerer Cache und harte Aktualisierung ist nur verfügbar, wenn DevTools geöffnet ist.

Weitere Informationen finden Sie unter Emulate slow network connections (Emulieren langsamer Netzwerkverbindungen ) in der Referenz zu Netzwerkfeatures.

Screenshots erfassen

Screenshots zeigen, wie eine Webseite im Laufe der Zeit angezeigt wird, während sie geladen wird.

1. Klicken Sie auf die Schaltfläche (), und aktivieren Sie dann das Kontrollkästchen Screenshots erfassen :

   

2. Aktualisieren Sie die Seite erneut mithilfe des Workflows Leerer Cache und harter Aktualisierungsworkflow . Informationen hierzu finden Sie unter Simulieren einer langsameren Verbindung weiter oben.

   Der Bereich Screenshots enthält Miniaturansichten, wie die Seite während des Ladevorgangs an verschiedenen Punkten geschaut hat:

   

3. Klicken Sie auf die erste Miniaturansicht. DevTools zeigt Ihnen, welche Netzwerkaktivität zu diesem Zeitpunkt aufgetreten ist:

   

4. Klicken Sie erneut auf (), und deaktivieren Sie das Kontrollkästchen Screenshots erfassen , um den Bereich Screenshots zu schließen.

5. Aktualisieren Sie die Seite erneut.

Überprüfen der Details der Ressource

Wählen Sie eine Ressource aus, um weitere Informationen dazu zu erhalten.

1. Wählen Sie network-tutorial/ aus. Der Bereich Headers wird angezeigt. Verwenden Sie diesen Bereich, um HTTP-Header zu untersuchen:

   

2. Wählen Sie den Bereich Vorschau aus. Es wird ein einfaches Rendering des HTML-Codes angezeigt:

   

   Das Panel ist hilfreich, wenn eine API einen Fehlercode in HTML zurückgibt. Möglicherweise ist es einfacher, den gerenderten HTML-Code zu lesen als den HTML-Quellcode, oder wenn Sie Bilder untersuchen.

3. Wählen Sie den Bereich Antwort aus. Der HTML-Quellcode wird angezeigt:

   

   Tipp: Wenn eine Datei minimiert wird, wählen Sie unten im Antwortbereich die Schaltfläche Format () aus, um den Inhalt der Datei zur Lesbarkeit neu zu formatieren.

   Wenn die Antwort beispielsweise minimierte JSON-Daten enthält, klicken Sie auf die Schaltfläche Format , um die JSON-Syntax neu zu formatieren, sodass sich jede Objekteigenschaft in einer eigenen Zeile befindet. Sie können den JSON-Viewer auch verwenden, um formatierte und hervorgehobene JSON-Antworten auf einer Browserregisterkarte anzuzeigen. Weitere Informationen finden Sie unter Anzeigen formatierter JSON-Antworten oder -Dateien.

4. Wählen Sie den Bereich Zeitsteuerung aus. Eine Aufschlüsselung der Netzwerkaktivität für die Ressource wird angezeigt:

   

5. Klicken Sie auf Schließen (), um das Netzwerkprotokoll erneut anzuzeigen:

   

Suchen von Netzwerkheadern und -antworten

Verwenden Sie den Suchbereich, wenn Sie die HTTP-Header und -Antworten aller Ressourcen nach einer bestimmten Zeichenfolge oder einem regulären Ausdruck durchsuchen müssen.

Angenommen, Sie möchten überprüfen, ob Ihre Ressourcen angemessene Cacherichtlinien verwenden.

1. Wählen Sie Suchen (. Der Bereich Suchen wird links neben dem Netzwerkprotokoll geöffnet:

   

2. Geben Sie ein no-cache , und drücken Sie die EINGABETASTE. Im Suchbereich werden alle Instanzen von no-cache aufgelistet, die in Ressourcenheadern oder Inhalten gefunden werden:

   

3. Klicken Sie auf ein Ergebnis, um die Ressource anzuzeigen, in der das Ergebnis gefunden wurde. Wenn Sie sich die Details der Ressource ansehen, wählen Sie ein Ergebnis aus, um direkt darauf zu gelangen. Wenn die Abfrage beispielsweise in einem Header gefunden wurde, wird der Bereich Header geöffnet. Wenn die Abfrage im Inhalt gefunden wurde, wird der Bereich Antwort geöffnet:

   

4. Schließen Sie den Suchbereich und den Bereich Kopfzeilen .

Filtern von Ressourcen

DevTools bietet zahlreiche Workflows zum Herausfiltern von Ressourcen, die für die jeweilige Aufgabe nicht relevant sind.

Die Symbolleiste Filter sollte standardmäßig aktiviert sein. Wenn die Symbolleiste Filter nicht aktiviert ist, klicken Sie auf Filter (), um sie anzuzeigen:

Filtern nach Zeichenfolge, regulärem Ausdruck oder Eigenschaft

Das Textfeld Filter unterstützt viele verschiedene Filtertypen.

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

2. Geben Sie /.*\.[cj]s+$/ein, bei dem es sich um einen regulären JavaScript-Ausdruck handelt. DevTools filtert jede Ressource mit einem Dateinamen heraus, der nicht mit einem j oder einem c endet, gefolgt von 1 oder mehr s Zeichen.

3. Geben Sie -main.css ein. DevTools filtert heraus main.css. Wenn eine Datei mit diesem Muster übereinstimmt, wird sie ebenfalls herausgefiltert.

4. Geben Sie larger-than:1000 in das Textfeld Filter ein. DevTools filtert jede Ressource mit Antworten heraus, die kleiner als 1.000 Bytes sind.

   Eine vollständige Liste der filterbaren Eigenschaften finden Sie unter Filtern von Anforderungen nach Eigenschaften.

5. Löschen Sie das Textfeld Filter von beliebigem Text.

Filtern nach Ressourcentyp

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

1. Wählen Sie CSS aus. Alle anderen Dateitypen werden herausgefiltert:

   

2. Um auch Skripts anzuzeigen, halten Sie STRG (Windows, Linux) oder Befehl (macOS) gedrückt, und klicken Sie dann auf JS.

3. Um die Filter zu entfernen und alle Ressourcen erneut anzuzeigen, wählen Sie Alle aus.

Informationen zu anderen Filterworkflows finden Sie unter Filtern von Anforderungen.

Anforderungen blockieren

Wie sieht eine Seite aus und verhält sich, wenn einige der Seitenressourcen nicht verfügbar sind? Schlägt es vollständig fehl, oder ist es noch etwas funktionsfähig? Blockieren von Anforderungen, um Folgendes herauszufinden:

1. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

2. Geben Sie ein block, wählen Sie Blockierung von Netzwerkanforderungen anzeigen aus, und drücken Sie dann die EINGABETASTE:

   

3. Klicken Sie auf Muster hinzufügen (), geben Sie main.cssein, und klicken Sie dann auf Hinzufügen:

   

4. Aktualisieren Sie die Seite. Wie erwartet ist die Formatierung der Seite etwas durcheinander getreten, da das Standard Stylesheets blockiert wurde.

   In der main.css Zeile im Netzwerkprotokoll bedeutet der rote Text, dass die Ressource blockiert wurde:

   

5. Deaktivieren Sie das Kontrollkästchen Netzwerkanforderungsblockierung aktivieren .

Siehe auch:

• Blockieren sie eine Netzwerkanforderung im Tool zum Blockieren von Netzwerkanforderungen.

Fazit

Herzlichen Glückwunsch, Sie haben das Tutorial abgeschlossen! Sie wissen jetzt, wie Sie das Netzwerktool in Microsoft Edge DevTools verwenden.

Weitere DevTools-Features im Zusammenhang mit der Überprüfung von Netzwerkaktivitäten finden Sie unter Referenz zu Netzwerkfeatures.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.