Как заблокировать запрос в devtools

Как запретить показ конкретных XHR запросов в консоли хрома

Существует ли способ запретить вывод в google-chrome dev-tools во вкладке network ненужные XHR запросы? Сейчас во вкладке network выводятся все соединения включая все расширения google-chrome что мешает отладке. Хотелось бы видеть только запросы-ответы веб приложения. Не хотелось бы отключать ради этого все расширения так как периодически ими пользуюсь.

• отладка
• chrome-extension
• google-chrome-devtools

Отслеживать

задан 8 июл 2018 в 10:09

55 5 5 бронзовых знаков

Фильтрация чем не устроила?

8 июл 2018 в 10:40

@AntonShchyrov Фильтрацией и пользуюсь. Но не всегда точно знаешь название запроса. Или запросов несколько. Думал есть способ отключить отображение запросов расширений отдельно.

8 июл 2018 в 11:21

@r.u.f.f можно сделать фильтр по названию файла

8 июл 2018 в 14:21

Такой возможности нет. Однако в поле filter вы можете использовать регулярные выражения и дополнительные параметры поиска.

9 июл 2018 в 5:05

@Deliaz да, это по большей части решило мою проблему. Спасибо!

Средство блокировки сетевых запросов

Используйте средство блокировки сетевых запросов, чтобы проверка, как выглядит и ведет себя веб-страница, когда некоторые ресурсы недоступны, например файлы изображений, файлы JavaScript, шрифты или таблицы стилей CSS. Используйте это средство для тестирования блокирующих сетевых запросов к указанному шаблону URL-адреса и просмотра поведения веб-страницы.

Если веб-страница зависит от внешних ресурсов , размещенных на серверах, отличных от веб-страницы HTML, иногда эти серверы могут не отвечать или недоступны для некоторых пользователей. В этом случае некоторые ресурсы, от которого зависит ваша веб-страница, могут не быть получены веб-браузером. Важно проверка поведение веб-страницы, когда внешние ресурсы не загружаются. Проверьте, правильно ли веб-страница обрабатывает отсутствующие ресурсы или отображается ли она неработающей для пользователей.

После создания заблокированных сетевых запросов и тестирования веб-страницы можно изменить или удалить заблокированные сетевые запросы.

Блокировка сетевого запроса

Чтобы заблокировать сетевой запрос, выполните приведенные далее действия.

