Netzwerkanfragen: Website testen, indem Sie Netzwerkanfragen blockieren oder drosseln

Ewa Gasperowicz

Mit dem Bereich Anfragebedingungen können Sie testen, wie sich Ihre Seite verhält, wenn bestimmte Ressourcen wie Bilder oder Stylesheets nicht geladen werden oder wenn das Laden der Ressourcen länger dauert.

Übersicht

Im Bereich Anfragebedingungen können Sie mehrere Ressourcen oder „Muster“ gleichzeitig blockieren und sie in einer Liste ein- und ausblenden. Sie können auch Domains oder URLs für Netzwerkanfragen im Bereich Netzwerk blockieren. Die entsprechenden Muster werden dann im Bereich Anfragebedingungen angezeigt.

In der Leiste Anfragebedingungen haben Sie folgende Möglichkeiten:

  • Fügen Sie Muster hinzu oder entfernen Sie sie.
  • Muster bearbeiten
  • Entfernen Sie alle Muster.
  • Blockierung oder Drosselung von Netzwerkanfragen aktivieren oder deaktivieren Nach der Aktivierung können Sie das Blockieren oder Drosseln für ein einzelnes Muster aktivieren oder deaktivieren.

Wenn Sie die Entwicklertools schließen, werden die Blockierung und Drosselung von Netzwerkanfragen deaktiviert. Sie müssen das Feld öffnen und die Blockierung wieder aktivieren. DevTools speichert die Muster jedoch auch nach dem Schließen des Browsers.

Netzwerkanfrage blockieren oder drosseln

Sie können Netzwerkanfragen über den Bereich Netzwerk in den DevTools blockieren.

  1. Klicken Sie im Bereich Network (Netzwerk) unter Name (Name) mit der rechten Maustaste auf eine Anfrage und wählen Sie „Block request“ (Anfrage blockieren) oder „Throttle request“ (Anfrage drosseln) aus. Image
  2. Die Übersicht Anfragebedingungen wird automatisch geöffnet und das relevante Muster wird als blockiert oder gedrosselt aufgeführt. Dadurch wird auch das Kästchen „Blockieren und Drosseln aktivieren“ automatisch angeklickt.

Gedrosselte oder blockierte Anfragen

Um zwischen langsamen Anfragen und Anfragen, die von den DevTools gedrosselt werden, zu unterscheiden, können Sie die Bereiche „Netzwerk“ und „Leistung“ prüfen.

Im Netzwerkbereich:

  • Blockierte Anfragen:Sehen Sie sich die Spalte Status an. Blockierte Anfragen werden explizit mit (blocked:devtools) angezeigt und sind rot.
  • Gedrosselte Anfragen:Neben der Anfrage-URL wird ein goldenes oder braunes Symbol angezeigt. Alternativ können Sie auch in der Spalte Zeit nachsehen. Das Symbol wird neben der Zeitangabe angezeigt.
    • Bewegen Sie den Mauszeiger auf das Symbol, um genau zu sehen, welche Netzwerkbedingung angewendet wurde.
    • Klicken Sie auf das Symbol, um sofort die Schublade Anforderungsbedingungen zu öffnen und die Regel hervorzuheben, die für die Drosselung verantwortlich ist.

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

Im Bereich „Leistung“: Sie können auch nach Netzwerkbedingungen suchen, wenn Sie ein Leistungsprofil aufzeichnen. Anleitung:

  1. Rufen Sie das Steuerfeld Leistung auf und starten Sie eine Aufzeichnung.
  2. Suchen Sie die Anfrage im Netzwerk-Track.
  3. Bewegen Sie den Mauszeiger auf die Anfrage, um eine Kurzinfo mit den angewendeten Netzwerkbedingungen aufzurufen.

Leiste mit Anfragebedingungen öffnen

So öffnen Sie die Leiste Anfragebedingungen:

  1. Öffnen Sie die Entwicklertools.
  2. Öffnen Sie das Befehlsmenü, indem Sie Folgendes drücken:
    • macOS: Befehlstaste + Umschalt + P
    • Windows, Linux, ChromeOS: Strg + Umschalttaste + P Befehlsmenü mit
  3. Geben Sie Request conditions ein, wählen Sie Show Request conditions (Anfragebedingungen anzeigen) aus und drücken Sie die Eingabetaste. DevTools zeigt den Bereich Anfragebedingungen unten im DevTools-Fenster an.

Alternativ können Sie rechts oben das Weitere Tools > Bedingungen anfordern auswählen.

Drosselungseinstellung ändern

So passen Sie eine Drosselungseinstellung an:

  1. Öffnen Sie den Bereich Anfragebedingungen und rufen Sie die entsprechende Anfrage auf.
  2. Wählen Sie in der Spalte „Drosselung“ im Drop-down-Menü eine Voreinstellung aus, z. B. „Langsam 3G“ oder „Schnell 3G“. Sie können auch ein benutzerdefiniertes Netzwerkprofil hinzufügen.

Anfragemuster ändern

Wenn Sie ein Muster ändern möchten, klicken Sie im Bereich Anfragebedingungen neben dem Muster auf die Schaltfläche Bearbeiten, nehmen Sie die gewünschten Änderungen vor und klicken Sie auf Speichern. Sie können auch auf die Schaltfläche Bedingung hinzufügen klicken, um eine neue Bedingung zu erstellen. Wenn Sie ein URL-Muster eingeben, können Sie Platzhalter (*) verwenden, um dynamische Teile der URL abzugleichen. *://example.com entspricht beispielsweise allen API-Anfragen an diese Domain. Mit Platzhaltern können Sie Bedingungen mithilfe der URL Pattern API auf mehrere Ressourcen gleichzeitig anwenden.

Blockierung der Netzwerkanfrage aktivieren/deaktivieren

Mit dem Kästchen Blockieren und Drosseln aktivieren können Sie die Blockierung von Netzwerkanfragen für alle Muster gleichzeitig aktivieren und deaktivieren.

Reihenfolge von URL-Abgleichsmustern ändern

Wenn eine Anfrage mit mehreren Mustern übereinstimmt, wendet DevTools die erste gefundene Regel an. Wenn Sie diese Priorität steuern möchten, klicken Sie im Bereich Anfragebedingungen neben der entsprechenden Regel auf die Pfeilschaltflächen, um Regeln mit hoher Priorität an den Anfang der Liste zu verschieben.

Blockierungsmuster für Netzwerkanfragen entfernen

So entfernen Sie ein bestimmtes Blockierungsmuster für Netzwerkanfragen aus der Liste:

  • Klicken Sie im Bereich Bedingungen für Anfragen auf die Schaltfläche Löschen.

Wenn Sie alle Blockierungsmuster für Netzwerkanfragen entfernen möchten, klicken Sie in der Aktivitätsleiste auf die Schaltfläche Alle Blockierungsmuster für Netzwerkanfragen entfernen.