Einzelne Netzwerkanfragen drosseln

Ewa Gasperowicz
Philip Pfaffe

Auf dem Tab „Anfragebedingungen“ können Sie bestimmte URLs blockieren oder benutzerdefinierte Profile für die Netzwerkdrosselung auf einzelne Ressourcen anwenden.

Übersicht

Bisher konnten Sie in den Chrome-Entwicklertools die Netzwerkbedingungen global für die gesamte Sitzung drosseln (alle Anfragen waren betroffen) oder bestimmte Anfragen vollständig blockieren. Bisher war es jedoch schwierig, zu testen, wie Ihre Anwendung mit bestimmten langsamen Ressourcen umgeht, z. B. mit einer Drittanbieter-API, die mit Latenz zu kämpfen hat, oder mit einem großen Hero-Bild, das über eine langsame Verbindung geladen wird, ohne die gesamte Seite zu verlangsamen.

Ab Chrome 144 unterstützen die Entwicklertools jetzt Individual Request Throttling (Drosselung einzelner Anfragen). Sie können einzelne Netzwerkanfragen auswählen, auf die bestimmte Netzwerkbedingungen angewendet werden sollen. Außerdem können Sie sie wie bisher blockieren. Mit dieser Funktion werden die Funktionen, die sich bisher im Bereich „Netzwerkanfrage blockieren“ befanden, in einen neuen, umfassenderen Bereich Anfragebedingungen verschoben. Diese Funktion ist präziser und ermöglicht ein schnelleres Debugging, da nur angeforderte Ressourcen und nicht die gesamte Website verlangsamt werden.

Anfrage drosseln oder blockieren

Wenn Sie eine bestimmte Ressource blockieren oder drosseln möchten, klicken Sie im Bereich Netzwerk mit der rechten Maustaste auf eine beliebige Anfrage und wählen Sie Anfrage blockieren oder Anfrage drosseln für die genaue URL oder die gesamte Domain aus. Dadurch wird automatisch der Bereich Bedingungen anfordern geöffnet, eine neue Regel für den Eintrag erstellt und die ausgewählten Netzwerkbeschränkungen werden sofort angewendet.

Leiste mit Anfragebedingungen

Im neuen Bereich Anfragebedingungen können Sie festlegen, welche Anfragen betroffen sind und wie stark sie verlangsamt werden sollen.

Leiste mit Anfragebedingungen in den Entwicklertools

Sie können die Einstellungen für die Drosselung anpassen, indem Sie Standardvoreinstellungen wie „Slow 3G“ oder eigene benutzerdefinierte Profile auswählen und URL-Muster mit Platzhaltern (*) bearbeiten, um diese Bedingungen auf bestimmte dynamische Ressourcen oder Gruppen von Anfragen anzuwenden.

Wenn eine Anfrage mit mehreren Mustern übereinstimmt, wendet DevTools die erste gefundene Regel an. Sie können diese Priorität mit den Pfeilschaltflächen im Bereich ändern, um Regeln mit hoher Priorität an den Anfang der Liste zu verschieben.

Drosselung oder Blockierung von Anfragen

Es ist wichtig, zwischen Anfragen, die von Natur aus langsam sind, und solchen, die von den Entwicklertools künstlich gedrosselt werden, zu unterscheiden. Wenn Sie die Seite neu laden, werden die neuen Drosselungsregeln angewendet. Sie können die betroffenen Anfragen ganz einfach im Netzwerkbereich erkennen:

  • Blockierte Anfragen werden rot dargestellt und der Status ist in der Spalte „Status“ (blocked:devtools).
  • Gedrosselte Anfragen werden gelb oder gold dargestellt und haben in der Spalte „Zeit“ ein Uhrsymbol. Wenn Sie den Mauszeiger auf das Symbol bewegen, wird angezeigt, welche Netzwerkbedingung angewendet wird. Das ist auch im Unterbereich „Zeitachse“ zu sehen.

Der Netzwerkbereich in den DevTools mit Anzeigen für blockierte und gedrosselte Anfragen.

Das Drosseln von Anfragen kann sich auf die Leistung der Seite auswirken. Wenn Sie ein Leistungsprofil aufzeichnen, können Sie den Mauszeiger auf die Anfrage im Netzwerk-Track bewegen, um eine Kurzinfo mit den angewendeten Netzwerkbedingungen aufzurufen.

Der Leistungsbereich in den Entwicklertools mit Indikatoren für gedrosselte Anfragen.