1. Перейдите на веб-страницу, для которой требуется заблокировать сетевые запросы. Например, откройте демонстрационную страницу тестирования специальных возможностей на новой вкладке или окне. Эта веб-страница содержит изображения, которые вы будете блокировать с помощью средства блокировки сетевых запросов .
2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).
3. В devTools на панели действий щелкните вкладку Блокировка сетевых запросов . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты («.
4. Нажмите кнопку Добавить шаблон (). Флажок Включить блокировку сетевых запросов установлен автоматически.
5. В текстовом поле Текстовый шаблон для блокировки соответствующих запросов введите *.jpg. Это блокирует все запросы для изображений JPEG. Вы можете выполнить любое из следующих действий:
   • Введите полный URL-адрес.
   • Введите только доменное имя, чтобы заблокировать все запросы из этого домена.
   • Замените части URL-адреса * на для сопоставления шаблонов с подстановочными знаками.

Например, соответствует URL-адресам, contoso.com например:

• https://contoso.com
• https://subdomain.contoso.com
• https://subdomain.contoso.com/path/to/resource

И *.jpg соответствует URL-адресам, например:

• https://www.contoso.com/resource.jpg
• http://third-party.com/6469272/163348534-b90ea1a3-c33cbeb1aed8.jpg

Нажмите кнопку Добавить :

Обновите страницу. Все изображения JPEG блокируются, поэтому на отображаемой веб-странице каждое изображение указывается как отсутствующие с помощью значка «сломанное изображение». Количество заблокированных сетевых запросов указывается в средстве блокировки сетевых запросов :

Удаление заблокированного сетевого запроса

Чтобы удалить определенный шаблон запроса на блокировку сети, выполните указанные действия.

• В таблице Блокировка сетевых запросов наведите указатель мыши на шаблон запроса блокировки сети и нажмите кнопку Удалить ():

Чтобы удалить все сетевые блокирующие запросы одновременно:

• На панели инструментов нажмите кнопку Удалить все шаблоны ().

Изменение заблокированного сетевого запроса

Чтобы изменить существующий заблокированный сетевой запрос, выполните приведенные далее действия.

• В таблице Блокировка сетевых запросов наведите указатель мыши на заблокированный сетевой запрос и нажмите кнопку Изменить ():

Переключение блокировки сетевых запросов

Чтобы переключить блокировку сетевых запросов без удаления и повторного создания всех заблокированных сетевых запросов:

• На панели инструментов установите или снимите флажок Включить блокировку сетевых запросов :

Блокировка сетевого запроса с помощью средства «Сеть»

Вы можете заблокировать сетевые запросы, выполняемые веб-страницей, с помощью средства блокировки сетевых запросов или средства «Сеть «.

Чтобы заблокировать сетевые запросы с помощью средства «Сеть» , выполните следующие действия.

1. Перейдите на веб-страницу, для которой требуется заблокировать сетевые запросы. Например, откройте демонстрационную страницу тестирования специальных возможностей на новой вкладке или окне.
2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
3. В devTools на панели действий щелкните вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты («.
4. В таблице сетевых запросов на нижней панели найдите сетевой запрос, который нужно заблокировать.
5. Щелкните правой кнопкой мыши сетевой запрос и выберите Блокировать URL-адрес запроса , чтобы заблокировать этот конкретный ресурс, или Блокировать домен запроса , чтобы заблокировать все ресурсы из одного домена:

7 полезных функций DevTools для тестировщиков

Инструменты разработчика отображаются в браузере Chrome в виде панели, на которой доступны сведения об открытой вкладке. Чтобы воспользоваться DevTools, откройте меню, нажав на три точки в правом верхнем углу, выберите More Tools (Дополнительные инструменты), а затем Developer Tools (Инструменты разработчика). Также можно использовать горячие клавиши Ctrl+Shift+I или нажать F12. По желанию панель DevTools можно переместить или открыть в отдельном окне.

О том, как открыть DevTools в других браузерах и почему инструменты разработчика делают работу эффективнее, мы рассказали в этой статье.

Просмотр информации об элементах

На вкладке Elements (Элементы) можно просмотреть информацию об элементах веб-страницы, дереве DOM и стилях CSS. На основе этой информации можно определить лучшие локаторы для веб-элементов, что особенно актуально при тестировании средств веб-автоматизации.

В инструментах разработчика можно получить XPath или CSS-селектор элемента. Для этого откройте вкладку Elements, щелкните правой кнопкой мыши на нужном элементе и выберите Copy (Копировать), а затем Copy XPath или Copy Selector.

Для поиска элементов в DOM нажмите Ctrl+F . Искать можно не только по простому тексту, но и с помощью фильтров, которые позволяют обнаружить сложные CSS-селекторы или XPath. С их помощью можно убедиться, что локатор обнаруживает нужные элементы и увидеть количество совпадений.

Указанный CSS-селектор соответствует 9 элементам в DOM

Мониторинг HTTP-запросов

Вкладка Network (Сеть) содержит информацию о HTTP-запросах. Здесь отображаются заголовки, тело запроса, код статуса, тело и время ответа. На этой вкладке тестировщик может увидеть текущий статус сетевых запросов.

URL и тело запроса можно скопировать, чтобы в дальнейшем использовать для тестирования API, например, с применением Postman. Также тут можно обнаружить лишние запросы, отправляемые во время загрузки. Если страница загружается долго, можно определить, с какими запросами это связано.

Для работы со вкладкой Network нажмите на кнопку Record (Запись). Затем отправьте запросы в приложении, и они отобразятся на этой вкладке.

HTTP-запросы, которые зафиксированы на вкладке Network при загрузке блога TestProject

Нажмите на HTTP-запрос, чтобы просмотреть:

• URL запроса
• Заголовки запросов и ответов
• Метод запроса и код статуса
• Тело запроса и ответа.

В нижней части вкладки указаны количество отправленных запросов, объем переданных данных и время загрузки.

Каскадная диаграмма на вкладке Network позволяет увидеть этапы запросов. Например, сколько времени занял каждый запрос, когда он был отправлен и выполнен. С помощью этого инструмента тестировщик может узнать, какие запросы выполняются параллельно и обнаружить проблемы с производительностью.

Моделирование характеристик сети

На вкладке Performance (Производительность) отображается длительность каждого события. Начните запись, выполните нужные действия и остановите ее.

Функция Screenshots (Скриншоты) активирована по умолчанию, поэтому каждое изменение на экране сохраняется в виде отдельного скриншота. С их помощью можно выбрать фрагменты записи и получить о них подробные сведения.

Еще можно моделировать характеристики сетевого соединения и проверять работу приложения в разных условиях. По умолчанию браузер использует настройки текущего устройства, включая параметры сети и ЦП. Это не мешает проверить работу сайта при медленном ЦП, слабом интернет-соединении или его отсутствии. С помощью моделирования можно узнать, как приложение будет работать в реальных условиях.

Моделирование характеристик сети

Эмуляция устройств

Хотя девтулс Chrome не заменят тестирование на реальных устройствах или продвинутых эмуляторах, в них доступны средства эмуляции. С их помощью можно посмотреть, как приложение выглядит на различных экранах.

Для этого перейдите в меню настроек или нажмите F1 в режиме Инструментов разработчика и выберите Devices (Устройства).

В этом меню перечислены устройства, которые Google предлагает использовать по умолчанию. Для тестирования можно выбрать одно из них или добавить новое устройство с индивидуальными настройками, включая разрешение экрана и наличие тачскрина.

Чтобы активировать эмуляцию устройства, нажмите на иконку с изображением телефона и планшета.

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

Работа с файлами cookie

Файлы cookie содержат информацию, которая хранится на устройстве, и передают данные серверу, позволяя отображать персонализированный контент. Благодаря таким файлам страницы загружаются быстрее и сохраняют важную информацию, например, содержимое корзины в интернет-магазине.

Веб-приложения нужно тестировать с разными настройками файлов cookie. Основные сведения о файле cookie — Name (Название), Value (Значение) и Expiration date (Срок действия) — название, значение и срок действия — можно получить на вкладке Applications (Приложения) инструментов разработчика Chrome.

Раскройте список Cookies в левом меню. Выберите сайт для просмотра сохраненных файлов cookie и подробной информации о них. Здесь можно удалить файлы cookie, изменить их значения и отследить влияние таких изменений на работу приложения.

Файлы cookie для страницы веб-приложения

Создание скриншотов

С помощью инструментов разработчика можно делать скриншоты сайта или веб-приложения. Нажмите Ctrl+Shift+P , введите «screenshot» и выберите один из четырех вариантов.

• Capture area screenshot (сделать скриншот области) создает скриншот определенной области экрана, как инструмент «Ножницы» в Windows.
• Capture full size screenshot (сделать полноразмерный скриншот) создает копию изображения всей страницы, включая области, которые не отображаются на экране.
• Capture node screenshot (сделать скриншот узла) делает скриншот элемента, выделенного на вкладке Elements.
• Capture screenshot (сделать скриншот) делает скриншот отображаемой части страницы.

При выборе любого варианта будет сохранен скриншот в формате .png.

Тестирование локализации

Если приложение локализовано, и нужно проверить его работу с различными настройками страны и языка, в инструментах разработчика можно изменить региональные настройки браузера. Откройте меню с тремя точками рядом с кнопкой настроек, нажмите More Tools, а затем Sensors (Датчики).

Откроется список вариантов расположения, для которых указаны географическое положение, региональные настройки и часовой пояс. Можно задать собственные настройки, нажав на кнопку Manage (Настроить) и указав информацию о выбранном расположении.

Эта статья — адаптированный перевод материала тестировщицы Андреа Драничану, опубликованного в блоге TestProject.

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

Интересные возможности DevTools для QA

Chrome DevTools — это консоль разработчика, набор инструментов в браузере для создания и отладки сайтов и приложений. С их помощью можно просматривать код, оптимизировать производительность веб-страниц с точки зрения UI и тестировать уже разработанную функциональность. О последнем сегодня и поговорим. Я собрал подборку полезных инструментов внутри DevTools, которые не очень распространены в QA, но при этом могут значительно упростить и ускорить вашу работу. Отмечу, что говорить мы будем именно о Chrome DevTools, хотя и в других браузерах есть аналогичные консоли разработчиков. Итак, поехали!

Снимки экрана при загрузке страницы

Одна из самых полезных функций в DevTools — серия снимков в процессе загрузки страницы. С ее помощью можно отловить какие-то баги и нелогичное поведение элементов в процессе построения страницы. Или посмотреть, появляется ли при загрузке спиннер или прогресс-бар (если вдруг у вас такой шустрый интернет, что визуально вы этого отследить не можете).

Как сделать серию снимков экрана при загрузке

1. Откройте панель разработчика (F12). 2. Откройте вкладку Network. 3. Нажмите на шестерёнку в правом верхнем углу панели. 4. Включите чекбокс Capture screenshots. 5. Нажмите Ctrl+R. Лента скриншотов появится в верхней части окна. Щелкнув по одному из них, вы сможете последовательно просмотреть все скриншоты с временными отметками и отследить, когда какой элемент появился на странице.

Поиск неиспользуемых CSS и JS в вёрстке

Еще одна интересная и незаменимая при тестировании производительности функция DevTools — обнаружение неиспользуемых в вёрстке CSS и JavaScript. Чем плох «лишний» код? Весь код, в том числе и неиспользуемый, браузер проверяет при каждой загрузке страницы. И чем больше этого неиспользуемого кода, тем дольше страница может прогружаться. А если пользователь зашел на сайт со смартфона, на всё это ещё и лишний мобильный трафик тратится. Неприятно. С помощью DevTools можно найти весь неиспользуемый код и передать эту информацию разработчику в баг-репорте. Возможно, там действительно есть что-то лишнее. Тогда, удалив это, разработчик повысит производительность сайта.

Как найти неиспользуемые CSS и JS в вёрстке

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Coverage и нажмите Enter. Откроется вкладка Coverage. Дальше будет работать в ней. 3. Нажмите на кнопку Start instrumenting coverage and reload page. 4. После этого в DevTool выведется таблица, где по функциям (или по блокам) будет отображено, сколько на странице неиспользуемого кода. 5. Кликните по одному из пунктов. После этого на вкладке Sources появится код с соответствующим цветным маркером. Красным отмечен тот код, которые не используется на странице. На одном из проектов этот способ помог мне отловить проблему с лишними Google-шрифтами. Они серьезно перегружали и утяжеляли страницу. В итоге разработчики оптимизировали код, удалив из него лишние шрифты.

Сохранение изменений в Chrome при перезагрузке страниц

Все знают, что через DevTools можно внести изменения в стили на странице, поменять шрифты, цвета, удалить изображения, добавить текст и т.д. Но не все знают, как сделать так, чтобы изменения эти сохранились даже после перезагрузки страницы. Тут помогут локальные переопределения. И работают они для большинства типа файлов за некоторыми исключениями. Но об этом поговорим чуть позже — в разделе «Ограничения».

Как сохранять изменения локально

1. Откройте панель разработчика (F12). 2. Откройте вкладку Sources. 3. На панели файлов слева откройте вкладку Overrides. 4. Нажмите на кнопку Select folder for overrides. 5. Выберите папку, в которой вы будете хранить изменения, которые вносите на страницу. 6. Во всплывающем окне разрешите доступ DevTools к выбранной папке. 7. Найдите файл с кодом страницы во вкладке Network. Для этого нужно перезагрузить страницу и сортировать все по Doс. Чаще всего этот файл называется index.html. В нашем примере ниже это Projects. 8. Кликните правой кнопкой по этому файлу и сохраните его Save for overrides. Теперь можно вносить в код изменения, которые сохранятся и после перезагрузки страницы. 9. Для этого найдите код нужного элемента во вкладке Elements с помощью специального инструмента (Ctrl+Shift+C) и скопируйте его. 10. Найдите скопированный элемент во вкладке Sources в документе с кодом страницы (чтобы открыть поисковую строку, нажмите Ctrl+F). 11. Внесите в него изменения и нажмите Ctrl+S, чтобы сохранить их. Перезагрузите страницу. Готово! Были просто «Наши работы», стали «Наши крутые работы». И они останутся таковыми, даже если мы перезагрузим страницу. Изменения сохраняются локально в папке, которую мы выбрали на шаге 5.

Ограничения! DevTools не сохраняет изменения, сделанные в DOM-дереве на вкладке Elements. Редактировать можно только файл с кодом страницы во вкладке Sources. Но! Если CSS не зафиксирован в файле с кодом страницы, его получится отредактировать и сохранить и на вкладке Styles.

Возвращаясь к разделу нашей статьи «Поиск неиспользуемых CSS и JS в вёрстке», с помощью локальных переопределений вы можете самостоятельно удалить найденный «лишний код» и посмотреть, как это скажется на скорости загрузки страницы. А еще, если вы и сами своего рода разработчик, можно попробовать как-то оптимизировать уже существующий код. Например, изменить порядок блоков и посмотреть, как это отразится на производительности.

Блокирование запросов

Мы уже знаем, как увидеть, что происходит со страницей в процессе загрузки (раздел статьи «Снимки экрана при загрузке страницы»). А что, если какой-то контент не загрузится? Скажем, картинка, или какая-то ключевая анимация. Что тогда произойдет? Чтобы протестировать это, можно через DevTools заблокировать какой-то конкретный запрос. Я так обычно проверяю, не забыли ли разработчики задать альтернативный текст для картинок, который появляется, если картинка сломалась/потерялась/не подгрузилась.

Как заблокировать определённые запросы

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Request Blocking и выберите Show Network Request Blocking. Ниже откроется панель Network Request Blocking. 3. На вкладке Network выберите элемент, запрос к которому вы хотите заблокировать. 4. Из меню Headers скопируйте его и нажмите на кнопку Add Pattern в панели Network Request Blocking. 5. Вставить запрос в поле в меню Network Requesting Block и нажмите на кнопку Add. 6. Убедитесь, что чек-боксы запроса и Enable network request blocking активированы. 7. Перезагрузите страницу и проверьте изменения. Готово! Мы видим, что вместо картинок, запрос к которым мы заблокировали, появился альтернативный текст:

Переопределение геолокации

Через DevTools можно переопределить локацию пользователя, чтобы проверить, как сайт будет выглядеть для жителей разных городов/стран/часовых поясов. Показывает ли он челябинскую погоду жителю Челябинска? Учитывает ли часовой пояс посетителя из европы, который смотрит расписание игр на сайте канадского хоккейного клуба? Все это мы можем выяснить, просто переопределив геолокацию в DevTools.

Внимание! Этот способ подойдет для сайтов и сервисов, которые определяют местоположение посетителя с помощью сервисов геолокации, а не, например, через IP-адрес.

Как сменить геолокацию в DevTools

1. Откройте консоль разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите команду Sensors и выберите в списке пункт Show Sensors. После этого в нижней части DevTools откроется вкладка Sensors. 3. Продолжаем работать во вкладке Sensors. В поле Location из выпадающего списка можно выбрать уже имеющиеся города. Если нужного города в списке не оказалось, кликайте по кнопке Manage справа от выпадающего списка с доступными локациями. Затем Add Location и добавляйте город сами — с названием, координатами и часовым поясом. Мне эта возможность DevTools пригодилась, когда мы работали над сайтом одного из британский футбольных клубов. Нужно было проверить, учитывается ли геолокация посетителя на странице с расписанием будущих игр.

Подмена User-Agent

User-Agent — это строка, передающая сайту информацию о том, какое программное обеспечение использует посетитель. В ней зафиксировано, каким устройством человек пользуется (ПК, планшет или смартфон), с какой операционной системой и через какой браузер. В зависимости от этих параметров сайт может выглядеть по-разному. Частно, например, дизайнеры адаптируют оформление и стили под мобильные версии, упрощают анимации — чтобы ничто не мешало знакомству с контентом на небольшом экране смартфона. Вот вам пример из жизни: сайт vk.com подстраивается под гайдлайны той операционной системы, на которой его запускают: Чтобы проверить, меняются ли стили на сайте в зависимости от разных устройств, ОС и браузеров, не обязательно обкладываться маками, айфонами, разными планшетами и т.д. Можно просто сменить User-Agent в DevTools и проверить сайт с одного устройства.

Как изменить User-Agent в DevTools

1. Откройте панель разработчика (F12) и вызовите Command Menu (Ctrl+Shift+P). 2. Введите Show Network conditions и нажмите Enter. После этого в нижней части DevTools откроется вкладка Network conditions. 3. В поле User-Agent снимите галочку с Use browser default. 4. После этого из выпадающего списка ниже вы сможете выбрать нужный User-Agent. Если в списке нет нужного User-Agent, можно ввести данные вручную. Для этого в выпадающем списке выберите пункт Custom и пропишите параметры в строке ниже.

Заключение

Эти шесть фишек, о которых мы поговорили в статье, — лишь малая часть того, на что еще способен DevTools в умелых руках QA-специалиста. Там еще много интересного, что может быть полезно при тестировании сайтов и приложении. Но об этом — уже в следующих подборках. А пока хочу напомнить всем причастным к QA, что в тестировании на самом-то деле нет рамок! Если какой-то инструмент, изначально созданный вовсе и не для тестирования, помогает вам оптимизировать вашу работу — используйте его! Это хороший инструмент 🙂 Автор статьи: Егор Ярославцев Редактура: Марина Медведева Фото в заголовке: Martin Wilner on Unsplash