Czy istnieje sposób na filtrowanie żądań sieciowych za pomocą narzędzi programistycznych Google Chrome?

Czy można odfiltrować niektóre żądania za pomocą narzędzi programistycznych Chrome, na przykład odfiltrować wszystkie żądania obrazów?

Nie ma bardzo elastycznej funkcji filtrowania, ale pasek na dole pozwala wyświetlać tylko żądania dotyczące określonego dokumentu lub typu połączenia:

Nie możesz po prostu wykluczyć obrazów, ale powinno to pomóc.

Możesz także nacisnąć Control/ Command+, Faby wyszukać konkretny ciąg na liście żądań i zaznaczyć pole „filtr”, aby ukryć niezgodne żądania:

Filtry tekstu wykluczającego - wyświetlają wyniki nie pasujące do zapytania.

• Użyj -.png lub -.gif lub -.jpg jako filtru w panelu sieci.
• Działa również wiele innych filtrów ujemnych. np. -mime-type: image / png , -larger-than: 20k , -domain: yoursite.com , -status-code: 404 . Zobacz dokumentację Chrome dla programistów - sortowanie i filtrowanie .

Dostępne od wersji Chrome ~ 42 - link do problemu , ogłoszony tutaj

Inne podejście: w panelu Sieć otwórz filtr i CTRL/CMDkliknij typy żądań, które chcesz wyświetlić. Aby ukryć tylko żądania obrazów, wybierz wszystkie inne typy oprócz obrazów podczas przytrzymywania CTRL/CMD.

Piszesz -.png -.gif -.jpw polu wprowadzania filtru, aby wykluczyć wszystkie obrazy z wyników. U dołu pokazuje całkowitą ilość przesłanych danych bez obrazów.

„Inżynier w Google pracujący nad Chrome” napisał na Twitterze w grudniu 2014 roku:

Chrome DevTools: filtry tekstu negatywnego właśnie trafiły do ​​panelu Sieć. Wyświetl listę wyników niezgodnych z podanym zapytaniem Link do Twittera

edycja : możesz nawet filtrować według domeny, typu MIME, rozmiaru pliku, ... lub wykluczyć, wprowadzając -domain:cdn.sstatic.neti łącząc dowolne z nich, mime-type:image/png -larger-than:100Kaby wyświetlać tylko pliki png mniejsze niż 100kb w panelu sieciowym

zobacz DevTools: State Of The Union 2015 autorstwa Addy Osmani

Od Chrome 42 .

W mojej kompilacji przeglądarki Google Chrome (wersja 74.0.3729.157 (64-bitowa)) znalazłem dostępne następujące filtry (dodałem kilka przykładów). Zauważ, że DevTools ma funkcję autouzupełniania (co bardzo pomaga w sortowaniu tych rzeczy).

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

Podobnie jak -MimeType, możesz użyć domeny w filtrze wejściowym, na przykład:

domena: twojadomena.com

Proste i krótkie i szybkie rozwiązanie:

Po prostu włóż -.

Nie pokazuj żadnego adresu URL z rozszerzeniem (zawartość statyczna), więc masz tutaj wyraźnie adresy URL.

Jeśli otworzysz narzędzia programistyczne, wybierz sieć. Z paska u dołu strony wybierz obrazy, jeśli chcesz szukać konkretnie żądań obrazów. Filtry są wyłączne, więc nie można odfiltrowywać tylko żądań obrazów. Proszę bardzo.

Dodanie -MimeType:image/jpegfiltra zadziałało u mnie.