В Chrome DevTools панель «Сеть» , предоставляющая ценную информацию о сетевой активности веб-страницы, является одним из наиболее часто используемых инструментов.
В этой статье рассказывается о ряде весьма желательных улучшений панели «Сеть» , которые Иоана Форфота и Сильвия Еремия внесли во время стажировки в STEP. Эти улучшения были долгожданными и были тщательно отобраны из обширного списка невыполненных работ по отслеживанию проблем Chromium и сделали панель более доступной, интуитивно понятной и информативной.
Благодаря этим новым функциям панель «Сеть» дает веб-разработчикам возможность:
- Сосредоточьтесь только на соответствующих сетевых запросах.
- Понимайте коды состояния HTTP без необходимости использования внешних ссылок.
- Быстро выявляйте и устраняйте ошибки запросов.
- Понимание ответов подтипа JSON.
Читайте дальше, чтобы узнать все подробности!
Фильтрация запросов на расширения Chrome
Расширения Chrome могут отправлять собственные сетевые запросы, которые отображаются рядом с запросами страницы на панели «Сеть» . Если вы не занимаетесь активной разработкой расширения, эти запросы, скорее всего, не будут для вас актуальны. Раньше единственным способом их скрыть было использование фильтра -scheme:chrome-extension или отладка в режиме инкогнито .
Начиная с Chrome 117 это стало проще. Чтобы навести порядок на панели «Сеть» , DevTools теперь предлагает флажок для исключения запросов на расширение Chrome.
Дискуссии относительно состояния этой функции по умолчанию продолжаются. Первоначально мы рассматривали возможность включения его по умолчанию, полагая, что это может улучшить работу большинства пользователей. Однако такой подход может привести к тому, что некоторые пользователи не будут знать, что URL-адреса расширений Chrome могут инициировать запросы. Это также может создать проблемы для разработчиков расширений. Поэтому состояние по умолчанию установлено на «отключено».
Если этот флажок установлен, ваш список запросов будет более чистым, менее отвлекающим и более сосредоточенным на наиболее важных запросах, так что вы сможете получить гораздо более приятный опыт отладки!
Тексты статуса ответа HTTP
Понимание кодов состояния HTTP необходимо для эффективной отладки. Однако постоянно искать их значения может быть неудобно. DevTools ввел полезное улучшение: когда вы наводите указатель на код состояния в списке запросов, во всплывающей подсказке мгновенно отображается текст статуса — описательный заголовок, поясняющий его значение.
Текст статуса также отображается в заголовке рядом с кодом. Раньше эти функции были доступны только для HTTP/1.1, но теперь они распространены на HTTP/2 и HTTP/3. Эти, казалось бы, небольшие изменения оказывают существенное влияние, экономя ваше время и позволяя сосредоточиться на отладке, а не на поиске смысла кода.
Улучшенная видимость ошибок
Мы упростили быстрое обнаружение ошибок и их устранение, не углубляясь в панель. Чтобы добиться этого, вместо того, чтобы просто выделять сообщения об ошибках с помощью изменения цвета текста, мы добавили индикаторные значки, чтобы привлечь внимание к ошибкам запроса, например, с кодом состояния 404. Эти тонкие, но полезные индикаторы сделают ошибки более заметными, гарантируя, что вы не Не упускайте из виду важные вопросы.
Красивая печать подтипов JSON
Веб-разработка часто предполагает проверку ответов JSON, но чтение необработанных неформатированных JSON очень неудобно. Работа с такими ответами, особенно с такими подтипами, как ld+json , hal+json или sparql-results+json , может быть неприятной, например, когда они отображаются в одной строке. Чтобы упростить задачу, DevTools представил более удобную, свертываемую презентацию для подтипов JSON. Теперь эти ответы отформатированы, что избавляет разработчиков от необходимости полагаться на внешние инструменты. Этот редизайн предлагает простое и легко читаемое представление.
Положительные отзывы сообщества
Несмотря на то, что эти функции находятся только на ранних стадиях внедрения, реакция сообщества исключительно положительная. Их успешная реализация привела многих пользователей в восторг от улучшений, значительно улучшив их опыт. Вы можете прочитать некоторые ответы на X:
«О, это здорово! ChromeDevTools только что активизировал свою игру, показывая удобочитаемые коды состояния HTTP, что позволяет легче увидеть, что пошло не так с сетевым запросом», — TribalIdeas на X
«В последнее время это было очень полезно. Особенно при работе с формами с блокировщиками рекламы и расширениями грамматики», — MrAhmadAwais на X
Готовы изучить эти новые функции? Перейдите в Chrome DevTools и оцените улучшенную панель « Сеть». Удачной отладки!
Загрузите предварительный просмотр каналов
Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!
Связь с командой Chrome DevTools
Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.
- Отправьте нам предложение или отзыв через crbug.com .
- Сообщите о проблеме DevTools, используя дополнительные параметры.
> Справка > Сообщить о проблемах DevTools в DevTools. - Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .