• Thema

  • Technologie

Google Chrome DevTools – Netzwerk

Banner Post zum Thema Netzwerk-Tab in den Chrome DevTools.
Dieser Beitrag ist Teil der Serie Chrome DevTools
Beitrag speichern

Noch kein Konto? Registrieren

Heute beschäftigen wir uns mit dem Netzwerk-Tab in Google Chrome (So öffnest du die DevTools in Google Chrome). Dort finden wir ausführliche Angaben zu allen Daten, die für den Aufbau einer aufgerufenen Website heruntergeladen wurden.

Eine Website ist nämlich nicht einfach eine einzelne Datei, die im Browser geöffnet wird. Sie besteht aus HTML-, CSS- und meist auch JavaScript-Dateien. Außerdem enthält sie oft Medien- (Bilder, Videos, Audios usw.) und Schriftdateien. Der Browser lädt alle benötigten Dateien herunter und baut dann daraus die Seite auf.

Wenn du in Google Chrome die DevTools öffnest und auf den Netzwerk-Tab klickst, siehst du zunächst nichts. Die Netzwerkaktivitäten werden erst aufgezeichnet, wenn du mit geöffnetem Netzwerk-Tab die Seite neu lädst.

Screenshot vom Netzwerk-Tab der DevTools mit leerem Übertragungsprotokoll

Lädst du die Seite also erneut neu, erscheint im unteren Bereich ein Protokoll mit allen geladenen Dateien:

Screenshot vom Übertragungsprotokoll im Netzwerk-Tab

Je komplexer die Seite, desto länger ist die Liste. In der Grundeinstellung werden die Einträge nach Ladereihenfolge angezeigt. An erster Stelle steht die Index-Datei (im Bild „morntag.com“). Sie gibt dem Browser Anweisungen, welche weiteren Dateien er von wo laden soll.

Zu den einzelnen Dateien siehst du neben dem Namen auch Angaben zum Status-Code (alles, was mit 2** anfängt, ist in Ordnung), zum Dokumententyp, zur Quelle der Ladeanweisung, zur Größe der Datei und zur Ladezeit. Rechts siehst du den Wasserfall, der darstellt, wann im Ladeprozess die Datei geladen wurde und wie lange die Ladezeit im Verhältnis zu den anderen Dateien war.

Klickst du auf einen Protokolleintrag, öffnet sich links ein Zusatzfenster, in dem du weitere Informationen zum Dokument erhältst.

Screenshot der Detailansicht einer einzelner Datei aus dem Übertragungsprotokoll.

Wozu ich den Netzwerk-Tab nutze

Du fragst dich vielleicht: „Naja, schön und gut, aber was bringt es mir, zu sehen, wann was geladen wird?“ Hier sind ein paar Beispiele, wo ich persönlich das Netzwerk-Tooling nutze:

Hinweise zur Grösse und Ladezeit

Im Bereich unter dem Ladeprotokoll befinden sich einige nützliche Ladeparameter zur Website. Beispielsweise, wie groß alle geladenen Dateien zusammen sind. Oder auch, wie lange es gedauert hat, bis die Seite vollständig geladen wurde. Das kann für einen „Vorher/Nachher“-Vergleich nützlich sein, wenn man Maßnahmen zur Verbesserung der Performance ergreifen möchte.

Etwas funktioniert nicht, wie es sollte

Wenn auf der Seite Medien nicht geladen werden, Buttons nicht funktionieren oder sonst etwas nicht so ist, wie es sollte, hilft oft neben der Konsole ein Blick in den Netzwerk-Tab. Lädt man die Seite mit geöffnetem Netzwerk-Tab, kann man danach durch das Protokoll scrollen und nach Fehlern suchen. Diese sind meist rot markiert und haben einen Status 4** oder 5**. Wird also beispielsweise ein Bild nicht geladen, kann man nach der Datei im Protokoll suchen und dann darauf klicken. Im Header-Tab sieht man zum Beispiel die Meldung „Statuscode: 404 Not Found“. Das kann ein Hinweis darauf sein, dass beispielsweise die Bilddatei nicht korrekt verlinkt wurde.

Mobiles Datennetz simulieren

Im oberen Bereich gibt es die Möglichkeit, das Netzwerk zu drosseln und so beispielsweise die Ladezeit der Website mit 3G zu simulieren. Gerade wenn man weiß, dass eine Mehrheit der Besucherinnen und Besucher die Seite auf ihrem Mobilgerät besucht, kann es hilfreich sein, den Ladevorgang mit dieser Drosselung zu testen und allfällige Vorkehrungen zu treffen, damit das Nutzererlebnis auch hierfür positiv ist. Oder die Website ist als PWA entwickelt, und man möchte überprüfen, ob die Bereitstellung der Offline-Inhalte funktioniert, ohne gleich das Gerät vom Internet zu trennen.

Screenshot der Drosselungs-Option im Netzwerk-Tab.

Dazu muss man einfach die gewünschte Drosselung auswählen und die Seite neu laden. Wichtig dabei ist, dass „Cache deaktivieren“ ausgewählt ist, damit die Seite nochmal komplett neu in der gewünschten Drosselung lädt.

Fazit

Der Netzwerk-Tab ist ein weiteres hilfreiches Tool für jeden Webdesigner und Programmierer. Gerade für Fehlersuchen oder Optimierungen findet man dort oft wichtige Angaben, die weiterhelfen können.

Dieser Beitrag ist Teil der Serie Chrome DevTools

Über mich

Was denkst du dazu?
yeah!
1
wooow
0
what?
0
meh.
0
hahaha
0
Das könnte dich auch interessieren:
Ad - SiteGround Webhosting - Einfache Site-Verwaltung. Mehr erfahren.
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
1
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.