Dies ist eine praxisorientierte Anleitung zu einigen der am häufigsten verwendeten Entwicklertools-Funktionen zur Prüfung der Netzwerkaktivität einer Seite.
Wenn Sie sich stattdessen die Funktionen ansehen möchten, finden Sie unter Netzwerkreferenz weitere Informationen.
Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an:
Verwendung des Steuerfelds „Netzwerk“
Im Allgemeinen sollten Sie das Steuerfeld „Netzwerk“ verwenden, wenn Sie dafür sorgen müssen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Das sind die häufigsten Anwendungsfälle für das Steuerfeld „Netzwerk“:
- Sicherstellen, dass Ressourcen auch wirklich hoch- oder heruntergeladen werden.
- Die Attribute einer einzelnen Ressource überprüfen, z. B. HTTP-Header, Inhalt, Größe usw.
Wenn Sie die Leistung beim Seitenaufbau verbessern möchten, beginnen Sie nicht mit dem Steuerfeld „Netzwerk“. Es gibt viele Arten von Problemen mit der Ladeleistung, 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. Weitere Informationen finden Sie unter Websitegeschwindigkeit optimieren.
Netzwerkbereich öffnen
Um diese Anleitung optimal zu nutzen, öffnen Sie die Demo und testen Sie die Funktionen auf der Demoseite.
Öffnen Sie den Demomodus für den Einstieg.
Abbildung 1. Die Demo
Möglicherweise möchten Sie die Demo in ein separates Fenster verschieben.
Abbildung 2. Die Demo in einem Fenster und diese Anleitung in einem anderen Fenster
Öffnen Sie die Entwicklertools durch Drücken von Strg + Umschalttaste + J oder Befehlstaste + Option + J (Mac). Die Konsole wird geöffnet.
Abbildung 3. Die Konsole
Sie können die Entwicklertools lieber am unteren Fensterrand andocken.
Abbildung 4. Am unteren Fensterrand fixierte Entwicklertools
Klicken Sie auf den Tab Netzwerk. Das Steuerfeld „Netzwerk“ wird geöffnet.
Abbildung 5. Am unteren Fensterrand fixierte Entwicklertools
Der Bereich „Netzwerk“ ist momentan leer. Das liegt daran, dass die Entwicklertools die Netzwerkaktivität nur protokollieren, während sie geöffnet ist, und seit dem Öffnen der Entwicklertools keine Netzwerkaktivitäten aufgetreten sind.
Netzwerkaktivitäten protokollieren
So zeigen Sie die Netzwerkaktivität an, die eine Seite verursacht:
Lade die Seite neu. Im Bereich „Netzwerk“ werden alle Netzwerkaktivitäten im Netzwerkprotokoll protokolliert.
Abbildung 6. Das Netzwerkprotokoll
Jede Zeile im Netzwerklog stellt eine Ressource dar. Standardmäßig sind die Ressourcen chronologisch aufgelistet. Die oberste Ressource ist normalerweise das HTML-Hauptdokument. Die unterste Ressource ist die Ressource, die zuletzt angefordert wurde.
Jede Spalte enthält Informationen zu einer Ressource. Abbildung 6 zeigt die Standardspalten:
- Status: Der HTTP-Antwortcode.
- Typ: Der Ressourcentyp.
- Initiator: Die Ursache für die Anforderung einer Ressource. Wenn Sie in der Spalte „Initiator“ (Initiator) auf einen Link klicken, gelangen Sie zum Quellcode, der die Anfrage verursacht hat.
- Zeit. Wie lange die Anfrage gedauert hat.
Wasserfall: Grafische Darstellung der verschiedenen Phasen der Anfrage. Bewegen Sie den Mauszeiger auf einen Wasserfall, um eine Aufschlüsselung zu sehen.
Solange die Entwicklertools geöffnet sind, werden die Netzwerkaktivitäten im Netzwerkprotokoll aufgezeichnet. Sehen Sie sich dazu zuerst unten im Netzwerklog die letzte Aktivität an.
Klicken Sie in der Demo auf die Schaltfläche Get Data (Daten abrufen).
Sehen Sie sich noch einmal den unteren Teil des Netzwerkprotokolls an. Es gibt eine neue Ressource mit dem Namen
getstarted.json
. Durch Klicken auf die Schaltfläche Daten abrufen wurde diese Datei von der Seite angefordert.Abbildung 7. Eine neue Ressource im Netzwerkprotokoll
Weitere Informationen
Die Spalten des Netzwerkprotokolls sind konfigurierbar. Nicht benötigte Spalten können ausgeblendet werden. Außerdem sind viele Spalten standardmäßig ausgeblendet, was für Sie nützlich sein könnte.
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.
Abbildung 8. Spalte „Domain“ aktivieren
Langsamere Netzwerkverbindung simulieren
Die Netzwerkverbindung des Computers, den Sie zum Erstellen von Websites verwenden, ist wahrscheinlich schneller als die Netzwerkverbindungen der Mobilgeräte Ihrer Nutzer. Durch das Drosseln der Seite erhalten Sie eine bessere Vorstellung davon, wie lange eine Seite auf einem Mobilgerät zum Laden benötigt.
Klicken Sie auf das Drop-down-Menü Drosselung, das standardmäßig Online ist.
Abbildung 9. Drosselung aktivieren
Wählen Sie Langsames 3G aus.
Abbildung 10. Langsames 3G auswählen
Halten Sie Aktualisieren lange gedrückt und wählen Sie dann Cache leeren und vollständig aktualisieren aus.
Abbildung 11. Cache leeren und vollständig aktualisieren
Bei wiederholten Besuchen stellt der Browser normalerweise einige Dateien aus seinem Cache bereit, wodurch der Seitenaufbau beschleunigt wird. Cache leeren und feste Aktualisierung durchführen zwingt den Browser, alle Ressourcen im Netzwerk zu finden. Das ist hilfreich, wenn Sie wissen möchten, wie eine Seite bei einem Erstbesucher dargestellt wird.
Screenshots erstellen
In den Screenshots kannst du sehen, wie die Seite im Laufe der Zeit aussah, während sie geladen wurde.
- Klicken Sie auf Screenshots aufnehmen .
Aktualisieren Sie die Seite über den Workflow Cache leeren und komplett aktualisieren noch einmal. Weitere Informationen finden Sie unter Langsamere Verbindung simulieren. Der Bereich „Screenshots“ enthält Miniaturansichten, die zeigen, wie die Seite an verschiedenen Stellen während des Ladevorgangs dargestellt wurde.
Abbildung 12. Screenshots des Seitenaufbaus
Klicken Sie auf die erste Miniaturansicht. In den Entwicklertools sehen Sie, welche Netzwerkaktivität zu diesem Zeitpunkt aufgetreten ist.
Abbildung 13. Netzwerkaktivität während des ersten Screenshots
Klicken Sie noch einmal auf Screenshots aufnehmen , um den Bereich „Screenshots“ zu schließen.
Aktualisieren Sie die Seite.
Details einer Ressource prüfen
Klicken Sie auf eine Ressource, um weitere Informationen zu erhalten. Jetzt ausprobieren:
Klicken Sie auf
getstarted.html
. Der Tab Headers wird angezeigt. Auf diesem Tab können Sie HTTP-Header prüfen.Abbildung 14. Tab „Headers“
Klicken Sie auf den Tab Vorschau. Ein einfaches Rendering des HTML-Codes wird angezeigt.
Abbildung 15. Der Tab „Vorschau“
Dieser Tab ist hilfreich, wenn eine API einen Fehlercode in HTML zurückgibt und der gerenderte HTML-Code einfacher zu lesen ist als der HTML-Quellcode oder wenn Bilder geprüft werden.
Klicken Sie auf den Tab Response (Antworten). Der HTML-Quellcode wird angezeigt.
Abbildung 16: Der Tab „Antworten“
Klicken Sie auf den Tab Timing. Eine Aufschlüsselung der Netzwerkaktivität für diese Ressource wird angezeigt.
Abbildung 17: Tab „Timing“
Klicken Sie auf Schließen , um das Netzwerkprotokoll noch einmal aufzurufen.
Abbildung 18: Die Schaltfläche „Schließen“
Header und Antworten im Suchnetzwerk
Verwenden Sie den Bereich Suchen, wenn Sie die HTTP-Header und -Antworten aller Ressourcen nach einem bestimmten String oder regulären Ausdruck durchsuchen müssen.
Angenommen, Sie möchten überprüfen, ob Ihre Ressourcen angemessene Cache-Richtlinien verwenden.
Klicken Sie auf Suchen . Der Suchbereich wird links neben dem Netzwerkprotokoll geöffnet.
Abbildung 19: Im Suchbereich
Geben Sie
Cache-Control
ein und drücken Sie die Eingabetaste. Im Suchfenster werden alle Instanzen vonCache-Control
aufgelistet, die in Ressourcenheadern oder -inhalten gefunden werden.Abbildung 20: Suchergebnisse für „
Cache-Control
“Klicken Sie auf ein Ergebnis, um es sich anzusehen. Wenn die Abfrage in einem Header gefunden wurde, wird der Tab „Headers“ geöffnet. Wenn die Abfrage im Inhalt gefunden wurde, wird der Tab „Response“ (Antwort) geöffnet.
Abbildung 21: Ein auf dem Tab „Headers“ hervorgehobenes Suchergebnis
Schließen Sie das Suchfenster und den Tab „Timing“.
Abbildung 22: Schaltflächen zum Schließen
Ressourcen filtern
DevTools bietet zahlreiche Workflows zum Herausfiltern von Ressourcen, die für die jeweilige Aufgabe nicht relevant sind.
Abbildung 23: Filtersymbolleiste
Die Symbolleiste Filter sollte standardmäßig aktiviert sein. Falls nicht:
- Klicken Sie auf Filter , um ihn einzublenden.
Nach String, regulärem Ausdruck oder Property filtern
Das Textfeld Filter unterstützt viele verschiedene Filtertypen.
Geben Sie
png
in das Textfeld Filter ein. Es werden nur die Dateien angezeigt, die den Text „png
“ enthalten. In diesem Fall sind nur die PNG-Bilder die einzigen Dateien, die dem Filter entsprechen.Abbildung 24: Ein Stringfilter
Geben Sie
/.*\.[cj]s+$/
ein. Die Entwicklertools filtern alle Ressourcen mit einem Dateinamen heraus, der nicht mitj
oderc
enden, gefolgt von 1 oder mehrs
-Zeichen.Abbildung 25: Einen Filter für reguläre Ausdrücke
Geben Sie
-main.css
ein. In den Entwicklertools wirdmain.css
herausgefiltert. Entspricht eine andere Datei dem Muster, wird sie ebenfalls herausgefiltert.Abbildung 26. Ein negativer Filter
Geben Sie
domain:raw.githubusercontent.com
in das Textfeld Filter ein. Die Entwicklertools filtern alle Ressourcen mit einer URL heraus, die nicht mit dieser Domain übereinstimmt.Abbildung 27: Ein Attributfilter
Eine vollständige Liste der filterbaren Eigenschaften finden Sie unter Anfragen nach Properties filtern.
Entfernen Sie den gesamten Text im Textfeld Filter.
Nach Ressourcentyp filtern
So legen Sie den Fokus auf einen bestimmten Dateityp, z. B. Stylesheets:
Klicken Sie auf CSS. Alle anderen Dateitypen werden herausgefiltert.
Abbildung 28: Nur CSS-Dateien werden angezeigt
Wenn Sie sich auch Skripts ansehen möchten, halten Sie die Strg-Taste oder die Befehlstaste (Mac) gedrückt und klicken Sie dann auf JS.
Abbildung 29: Nur CSS- und JS-Dateien werden angezeigt
Klicken Sie auf Alle, um die Filter zu entfernen und wieder alle Ressourcen zu sehen.
Informationen zu anderen 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? Schlägt er vollständig aus oder funktioniert er noch in gewissem Umfang? Blockieren Sie Anfragen, um Folgendes herauszufinden:
Drücken Sie Strg + Umschalt + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlstaste + P zu öffnen.
Abbildung 30: Das Befehlsmenü
Geben Sie
block
ein, wählen Sie Anfrageblockierung anzeigen aus und drücken Sie die Eingabetaste.Abbildung 31: Anfrageblockierung anzeigen
Klicken Sie auf Muster hinzufügen .
Geben Sie
main.css
ein.Abbildung 32:
main.css
wird blockiertKlicken Sie auf Hinzufügen.
Lade die Seite neu. Wie erwartet ist der Stil der Seite etwas durcheinander, da ihr Haupt-Stylesheet blockiert wurde. Beachten Sie die Zeile
main.css
im Netzwerkprotokoll. Der rote Text bedeutet, dass die Ressource blockiert wurde.Abbildung 33:
main.css
wurde blockiertEntfernen Sie das Häkchen aus dem Kästchen Anfrageblockierung aktivieren.
Nächste Schritte
Herzlichen Glückwunsch! Sie haben die Anleitung abgeschlossen. Klicke auf Award ausgeben, um deinen Award zu erhalten.
In der Netzwerkreferenz finden Sie weitere Entwicklertools-Funktionen zur Prüfung der Netzwerkaktivität.