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

125

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

Adam Lee
quelle
29
Abstimmung zur Wiedereröffnung; Dies sollte nicht als nicht thematisch betrachtet werden. Chrome / WebKit - Entwickler - Tools klar sind "Software - Tools häufig von Programmierern verwendet" (wie in der erlaubten faq ); Ich habe bei der Entwicklung oft die Filteroptionen verwendet.
Jeremy Banks
Bitte wählen Sie die richtige Antwort, die markierte Antwort ist längst veraltet.
Suraj Jain

Antworten:

21

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:

Geben Sie hier die Bildbeschreibung ein

Jeremy Banks
quelle
9
Diese Antwort ist veraltet. Siehe die nächste ( stackoverflow.com/a/27770139/610585 )
undefiniert
256

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.

Mark Doyle
quelle
2
Verwenden Sie CMD + klicken Sie auf OS X.
undefiniert
7
Sie können auch nach http-Statuscode und anderen Funktionen filtern, z. B .: Domäne, Has-Response-Header, ist größer als, Methode, MIME-Typ, Schema, Set-Cookie-Name, Set-Cookie-Wert, set-cookie-domain, status-code und Sie können nach mehreren gleichzeitig filtern, um beispielsweise alle Anforderungen anzuzeigen, die nicht 200, 404 oder 302 sind. Verwenden Sie:-status-code:200 -status-code:404 -status-code:302
Brad Parks
3
Verwenden der Chrome-Version "51.0.2704.79 (64-Bit)" unter Linux. Sieht aus wie die negative Filterung entfernt wurde? Hat das noch jemand gesehen?
Wilson F
4
Scheint ab Chrome 52 immer noch kaputt zu sein, kann diese Funktion leider nicht zum Laufen bringen.
JKillian
2
Beachten Sie, dass das Kontrollkästchen "Regex" neben dem Filtereingang deaktiviert sein muss, damit dies funktioniert. Beachten Sie auch, dass -.jssowohl Anfragen .jsals auch .jsonAnfragen ausgeschlossen werden. Aus irgendeinem Grund scheint die Negativfiltersyntax in der neuesten Dokumentation nicht behandelt zu werden .
James
34

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 .

Ivica Vucemilo
quelle
2
Danke, das domain:Teil ist genau das, wonach ich gerade gesucht habe. Das und eine Reihe anderer werden derzeit in der Dokumentation behandelt, die mit der anderen Antwort verknüpft ist
JMM
13

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
YenForYang
quelle
7

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

Domain: yourdomain.com

Jules Goullee
quelle
4

Eine einfache, kurze und schnelle Lösung:

Einfach gesagt -.

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

Regex-Filter

Nabi KAZ
quelle
1

Geben Sie hier die Bildbeschreibung ein

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.

Schlage Richartz
quelle
1

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

Matt
quelle