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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

"Инженер Google работает в Chrome" щебетал в декабре 14:

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

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

см. DevTools: State of the Union 2015 Адди Османи

Поскольку Chrome 42.

Ответ 4

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

домен: yourdomain.com

Ответ 5

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

Ответ 6

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

Ответ 7

В моей сборке 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