Кто-то сказал вам «откройте вкладку «Сеть» и посмотрите, не падают ли какие-нибудь запросы», а теперь вы смотрите на панель, полную строк, цветов и столбцов, которые вам ещё ничего не говорят. Это самый короткий путь оттуда к ответу, который они искали.

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

Как её открыть

Chrome, Edge, Brave и остальные браузеры на Chromium. Нажмите F12 или Cmd + Option + I на Mac. Откроются инструменты разработчика; нажмите на вкладку Сеть вверху. Если вы её не видите, она находится за стрелкой » скрытых вкладок.

Firefox. Тот же F12, затем вкладка Сеть.

Safari. Вкладка Сеть находится в меню, которое по умолчанию отключено. Откройте Параметры, перейдите в Дополнительно и установите флажок Показывать возможности веб-разработчика. Затем Разработка, Показать Web Inspector, и вкладка Сеть будет там.

Панель почти всегда пуста при открытии, и это первое, что сбивает людей с толку.

Почему она пуста и как её заполнить

Вкладка «Сеть» записывает только то, пока она открыта. Она не запомнит, что произошло до того, как вы туда пришли, поэтому запросы, которые были отправлены при первой загрузке страницы, уже потеряны.

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

Один параметр стоит включить перед началом: Сохранять журнал (Firefox называет это тем же словом). Без этого страница, которая перенаправляется или перезагружается, стирает список, и запрос, который вы отслеживали, исчезает вместе с ним. Если это включено, список сохранится, и вы сможете увидеть запрос, который произошёл прямо перед тем, как страница изменилась.

Чтение строки

Каждая строка представляет один запрос. Слева направо, столбцы, которые важны:

  • Имя - файл или конечная точка, которые были запрошены
  • Статус - код HTTP, который был возвращён. Это то, что вас отправили посмотреть
  • Тип - что это было: документ, скрипт, изображение или fetch/xhr для вызова данных
  • Время - как долго это заняло

Цвета - это ярлык. Красная строка - это запрос, который не удался. Если кто-то сказал «посмотри, не падает ли что-нибудь», ты ищешь красное или статус 400 и выше.

Нажмите на любую строку, и откроется панель с подробностями: Заголовки для того, что было отправлено и получено, Ответ или Просмотр для того, что вернулось, и Время для того, куда ушло время. Для неудачного запроса Ответ обычно содержит объяснение сервера.

Что означает XHR, потому что это фильтр, который вам будут рекомендовать

Вверху панели находится строка фильтров: Все, Fetch/XHR, Документ, CSS, JS, Изображ.. «Откройте вкладку «Сеть» и отфильтруйте по XHR» - это распространённое указание, и XHR - самое неочевидное слово в нём.

XHR расшифровывается как XMLHttpRequest. На практике это означает запрос, который ваша страница сделала в фоне для получения данных, без загрузки новой страницы - способ современной веб-сети обновлять часть экрана без полной перезагрузки. Когда вы вводите текст в поле поиска и под ним появляются результаты, это XHR. Когда кнопка «Загрузить ещё» добавляет элементы без мигания страницы, это XHR.

Это название - исторический случай - исходная функция браузера была создана для XML, которой почти никто больше не пользуется; сегодня они переносят JSON. Его более новая замена - функция fetch(), поэтому фильтр называется Fetch/XHR: два названия, оба означающие одно и то же - запрос данных, а не страницы, изображения или таблицы стилей.

Нажатие на Fetch/XHR скрывает изображения, скрипты и шрифты и оставляет только вызовы данных, которые почти всегда содержат причину отказа сломанной функции. Кнопка, которая ничего не делает, обычно всё же отправила запрос; он прямо там, красный, с объяснением в его ответе.

Превращение этого в то, что можно отправить

Читать вкладку «Сеть» самостоятельно - это одно. Сложнее всего передать то, что вы увидели, тому, кто может это исправить, потому что скриншот панели теряет детали - заголовки, тело ответа, порядок, - которые на самом деле объясняют ошибку.

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

Если неудачный запрос возвращает «TypeError: Failed to fetch» в консоли и ничего полезного нет на вкладке «Сеть», этот конкретный случай имеет своё объяснение - это обычно означает, что запрос никогда не продвинулся достаточно далеко, чтобы вообще иметь статус.

Session Replay

Бесплатное расширение для Chrome. Один клик на странице, которая работает неправильно, захватывает скриншот, консоль и журнал сети и даёт вам ссылку для вставки в тикет.

Получить расширение

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