Gibt es eine Möglichkeit, Netzwerkanforderungen mithilfe der Google Chrome-Entwicklertools zu filtern?

Ist es möglich, einige Anforderungen mit Chrome-Entwicklertools herauszufiltern, z. B. alle Bildanforderungen herauszufiltern?

Es gibt keine sehr flexible Filterfunktion, aber in der unteren Leiste können Sie nur Anforderungen eines bestimmten Dokuments oder Verbindungstyps anzeigen:

Sie können Bilder nicht einfach ausschließen, aber es sollte helfen.

Sie können auch Control/ Command+ drücken F, um nach einer bestimmten Zeichenfolge in der Anforderungsliste zu suchen, und das Kontrollkästchen "Filter" aktivieren, um nicht übereinstimmende Anforderungen auszublenden:

Negative Textfilter - Listenergebnisse auflisten, die nicht mit einer bestimmten Abfrage übereinstimmen.

• Verwenden Sie -.png oder -.gif oder -.jpg als Filter im Netzwerkfenster.
• Viele andere negative Filter funktionieren auch. zB -mime-type: image / png , -larger-than: 20k , -domain: yoursite.com , -status-code: 404 . Siehe Chrome-Entwicklerdokumente - Sortieren und Filtern .

Verfügbar seit Chrome ~ 42 - Issue Link , hier angekündigt

Ein anderer Ansatz: Öffnen Sie im Netzwerkfenster den Filter und CTRL/CMDklicken Sie auf die Arten von Anforderungen, die Sie anzeigen möchten. Um nur Bildanforderungen auszublenden, wählen Sie alle anderen Typen außer Bildern aus, während Sie gedrückt halten CTRL/CMD.

Sie schreiben -.png -.gif -.jpin das Filtereingabefeld, um alle Bilder von den Ergebnissen auszuschließen. Unten wird die Gesamtmenge der ohne Bilder übertragenen Daten angezeigt.

Ein "Ingenieur bei Google, der an Chrome arbeitet" twitterte im Dezember 14:

Chrome DevTools: Negative Textfilter sind gerade im Netzwerkfenster gelandet. Listen Sie Ergebnisse auf, die nicht mit einer bestimmten Abfrage übereinstimmen. Twitter Link

Bearbeiten : Sie können sogar nach Domäne, MIME-Typ, Dateigröße ... filtern oder ausschließen, indem Sie -domain:cdn.sstatic.neteine dieser Daten eingeben und kombinieren mime-type:image/png -larger-than:100K, um nur PNG-Dateien anzuzeigen, die kleiner als 100 KB im Netzwerkfenster sind

siehe DevTools: State Of The Union 2015 von Addy Osmani

Seit Chrome 42 .

Unter meinem Build von Google Chrome (Version 74.0.3729.157 (64-Bit)) habe ich die folgenden verfügbaren Filter gefunden (ich habe einige Beispiele hinzugefügt). Beachten Sie, dass DevTools über eine AutoComplete-Funktion verfügt (die beim Sortieren dieser Dinge sehr hilfreich ist).

domain:
-domain:
    # Use a * character to include multiple domains.
    # Ex:  *.com, domain:google.com, -domain:bing.com

has-response-header:
-has-response-header:
    # Filter resources with the specified HTTP response header.
    # Ex: has-response-header:Content-Type, has-response-header:age

is:
-is:
    # is:running finds WebSocket resources
    # I've also come across:
    #  - is:from-cache,
    #  - is:service-worker-initiated
    #  - is:service-worker-intercepted


larger-than:
-larger-than:
    # Note: larger-than:1000 is equivalent to larger-than:1k
    # Ex: larger-than:420, larger-than:4k, larger-than:100M

method:
-method:
    # method:POST, -method:OPTIONS, method:PUT, method:GET

mime-type:
-mime-type:
    # Ex: mime-type:application/manifest+json, mimetype:image/x-icon


mixed-content:
-mixed-content:
    # 2 that I've found documented: 
    #   mixed-content:all (Show all mixed-content resources) 
    #   mixed-content:displayed (Show only those currently displayed) (never used this personally)

scheme:
-scheme:
    # Ex: scheme:http, scheme:https,
    # Note that there are also scheme:chrome-extension, scheme:data

set-cookie-domain:
-set-cookie-domain:
    # 
    # Ex: set-cookie-domain:.google.com

set-cookie-name:
-set-cookie-name:
    # Match Set-Cookie response headers with name
    # Ex: set-cookie-name:WHATUP

set-cookie-value:
-set-cookie-value:
    # Match Set-Cookie response headers with value
    # Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo

status-code:
-status-code:
    # Match HTTP status code
    # Ex: status-code:200, -status-code:302

Wie bei -MimeType können Sie die Domain wie folgt für die Filtereingabe verwenden:

Domain: yourdomain.com

Eine einfache, kurze und schnelle Lösung:

Einfach gesagt -.

Zeigen Sie keine URL mit Erweiterung (statischer Inhalt) an, sodass Sie hier eindeutig URLs haben.

Wenn Sie die Entwicklertools öffnen, wählen Sie Netzwerk. Wählen Sie in der Leiste unten auf der Seite Bilder aus, wenn Sie speziell nach Bildanforderungen suchen möchten. Die Filter sind alle exklusiv, sodass Sie nicht nur Bildanforderungen herausfiltern können. Los geht's.

Das Hinzufügen eines -MimeType:image/jpegFilters hat bei mir funktioniert.