Überprüfen der Netzwerkaktivität

Verwenden Sie das Netzwerktool , um sicherzustellen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Überprüfen Sie die Eigenschaften einer einzelnen Ressource, z. B. die HTTP-Header, den Inhalt oder die Größe.

Dies ist eine schrittweise Exemplarische Vorgehensweise des Netzwerktools zum Überprüfen der Netzwerkaktivität für eine Seite.

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

Verwendung des Bereichs "Netzwerk"

Verwenden Sie im Allgemeinen den Bereich "Netzwerk", wenn Sie sicherstellen müssen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Die häufigsten Anwendungsfälle für den Bereich "Netzwerk " sind:

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

• Überprüfen der Eigenschaften einer einzelnen Ressource, z. B. der HTTP-Header, des Inhalts, der Größe usw.

Wenn Sie nach Möglichkeiten suchen, die Leistung beim Laden von Seiten zu verbessern, beginnen Sie nicht mit dem Netzwerktool . Es gibt viele Arten von Auslastungsleistungsproblemen, die nicht mit Netzwerkaktivitäten zusammenhängen. Beginnen Sie mit dem Lighthouse-Tool , da es Ihnen gezielte Vorschläge gibt, wie Sie Ihre Seite verbessern können. See Optimize website speed using Lighthouse.

Öffnen des Bereichs "Netzwerk"

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

1. Öffnen Sie die Demo "Netzwerkaktivität prüfen " auf einer neuen Registerkarte oder 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 Ctrl++Shift``J (Windows/Linux) oder Command+Option+J (macOS). DevTools wird geöffnet.

