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

125

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

— Адам Ли
источник

29

Голосование о возобновлении работы; это не следует считать не по теме. Инструменты разработчика Chrome / WebKit явно являются «программными инструментами, обычно используемыми программистами» (как разрешено в часто задаваемых вопросах ); При разработке я часто использовал параметры фильтрации.

— Джереми Бэнкс,

Да, есть - см. Документацию по сортировке и фильтрации сетевой панели . К сожалению, нет возможности отфильтровать / исключить запросы .

— Дэн Даскалеску

Выберите правильный ответ, отмеченный ответ давно устарел.

— Сурадж Джайн

21

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

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

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

введите описание изображения здесь

— Джереми Бэнкс
источник

9

этот ответ устарел. См. Следующий ( stackoverflow.com/a/27770139/610585 )

— undefined

257

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

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

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

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

— Марк Дойл
источник

2

Используйте CMD + щелкните OS X.

— undefined

7

Вы также можете фильтровать по коду состояния http и другим функциям , например: домен, has-response-header, is, больше, чем, method, mime-type, scheme, set-cookie-name, set-cookie-value, set-cookie-domain, status-code, и вы можете фильтровать по нескольким параметрам за раз, например, чтобы увидеть все запросы, отличные от 200, 404 или 302, используйте:-status-code:200 -status-code:404 -status-code:302

— Брэд Паркс,

3

Используется версия Chrome 51.0.2704.79 (64-разрядная) в Linux. Похоже, убрали негативную фильтрацию? Кто-нибудь еще это видел?

— Wilson F

4

По-прежнему кажется, что Chrome 52 не работает, к сожалению, эта функция не работает.

— JKillian

2

Обратите внимание, что флажок «Regex» рядом с входом фильтра должен быть снят, чтобы это работало. Также обратите внимание, что -.jsбудут исключены оба .jsи .jsonзапросы. По какой-то причине синтаксис отрицательного фильтра не рассматривается в самой последней документации .

— Джеймс

34

Вы пишете -.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 .

— Ивица Вучемило
источник

2

Спасибо, domain:деталь именно то, что я искал прямо сейчас. Это и множество других в настоящее время рассматриваются в документации, связанной с другим ответом

— JMM

13

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

— YenForYang
источник

7

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

домен: yourdomain.com

— Жюль Гулли
источник

5

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

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

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

— Наби КАЗ
источник

1

введите описание изображения здесь

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

— Beat Richartz
источник

1

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

— Matt
источник