Есть ли способ фильтровать сетевые запросы с помощью инструментов разработчика Google Chrome?

Можно ли отфильтровать некоторые запросы с помощью инструментов разработчика Chrome, скажем, отфильтровать все запросы изображений?

Нет очень гибкой функции фильтрации, но панель внизу позволяет отображать только запросы определенного документа или типа соединения:

Вы не можете просто исключить изображения, но это должно помочь.

Вы также можете нажать Control/ Command+ Fдля поиска определенной строки в списке запросов и установить флажок «фильтр», чтобы скрыть запросы, которые не совпадают:

Отрицательные текстовые фильтры - список результатов, не соответствующих заданному запросу.

• Использование -.png или -.gif или -.jpg в качестве фильтра в сетевой панели.
• Многие другие негативные фильтры тоже работают. например -mime-type: image / png , -larger-than: 20k , -domain: yoursite.com , -status-code: 404 . См. Документацию разработчика Chrome - Сортировка и фильтрация .

Доступно с Chrome ~ 42 - Ссылка на проблему , объявленная здесь

Другой подход: на панели «Сеть» откройте фильтр и CTRL/CMDвыберите типы запросов, которые вы хотите отображать. Чтобы скрыть только запросы изображений, выберите все остальные типы, кроме изображений, удерживая CTRL/CMD.

Вы пишете -.png -.gif -.jpв поле ввода фильтра, чтобы исключить все изображения из результатов. Внизу отображается общий объем переданных данных без изображений.

«Инженер Google, работающий над Chrome» написал в Твиттере в декабре 2014 г .:

Chrome DevTools: негативные текстовые фильтры только что попали на панель «Сеть». Список результатов, не соответствующих заданному запросу Ссылка на Twitter

редактировать : вы даже можете фильтровать по домену, mime-типу, размеру файла, ... или исключить, введя -domain:cdn.sstatic.netи комбинируя любой из них, mime-type:image/png -larger-than:100Kчтобы отображать только файлы PNG размером менее 100 КБ на сетевой панели

см. DevTools: State Of The Union 2015 Адди Османи

Начиная с Chrome 42 .

В моей сборке Google Chrome (версия 74.0.3729.157 (64-разрядная)) я обнаружил, что доступны следующие фильтры (я добавил несколько примеров). Обратите внимание, что DevTools имеет функцию автозаполнения (которая очень помогает в сортировке этого материала).

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

Как и -MimeType, вы можете использовать домен во входных данных фильтра, например:

домен: yourdomain.com

Простое, короткое и быстрое решение:

Просто положи -.

Ибо не показывать URL-адреса с расширением (статическое содержимое), поэтому здесь четко указаны URL-адреса.

Если вы откроете инструменты разработчика, выберите сеть. На панели внизу страницы выберите изображения, если вы хотите искать именно запросы изображений. Все фильтры являются эксклюзивными, поэтому вы не можете отфильтровать только запросы изображений. Вот и все.

У -MimeType:image/jpegменя сработало добавление фильтра.