3. Wählen Sie in DevTools auf der Hauptsymbolleiste die Registerkarte "Konsole" aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche "Weitere Registerkarten" (

   

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

   

4. Öffnen Sie das Netzwerktool :

   

Das Netzwerktool ist zunächst leer. DevTools protokolliert netzwerkaktivitäten nur, nachdem Sie sie geöffnet haben, und seit dem Öffnen von DevTools ist keine Netzwerkaktivität aufgetreten.

Protokollieren von Netzwerkaktivitäten

So zeigen Sie die Von einer Seite verursachte Netzwerkaktivität an:

1. Aktualisieren Sie die Webseite. Der Bereich "Netzwerk " 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 Html-Hauptdokument. Die unterste Ressource entspricht der zuletzt angeforderten Ressource.

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

   • Status. Der HTTP-Statuscode für die Antwort.

   • Typ. Der Ressourcentyp.

   • Initiator. Die Ursache der Ressourcenanforderung. Wenn Sie auf einen Link in der Spalte "Initiator " klicken, gelangen Sie zum 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.

   Hinweis

   Das Diagramm über dem Netzwerkprotokoll wird als Übersicht bezeichnet. Sie werden das Übersichtsdiagramm in diesem Lernprogramm nicht verwenden, daher können Sie es ausblenden. Siehe "Übersicht ausblenden".

   Nachdem Sie DevTools geöffnet haben, werden Netzwerkaktivitäten im Netzwerkprotokoll aufgezeichnet.

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 Rand des Netzwerkprotokolls erneut an. Eine neue Ressource mit dem Namen getstarted.json wird angezeigt:

   

Weitere Informationen anzeigen

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, die Sie möglicherweise hilfreich finden.

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 nun angezeigt:

   

2. Wenn Sie die vollständige URL einer Ressource anzeigen möchten, zeigen Sie mit der Maus auf die Zelle in der Spalte "Name" .

Simulieren einer langsameren Netzwerkverbindung

Die Netzwerkverbindung des Computers, den Sie zum Erstellen von Websites 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 eine Seite benötigt, um auf einem mobilen Gerät zu laden.

1. Wählen Sie die Dropdownliste " Drosselung " aus, die standardmäßig auf "Keine Drosselung " festgelegt ist.

2. Wählen Sie "Langsam 3G" aus:

   

3. Long-press Reload () (oder klicken Sie mit der rechten Maustaste auf "Aktualisieren"), und wählen Sie dann "Cache leeren" und "Endgültige Aktualisierung" aus:

   

Bei wiederholten Besuchen liefert der Browser in der Regel einige Dateien aus dem Cache, wodurch das Laden der Seite beschleunigt wird. Leerer Cache und harte Aktualisierung zwingt den Browser, für alle Ressourcen ins Netzwerk zu wechseln. Verwenden Sie es, um anzuzeigen, wie ein erstmaliger Besucher eine Seitenlast erlebt.

Der Leere Cache und der Feste Aktualisierungsworkflow sind nur verfügbar, wenn DevTools geöffnet ist.

Siehe auch Emulieren langsamer Netzwerkverbindungen in der Referenz zu Netzwerkfeatures.

Screenshots erfassen

Screenshots zeigen, wie eine Webseite im Laufe der Zeit aussieht, 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 Leeren Caches und des Workflows für die feste Aktualisierung . Informationen dazu finden Sie weiter oben unter "Simulieren einer langsameren Verbindung ".

   Der Bereich "Screenshots " enthält Miniaturansichten dazu, wie die Seite während des Ladevorgangs an verschiedenen Punkten ausgesehen 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 "Kopfzeilen " wird angezeigt. Verwenden Sie diesen Bereich, um HTTP-Header zu überprüfen:

   

2. Wählen Sie das Vorschaufenster 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 finden Sie es einfacher, den gerenderten HTML-Code als den HTML-Quellcode zu lesen, oder wenn Sie Bilder untersuchen.

3. Wählen Sie den Antwortbereich 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 besseren Lesbarkeit neu zu formatieren.

4. Wählen Sie den Anzeigebereich aus. Es wird eine Aufschlüsselung der Netzwerkaktivität für die Ressource angezeigt:

   

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

   

Durchsuchen von Netzwerkkopfzeilen und -antworten

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

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

1. Wählen Sie "Suchen " () aus. Der Suchbereich wird links neben dem Netzwerkprotokoll geöffnet:

   

2. Geben Sie ein no-cache , und drücken Sie Enter. Der Suchbereich listet alle Instanzen auf, die no-cache er in Ressourcenkopfzeilen oder -inhalten findet:

   

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 zu ihr zu gelangen. Wenn die Abfrage beispielsweise in einer Kopfzeile gefunden wurde, wird der Bereich "Kopfzeilen " geöffnet. Wenn die Abfrage im Inhalt gefunden wurde, wird der Antwortbereich geöffnet:

   

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

Ressourcen filtern

DevTools bietet zahlreiche Workflows zum Filtern von Ressourcen, die für die betreffende Aufgabe nicht relevant sind:

Die Filtersymbolleiste sollte standardmäßig aktiviert sein. Wenn die Filtersymbolleiste nicht aktiviert ist, klicken Sie auf "Filtern " ( 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. Nur die Dateien, die den Text png enthalten, werden angezeigt. In diesem Fall sind die einzigen Dateien, die dem Filter entsprechen, die PNG-Bilder:

   

2. Geben Sie /.*\.[cj]s+$/ ein. DevTools filtert jede Ressource mit einem Dateinamen heraus, der nicht mit einem oder mehreren j c Zeichen gefolgt von 1 oder mehr s Zeichen endet:

   

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

   

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

   

   Die vollständige Liste der filterbaren Eigenschaften finden Sie unter Filteranforderungen nach Eigenschaften.

5. Löschen Sie das Textfeld "Filtern " eines beliebigen Texts.

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 Ctrl Sie (Windows, Linux) oder Command (macOS) gedrückt, und klicken Sie dann auf JS.

   

3. Wenn Sie die Filter entfernen und alle Ressourcen erneut anzeigen möchten, wählen Sie "Alle" aus.

Weitere Filterworkflows finden Sie unter Filteranforderungen.

Blockieren von Anforderungen

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

1. Drücken Sie Ctrl``P``Shift++(Windows, Linux) oder Command``Shift++P (macOS), um das Befehlsmenü zu öffnen.

2. Geben Sie blockein, wählen Sie "Anforderungsblockierung anzeigen" aus, und drücken Sie Enterdann :

   

3. Klicken Sie auf "Muster hinzufügen " ( hinzufügen).

4. Typ main.css:

   

5. Klicken Sie auf Hinzufügen.

6. Aktualisieren Sie die Seite. Wie erwartet, ist das Format der Seite etwas fehlerhaft, da das Hauptstylesheet blockiert wurde.

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

   

7. Deaktivieren Sie das Kontrollkästchen "Anforderungsblockierung aktivieren ".

Fazit

Herzlichen Glückwunsch, Sie haben das Lernprogramm 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 in der 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 Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.