Откройте для себя новые способы анализа загрузки вашей страницы в этом подробном справочнике по функциям сетевого анализа Chrome DevTools.
Запись сетевых запросов
По умолчанию DevTools записывает все сетевые запросы на панели «Сеть» , пока DevTools открыт.
Прекратить запись сетевых запросов
Чтобы остановить запись запросов:
- Нажмите «Остановить запись сетевого журнала».
на панели «Сеть» . Он станет серым, что означает, что DevTools больше не записывает запросы.
- Нажмите Command > + E (Mac) или Control + E (Windows, Linux), когда панель «Сеть» находится в фокусе.
Очистить запросы
Нажмите «Очистить». на панели «Сеть» , чтобы удалить все запросы из таблицы «Запросы» .
Сохранять запросы при загрузке страниц
Чтобы сохранять запросы при загрузке страниц, установите флажок «Сохранить журнал» на панели «Сеть» . DevTools сохраняет все запросы, пока вы не отключите Preserve log .
Делайте снимки экрана во время загрузки страницы
Делайте снимки экрана, чтобы проанализировать, что видят пользователи, ожидая загрузки вашей страницы.
Чтобы включить снимки экрана, откройте «Настройки». на панели «Сеть» и установите флажок «Снимать снимки экрана» .
Перезагрузите страницу, пока панель «Сеть» находится в фокусе, чтобы сделать снимки экрана.
После захвата вы можете взаимодействовать со снимками экрана следующими способами:
- Наведите указатель мыши на снимок экрана, чтобы просмотреть точку, в которой он был сделан. На временной шкале обзора появится желтая линия.
- Щелкните миниатюру снимка экрана, чтобы отфильтровать все запросы, возникшие после того, как снимок экрана был сделан.
- Дважды щелкните миниатюру, чтобы увеличить ее.
Воспроизвести запрос XHR
Чтобы воспроизвести запрос XHR, выполните одно из следующих действий в таблице «Запросы» :
- Выберите запрос и нажмите R.
- Щелкните запрос правой кнопкой мыши и выберите «Воспроизвести XHR» .
Изменить поведение загрузки
Эмулируйте первого посетителя, отключив кеш браузера.
Чтобы имитировать то, как новый пользователь взаимодействует с вашим сайтом, установите флажок «Отключить кеш» . DevTools отключает кеш браузера. Это более точно имитирует работу нового пользователя, поскольку запросы обрабатываются из кеша браузера при повторных посещениях.
Отключите кеш браузера в ящике «Условия сети».
Если вы хотите отключить кеш во время работы в других панелях DevTools, используйте ящик «Сетевые условия» .
- Нажмите кнопку
значок, чтобы открыть ящик «Состояния сети» .
- Установите или снимите флажок Отключить кеш .
Очистите кэш браузера вручную
Чтобы вручную очистить кеш браузера в любое время, щелкните правой кнопкой мыши в любом месте таблицы «Запросы» и выберите «Очистить кеш браузера» .
Эмуляция в автономном режиме
Появился новый класс веб-приложений, называемый Progressive Web Apps , который может работать в автономном режиме с помощью сервис-воркеров . При создании приложения такого типа полезно иметь возможность быстро смоделировать устройство, не имеющее подключения для передачи данных.
Чтобы имитировать работу полностью автономной сети, выберите «Автономно» в раскрывающемся меню «Регулирование сети» рядом с флажком «Отключить кеш» .
DevTools отображает значок предупреждения рядом с вкладкой «Сеть» , чтобы напомнить вам, что автономный режим включен.
Эмулировать медленные сетевые соединения
Чтобы эмулировать быстрый 4G, медленный 4G или 3G, выберите соответствующую предустановку в раскрывающемся меню «Регулирование » на панели действий вверху.
DevTools отображает значок
рядом с панелью «Сеть» , чтобы напомнить вам, что регулирование включено.Создание пользовательских профилей регулирования
Помимо предустановок, таких как медленный или быстрый 4G, вы также можете добавить свои собственные профили регулирования:
- Откройте меню «Регулирование» и выберите «Пользовательский» > «Добавить...» .
- Настройте новый профиль регулирования, как описано в «Настройки» > «Регулирование» .
Вернувшись на панель «Сеть» , выберите новый профиль в раскрывающемся меню «Регулирование».
DevTools отображает значок предупреждения рядом с панелью «Сеть» , чтобы напомнить вам, что регулирование включено.
Регулирование подключений WebSocket
Помимо HTTP-запросов, DevTools регулирует соединения WebSocket, начиная с версии 99.
Чтобы наблюдать за регулированием WebSocket:
- Инициируйте новое соединение, например, с помощью инструмента тестирования .
- На панели «Сеть» выберите «Без регулирования» и отправьте сообщение через соединение.
- Создайте очень медленный собственный профиль регулирования , например,
10 kbit/s
. Такой медленный профиль поможет вам заметить разницу. - На панели «Сеть» выберите профиль и отправьте еще одно сообщение.
- Включите фильтр WS , щелкните имя своего соединения, откройте вкладку «Сообщения» и проверьте разницу во времени между отправленными и отраженными сообщениями с регулированием и без него. Например:
Эмулируйте медленные сетевые соединения из панели «Условия сети».
Если вы хотите ограничить сетевое соединение во время работы в других панелях DevTools, используйте ящик «Условия сети» .
- Нажмите кнопку
значок, чтобы открыть ящик «Состояния сети» .
- Выберите скорость соединения в меню регулирования сети .
Очистить файлы cookie браузера вручную
Чтобы вручную очистить файлы cookie браузера в любое время, щелкните правой кнопкой мыши в любом месте таблицы «Запросы» и выберите «Очистить файлы cookie браузера» .
Переопределить заголовки ответа HTTP
См . раздел Локальное переопределение файлов и заголовков ответов HTTP .
Переопределить пользовательский агент
Чтобы вручную переопределить пользовательский агент:
- Нажмите кнопку
значок, чтобы открыть ящик «Состояния сети» .
- Очистить Выбирать автоматически .
- Выберите вариант пользовательского агента в меню или введите собственный в поле.
Поисковые запросы
Для поиска по заголовкам запросов, полезным данным и ответам:
Нажмите следующий ярлык, чтобы открыть вкладку «Поиск» справа:
- В macOS нажмите Command + F.
- В Windows или Linux нажмите Control + F.
На вкладке «Поиск » введите запрос и нажмите Enter . При необходимости нажмите
или , чтобы включить чувствительность к регистру или регулярные выражения соответственно.Щелкните один из результатов поиска. На панели «Сеть» желтым цветом выделен соответствующий запрос. Кроме того, панель также открывает вкладку «Заголовки» или «Ответ» и выделяет строку, которая там соответствует, если таковая имеется.
Чтобы обновить результаты поиска, нажмите
» . Чтобы очистить результаты, нажмите Очистить» .Дополнительные сведения обо всех способах поиска в DevTools см. в разделе Поиск: поиск текста во всех загруженных ресурсах .
Фильтровать запросы
Фильтровать запросы по свойствам
Используйте поле «Фильтр» , чтобы фильтровать запросы по свойствам, таким как домен или размер запроса.
Если вы не видите это поле, возможно, панель фильтров скрыта. См. раздел Скрытие панели фильтров .
Чтобы инвертировать фильтр, установите флажок «Инвертировать» рядом с полем «Фильтр» .
Вы можете использовать несколько свойств одновременно, разделяя каждое свойство пробелом. Например, mime-type:image/gif larger-than:1K
отображает все GIF-файлы размером более одного килобайта. Эти фильтры с несколькими свойствами эквивалентны операциям AND. Операции OR не поддерживаются.
Далее приведен полный список поддерживаемых свойств.
-
cookie-domain
. Показать ресурсы, которые устанавливают определенный домен cookie . -
cookie-name
. Показать ресурсы, которые установили определенное имя файла cookie . -
cookie-path
. Показать ресурсы, которые устанавливают определенный путь к файлам cookie . -
cookie-value
. Показать ресурсы, которые устанавливают определенное значение файла cookie . -
domain
. Отображать ресурсы только из указанного домена. Вы можете использовать подстановочный знак (*
), чтобы включить несколько доменов. Например,*.com
отображает ресурсы всех доменных имен, заканчивающихся на.com
. DevTools показывает, что раскрывающееся меню автозаполнения заполняет все обнаруженные домены. -
has-overrides
. Показать запросы с переопределеннымcontent
,headers
, любыми переопределениями (yes
) или без переопределений (no
). Вы можете добавить соответствующий столбец « Имеет переопределения» в таблицу запросов. -
has-response-header
. Показать ресурсы, содержащие указанный заголовок ответа HTTP. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными заголовками ответов. -
is
. Используйтеis:running
для поиска ресурсовWebSocket
. -
larger-than
. Показывать ресурсы, размер которых превышает указанный, в байтах. Установка значения1000
эквивалентна установке значения1k
. -
method
. Показать ресурсы, полученные с помощью указанного типа метода HTTP. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными методами HTTP. -
mime-type
. Показать ресурсы указанного типа MIME. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными типами MIME. -
mixed-content
. Показать все ресурсы со смешанным контентом (mixed-content:all
) или только те, которые отображаются (mixed-content:displayed
). -
priority
. Показать ресурсы, уровень приоритета которых соответствует указанному значению. -
resource-type
. Показать ресурсы типа ресурса, например, изображения. DevTools заполняет раскрывающийся список автозаполнения всеми обнаруженными типами ресурсов. -
response-header-set-cookie
. Показывать необработанные заголовки Set-Cookie на вкладке «Проблемы». Неверно сформированные файлы cookie с неправильными заголовкамиSet-Cookie
будут отмечены на панели «Сеть». -
scheme
. Показать ресурсы, полученные по незащищенному HTTP (scheme:http
) или защищенному HTTPS (scheme:https
). -
set-cookie-domain
. Показать ресурсы, имеющие заголовокSet-Cookie
с атрибутомDomain
, соответствующим указанному значению. DevTools заполняет автозаполнение всеми обнаруженными доменами файлов cookie. -
set-cookie-name
. Показать ресурсы, имеющие заголовокSet-Cookie
с именем, соответствующим указанному значению. DevTools заполняет автозаполнение всеми обнаруженными именами файлов cookie. -
set-cookie-value
. Показать ресурсы, имеющие заголовокSet-Cookie
со значением, соответствующим указанному значению. DevTools заполняет автозаполнение всеми обнаруженными значениями файлов cookie. -
status-code
. Показывать только ресурсы, код состояния HTTP которых соответствует указанному коду. DevTools заполняет раскрывающееся меню автозаполнения всеми обнаруженными кодами состояния. -
url
. Показать ресурсы,url
которых соответствует указанному значению.
Фильтровать запросы по типу
Чтобы отфильтровать запросы по типу ресурса, нажмите кнопки All , Fetch/XHR , JS , CSS , Img , Media , Font , Doc , WS (WebSocket), Wasm (WebAssembly), Manifest или Other (любой другой тип, не указанный здесь) на панели «Сеть» .
Если вы не видите эти кнопки, вероятно, панель действий «Фильтры» скрыта. См. раздел Скрытие панели фильтров .
Чтобы одновременно отобразить ресурсы нескольких типов, удерживайте кнопку «Command» (Mac) или «Control» (Windows, Linux), а затем щелкните несколько фильтров типов.
Фильтровать запросы по времени
Перетащите влево или вправо на временной шкале «Обзор», чтобы отобразить только те запросы, которые были активны в течение этого периода времени. Фильтр включен. Отображаются все запросы, которые были активны в течение выделенного времени.
Скрыть URL-адреса данных
URL-адреса данных — это небольшие файлы, встроенные в другие документы. Любой запрос, который вы видите в таблице «Запросы» , который начинается с data:
является URL-адресом данных.
Чтобы скрыть эти запросы, на панели действий «Фильтры » выберите «Дополнительные фильтры» >
Скрыть URL-адреса данных» .В строке состояния внизу отображается количество показанных запросов из общего числа.
Скрыть URL-адреса расширений
Чтобы сосредоточиться на написанном вами коде, вы можете отфильтровать ненужные запросы, отправленные расширениями, которые вы, возможно, установили в Chrome. Запросы на расширение имеют URL-адреса, начинающиеся с chrome-extension://
.
Чтобы скрыть запросы расширений, на панели действий «Фильтры » выберите «Дополнительные фильтры» >
«Скрыть URL-адреса расширений» .В строке состояния внизу отображается количество показанных запросов из общего числа.
Показывать только запросы с заблокированными ответными файлами cookie
Чтобы отфильтровать все, кроме запросов с ответными файлами cookie, заблокированными по какой-либо причине, на панели действий «Фильтры» выберите «Дополнительные фильтры» > демонстрационной странице .
«Заблокировать файлы cookie ответа» . Попробуйте это на этойВ строке состояния внизу отображается количество показанных запросов из общего числа.
Чтобы узнать причину блокировки ответного файла cookie, выберите запрос, откройте вкладку «Файлы cookie» и наведите указатель мыши на значок
.Кроме того, на панели «Сеть» рядом с запросом, файлы cookie которого заблокированы из-за флагов или конфигурации Chrome, отображается значок
. Наведите указатель мыши на значок, чтобы увидеть всплывающую подсказку с подсказкой, и щелкните ее, чтобы перейти на панель «Проблемы» для получения дополнительной информации.Показать только заблокированные запросы
Чтобы отфильтровать все, кроме заблокированных запросов, на панели действий «Фильтры » выберите «Дополнительные фильтры» > «Блокировка сетевых запросов» в ящике.
«Заблокированные запросы» . Чтобы проверить это, вы можете использовать вкладкуВ таблице «Запросы» заблокированные запросы выделены красным цветом. В строке состояния внизу отображается количество показанных запросов из общего числа.
Показывать только сторонние запросы
Чтобы отфильтровать все, кроме запросов с источником, отличным от источника страницы, на панели действий «Фильтры» выберите «Дополнительные фильтры» > демонстрационной странице .
сторонних запросов» . Попробуйте это на этойВ строке состояния внизу отображается количество показанных запросов из общего числа.
Сортировка запросов
По умолчанию запросы в таблице «Запросы» сортируются по времени инициации, но вы можете отсортировать таблицу по другим критериям.
Сортировать по столбцу
Щелкните заголовок любого столбца в таблице «Запросы» , чтобы отсортировать запросы по этому столбцу.
Сортировать по фазе активности
Чтобы изменить способ сортировки запросов Waterfall , щелкните правой кнопкой мыши заголовок таблицы Requests, наведите указатель мыши на Waterfall и выберите один из следующих параметров:
- Время начала . Первый инициированный запрос находится вверху.
- Время ответа . Первый запрос, который начал загрузку, находится вверху.
- Конец Времени . Первый завершенный запрос находится вверху.
- Общая продолжительность . Запрос с самой короткой настройкой соединения и запрос/ответ находится вверху.
- Задержка . Запрос, ожидавший ответа меньше всего, находится вверху.
В этих описаниях предполагается, что каждый соответствующий вариант ранжируется от самого короткого к самому длинному. Нажатие на заголовок столбца «Водопад» меняет порядок на обратный.
В этом примере водопад сортируется по общей продолжительности. Более светлая часть каждой полосы — это время ожидания. Более темная часть — это время, потраченное на загрузку байтов.
Анализируйте запросы
Пока DevTools открыт, он регистрирует все запросы на панели «Сеть» . Используйте панель «Сеть» для анализа запросов.
Посмотреть журнал запросов
Используйте таблицу «Запросы» , чтобы просмотреть журнал всех запросов, сделанных во время открытия DevTools. При нажатии или наведении курсора мыши на запросы можно получить дополнительную информацию о них.
В таблице «Запросы» по умолчанию отображаются следующие столбцы:
- Имя . Имя файла или идентификатор ресурса.
Статус . В этом столбце могут отображаться следующие значения:
- Код состояния HTTP, например,
200
или404
. -
CORS error
для запросов не удалась из-за совместного использования ресурсов между источниками (CORS). -
(blocked:origin)
для запросов с неправильно настроенными заголовками. Наведите указатель мыши на это значение статуса, чтобы увидеть всплывающую подсказку с подсказкой о том, что пошло не так. -
(failed)
за которым следует сообщение об ошибке.
- Код состояния HTTP, например,
Тип . MIME-тип запрошенного ресурса.
Инициатор . Следующие объекты или процессы могут инициировать запросы:
- Парсер . HTML-парсер Chrome.
- Перенаправление . HTTP-перенаправление.
- Скрипт . Функция JavaScript.
- Другой . Какой-либо другой процесс или действие, например переход на страницу по ссылке или ввод URL-адреса в адресную строку.
Размер . Общий размер заголовков ответа плюс тело ответа, доставленное сервером.
Время . Общая продолжительность от начала запроса до получения последнего байта ответа.
Водопад . Визуальная разбивка активности каждого запроса.
Добавить или удалить столбцы
Щелкните правой кнопкой мыши заголовок таблицы «Запросы» и выберите параметр, чтобы скрыть или отобразить ее. Рядом с отображаемыми параметрами отмечены флажки.
Вы можете добавить или удалить следующие дополнительные столбцы: Путь , URL-адрес , Метод , Протокол , Схема , Домен , Удаленный адрес , Удаленное адресное пространство , Адресное пространство инициатора , Файлы cookie , Установить файлы cookie , Приоритет , Идентификатор соединения , Имеет переопределения и Водопад .
Добавить пользовательские столбцы
Чтобы добавить пользовательский столбец в таблицу «Запросы» , выполните следующие действия:
- Щелкните правой кнопкой мыши заголовок таблицы « Запросы» и выберите «Заголовки ответов» > «Управление столбцами заголовков» .
- В диалоговом окне нажмите «Добавить пользовательский заголовок» , введите его имя и нажмите «Добавить» .
Группировать запросы по встроенным фреймам
Если встроенные фреймы на странице инициируют много запросов, вы можете сделать журнал запросов более удобным, сгруппировав их.
Чтобы сгруппировать запросы по iframe, откройте «Настройки» внутри панели «Сеть» и установите Группировать по кадру ».
Чтобы просмотреть запрос, инициированный встроенным фреймом, разверните его в журнале запросов.
Просмотр времени выполнения запросов относительно друг друга
Используйте водопад , чтобы просмотреть время выполнения запросов относительно друг друга. По умолчанию водопад организован по времени начала запросов. Таким образом, запросы, расположенные левее, стартовали раньше, чем запросы, расположенные правее.
См. раздел Сортировка по фазам активности , чтобы узнать о различных способах сортировки водопада .
Анализ сообщений соединения WebSocket
Чтобы просмотреть сообщения соединения WebSocket:
- В столбце «Имя» таблицы «Запросы » щелкните URL-адрес подключения WebSocket.
- Откройте вкладку «Сообщения» . В таблице показаны последние 100 сообщений.
Чтобы обновить таблицу, еще раз щелкните имя соединения WebSocket в столбце «Имя» таблицы «Запросы» .
Таблица содержит три столбца:
- Данные . Полезная нагрузка сообщения. Если сообщение представляет собой обычный текст, оно отображается здесь. Для двоичных кодов операций в этом столбце отображаются имя и код кода операции. Поддерживаются следующие коды операций: кадр продолжения, двоичный кадр, кадр закрытия соединения, кадр Ping и кадр Pong.
- Длина . Длина полезных данных сообщения в байтах.
- Время . Время получения или отправки сообщения.
Сообщения имеют цветовую маркировку в зависимости от их типа:
- Исходящие текстовые сообщения имеют светло-зеленый цвет.
- Входящие текстовые сообщения имеют белый цвет.
- Коды операций WebSocket имеют светло-желтый цвет.
- Ошибки имеют светло-красный цвет.
Анализ событий в потоке
Чтобы просмотреть события, которые серверы передают через Fetch API , EventSource API и XHR:
- Записывайте сетевые запросы на странице, которая транслирует события. Например, откройте эту демонстрационную страницу и нажмите любую из трех кнопок.
- В Network выберите запрос и откройте вкладку EventStream .
Чтобы фильтровать события, укажите регулярное выражение в строке фильтров в верхней части вкладки EventStream .
Чтобы очистить список зафиксированных событий, нажмите
Очистить» .Предварительный просмотр тела ответа
Чтобы просмотреть предварительный просмотр тела ответа:
- Щелкните URL-адрес запроса в столбце «Имя» таблицы « Запросы» .
- Откройте вкладку «Предварительный просмотр» .
Эта вкладка в основном полезна для просмотра изображений.
Просмотр тела ответа
Чтобы просмотреть тело ответа на запрос:
- Щелкните URL-адрес запроса в столбце «Имя» таблицы «Запросы».
- Откройте вкладку «Ответ» .
Просмотр HTTP-заголовков
Чтобы просмотреть данные HTTP-заголовка запроса:
- Щелкните запрос в таблице «Запросы» .
- Откройте вкладку «Заголовки» и прокрутите вниз до разделов «Общие» , «Заголовки ответов» , «Заголовки запросов» и, при необходимости, «Заголовки ранних подсказок» .
В разделе «Общие» DevTools отображает удобочитаемое сообщение о состоянии рядом с полученным кодом состояния HTTP.
В разделе «Заголовки ответов» вы можете навести указатель мыши на значение заголовка и нажать кнопку локально переопределить заголовок ответа .
» , чтобыПросмотр источника HTTP-заголовка
По умолчанию на вкладке «Заголовки» имена заголовков отображаются в алфавитном порядке. Чтобы просмотреть имена HTTP-заголовков в порядке их получения:
- Откройте вкладку «Заголовки» для интересующего вас запроса. См. Просмотр заголовков HTTP .
- Нажмите «Просмотреть источник » рядом с разделом «Заголовок запроса» или «Заголовок ответа» .
Предупреждение о предварительных заголовках
Иногда на вкладке «Заголовки» отображается предупреждение Provisional headers are shown...
. Это может быть связано со следующими причинами:
Запрос не был отправлен по сети, а был обработан из локального кеша, в котором не хранятся исходные заголовки запроса. В этом случае вы можете отключить кеширование , чтобы увидеть полные заголовки запросов.
Сетевой ресурс недействителен. Например, выполните
fetch("https://jec.fish.com/unknown-url/")
в консоли .
DevTools также может отображать только предварительные заголовки по соображениям безопасности.
Просмотр полезных данных запроса
Чтобы просмотреть полезную нагрузку запроса, то есть его параметры строки запроса и данные формы, выберите запрос в таблице «Запросы» и откройте вкладку «Полезная нагрузка» .
Просмотр источника полезной нагрузки
По умолчанию DevTools отображает полезную нагрузку в удобочитаемой форме.
Чтобы просмотреть источники параметров строки запроса и данных формы, на вкладке « Полезные данные » нажмите «Просмотреть источник» рядом с разделами «Параметры строки запроса» или «Данные формы» .
Просмотр декодированных URL-адресов аргументов параметров строки запроса
Чтобы переключить кодировку URL-адреса для аргументов, на вкладке « Полезные данные » нажмите «Просмотр в декодированном виде» или «Просмотр в кодировке URL-адреса» .
Просмотр файлов cookie
Чтобы просмотреть файлы cookie, отправленные в HTTP-заголовке запроса:
- Щелкните URL-адрес запроса в столбце «Имя» таблицы «Запросы».
- Откройте вкладку «Файлы cookie» .
Описание каждого столбца см. в разделе Поля .
Чтобы изменить файлы cookie, см . Просмотр, редактирование и удаление файлов cookie .
Просмотр временной разбивки запроса
Чтобы просмотреть временную разбивку запроса:
- Щелкните URL-адрес запроса в столбце «Имя» таблицы « Запросы» .
- Откройте вкладку «Время» .
См. раздел Предварительный просмотр временной разбивки для более быстрого доступа к этим данным.
Дополнительные сведения о каждой фазе, которые вы можете увидеть на вкладке «Время» , см. в разделе «Фазы разбивки по времени» .
Предварительный просмотр разбивки по времени
Чтобы просмотреть временную разбивку запроса, наведите указатель мыши на запись запроса в столбце «Каскад» таблицы «Запросы».
См. раздел Просмотр временной разбивки запроса, чтобы узнать, как получить доступ к этим данным без наведения курсора.
Объяснение фаз временной разбивки
Более подробную информацию о каждом этапе вы можете увидеть на вкладке «Время» :
- Очередь . Браузер ставит запросы в очередь перед началом соединения и когда:
- Есть запросы с более высоким приоритетом. Приоритет запроса определяется такими факторами, как тип ресурса, а также его расположение в документе. Для получения дополнительной информации прочтите раздел приоритета ресурсов руководства
fetchpriority
. - Для этого источника уже открыто шесть TCP-соединений, что является пределом. (Применимо только к HTTP/1.0 и HTTP/1.1.)
- Браузер ненадолго выделяет место в дисковом кеше.
- Есть запросы с более высоким приоритетом. Приоритет запроса определяется такими факторами, как тип ресурса, а также его расположение в документе. Для получения дополнительной информации прочтите раздел приоритета ресурсов руководства
- Застопорился . Запрос мог быть остановлен после начала соединения по любой из причин, описанных в разделе «Очередь» .
- DNS-поиск . Браузер обрабатывает IP-адрес запроса.
- Первоначальное подключение . Браузер устанавливает соединение, включая TCP-квитирование или повторные попытки, а также согласование SSL.
- Переговоры по прокси . Браузер согласовывает запрос с прокси-сервером .
- Запрос отправлен . Запрос отправляется.
- Подготовка ServiceWorker . Браузер запускает сервис-воркера.
- Запрос к ServiceWorker . Запрос отправляется сервисному работнику.
- Ожидание (TTFB) . Браузер ожидает первого байта ответа. TTFB означает время до первого байта. Это время включает в себя 1 задержку туда и обратно и время, необходимое серверу для подготовки ответа.
- Загрузка контента . Браузер получает ответ либо непосредственно из сети, либо от сервис-воркера. Это значение представляет собой общее количество времени, потраченное на чтение тела ответа. Значения, превышающие ожидаемые, могут указывать на медленную работу сети или на то, что браузер занят выполнением другой работы, которая задерживает чтение ответа.
Просмотр инициаторов и зависимостей
Чтобы просмотреть инициаторов и зависимости запроса, удерживайте клавишу Shift и наведите курсор на запрос в таблице «Запросы». DevTools окрашивает инициаторы в зеленый цвет, а зависимости в красный.
Когда таблица «Запросы» упорядочена в хронологическом порядке, первый зеленый запрос над запросом, над которым вы наводите курсор, является инициатором зависимости. Если над этим есть еще один зеленый запрос, то этот более высокий запрос является инициатором инициатора. И так далее.
Просмотр событий загрузки
DevTools отображает время DOMContentLoaded
и событий load
в нескольких местах на панели «Сеть» . Событие DOMContentLoaded
окрашено в синий цвет, а событие load
— в красный.
Посмотреть общее количество запросов
Общее количество запросов указано в строке состояния в нижней части панели «Сеть» .
Просмотр общего размера переданных и загруженных ресурсов
DevTools отображает общий размер переданных и загруженных (несжатых) ресурсов в строке состояния в нижней части панели «Сеть» .
См. раздел Просмотр несжатого размера ресурса, чтобы узнать, насколько велики ресурсы после того, как браузер их распакует.
Просмотрите трассировку стека, вызвавшую запрос.
Когда оператор JavaScript вызывает запрос ресурса, наведите указатель мыши на столбец «Инициатор», чтобы просмотреть трассировку стека, ведущую к запросу.
Просмотр несжатого размера ресурса
Проверьте настройки > Большие строки запроса , а затем посмотрите на нижнее значение столбца Размер .
В этом примере сжатый размер документа www.google.com
, отправленного по сети, составлял 43.8 KB
, тогда как несжатый размер составлял 136 KB
.
Экспорт данных запросов
Вы можете экспортировать или скопировать список запросов с примененными фильтрами несколькими способами, описанными ниже.
Сохраняйте все сетевые запросы в файл HAR.
HAR (HTTP-архив) — это формат файла, используемый несколькими инструментами сеансов HTTP для экспорта захваченных данных. Формат представляет собой объект JSON с определенным набором полей.
Чтобы снизить вероятность случайной утечки конфиденциальной информации, по умолчанию вы можете экспортировать «очищенный» сетевой журнал в формате HAR, который исключает конфиденциальную информацию, такую как заголовки Cookie
, Set-Cookie
и Authorization
. При необходимости вы также можете экспортировать журнал с конфиденциальными данными.
Чтобы сохранить все сетевые запросы в файл HAR, выберите один из двух способов:
Щелкните правой кнопкой мыши любой запрос в таблице «Запросы» и выберите «Копировать » > «Сохранить все [в списке] как HAR (очищенные)» или «Сохранить все [в списке] как HAR (с конфиденциальными данными)» .
Нажмите
Экспортировать HAR (дезинфицированный)...» на панели действий в верхней части панели «Сеть» .Чтобы экспортировать конфиденциальные данные, сначала включите
«Настройки» > «Настройки» > «Сеть» > «Разрешить генерировать HAR с конфиденциальными данными» , затем нажмите кнопку «Экспорт» и выберите «Экспортировать HAR (с конфиденциальными данными)» в раскрывающемся меню.
Получив файл HAR, вы можете импортировать его обратно в DevTools для анализа двумя способами:
- Перетащите файл HAR в таблицу «Запросы» .
- Нажмите Импортировать HAR» на панели действий в верхней части панели «Сеть» .
Скопируйте запрос, отфильтрованный набор запросов или все в буфер обмена.
В столбце «Имя» таблицы «Запросы» щелкните запрос правой кнопкой мыши, наведите указатель мыши на «Копировать» и выберите один из следующих параметров.
Чтобы скопировать один запрос, его ответ или трассировку стека:
- Скопировать URL-адрес . Скопируйте URL-адрес запроса в буфер обмена.
- Скопируйте как cURL . Скопируйте запрос как команду cURL.
- Скопируйте как PowerShell . Скопируйте запрос как команду PowerShell.
- Копировать как получить . Скопируйте запрос как вызов выборки.
- Копировать как выборку (Node.js) . Скопируйте запрос как вызов выборки Node.js.
- Скопируйте ответ . Скопируйте тело ответа в буфер обмена.
- Скопировать трассировку стека . Скопируйте дорожку стека запроса в буфер обмена.
Чтобы скопировать все запросы:
- Скопируйте все URL-адреса . Скопируйте URL-адреса всех запросов в буфер обмена.
- Скопируйте все как cURL . Скопируйте все запросы в виде цепочки команд cURL.
- Скопируйте все как PowerShell . Скопируйте все запросы в виде цепочки команд PowerShell.
- Скопируйте все как fetch . Скопируйте все запросы в виде цепочки вызовов выборки.
- Скопируйте все как fetch (Node.js) . Скопируйте все запросы в виде цепочки вызовов выборки Node.js.
- Скопируйте все как HAR (дезинфицировано) . Скопируйте все запросы как данные HAR без конфиденциальных данных, таких как заголовки
Cookie
,Set-Cookie
иAuthorization
. - Скопируйте все как HAR (с конфиденциальными данными) . Скопируйте все запросы как данные HAR с конфиденциальными данными.
Чтобы скопировать отфильтрованный набор запросов, примените фильтр к сетевому журналу, щелкните запрос правой кнопкой мыши и выберите:
- Скопируйте все перечисленные URL-адреса . Скопируйте URL-адреса всех отфильтрованных запросов в буфер обмена.
- Скопируйте все, что указано как cURL . Скопируйте все отфильтрованные запросы в виде цепочки команд cURL.
- Скопируйте все, что указано как PowerShell . Скопируйте все отфильтрованные запросы в виде цепочки команд PowerShell.
- Скопируйте все перечисленное как fetch . Скопируйте все отфильтрованные запросы в виде цепочки вызовов выборки.
- Скопируйте все перечисленное как fetch (Node.js) . Скопируйте все отфильтрованные запросы в виде цепочки вызовов выборки Node.js.
- Скопируйте все, что указано как HAR (дезинфицировано) . Скопируйте все отфильтрованные запросы как данные HAR без конфиденциальных данных, таких как заголовки
Cookie
,Set-Cookie
иAuthorization
. - Скопируйте все, что указано как HAR (с конфиденциальными данными) . Скопируйте все отфильтрованные запросы как данные HAR с конфиденциальными данными.
Изменение макета панели «Сеть»
Разверните или сверните разделы пользовательского интерфейса панели «Сеть» , чтобы сосредоточиться на том, что важно для вас.
Скрыть панель действий «Фильтры»
По умолчанию DevTools отображает панель фильтров в верхней части панели «Сеть» . Нажмите Фильтр , чтобы скрыть его.
Используйте большие строки запросов
Используйте большие строки, если вам нужно больше пробелов в таблице сетевых запросов. Некоторые столбцы также предоставляют немного больше информации при использовании больших строк. Например, нижнее значение столбца «Размер» — это несжатый размер запроса, а столбец «Приоритет» показывает как начальный (нижнее значение), так и окончательный (верхнее значение) приоритет выборки.
Открыть настройки и нажмите «Большие строки запроса», чтобы увидеть большие строки.
Скрыть обзорную дорожку
По умолчанию DevTools отображает дорожку «Обзор» . Открыть настройки и снимите флажок «Показать обзор», чтобы скрыть его.
Откройте для себя новые способы проанализировать, как загружается ваша страница в этой комплексной ссылке функций анализа сети Chrome Devtools.
Запись сетевых запросов
По умолчанию DevTools записывает все сетевые запросы на сетевой панели, пока DevTools открыты.
Прекратите записывать сетевые запросы
Чтобы прекратить запись запросов:
- Нажмите «Остановить регистрацию журнала сети»
на сетевой панели. Серытся, чтобы указать, что DevTools больше не записывает запросы.
- Нажмите команду > + e (mac) или control + e (Windows, Linux), пока сетевая панель находится в фокусе.
Четкие запросы
Нажмите Clear На панели сети , чтобы очистить все запросы из таблицы запросов .
Сохранить запросы по страницам загрузки
Чтобы сохранить запросы по нагрузкам страницы, проверьте флажок журнала «Сохранение» на сетевой панели. DevTools сохраняет все запросы, пока вы не отключите журнал сохраните .
Сделайте скриншоты во время загрузки страницы
Сделайте скриншоты, чтобы проанализировать то, что пользователи видят, ожидая загрузки вашей страницы.
Чтобы включить скриншоты, открывают настройки Внутри сетевой панели и проверьте скриншоты захвата .
Перезагрузите страницу, пока сетевая панель находится в фокусе, чтобы запечатлеть скриншоты.
После захвата вы можете взаимодействовать с скриншотами следующими способами:
- Вернитесь на скриншот, чтобы просмотреть точку, в которой этот скриншот был зафиксирован. Желтая линия появляется на временной шкале обзора .
- Нажмите на миниатюру экрана, чтобы отфильтровать любые запросы, которые произошли после того, как снимки экрана были сняты.
- Дважды щелкните миниатюр, чтобы увеличить его.
Воспроизведите запрос XHR
Чтобы воспроизвести запрос XHR, сделайте один из следующих действий в таблице запросов :
- Выберите запрос и нажмите r .
- Щелкните правой кнопкой мыши запрос и выберите Replay XHR .
Изменить поведение нагрузки
Эмулировать первого посетителя, отключив кеш браузера
Чтобы эмулировать, как впервые испытывает ваш сайт, проверьте флажок «Отключить кэш» . Devtools отключает кеш браузера. Это более точно эмулирует опыт пользователя в первый раз, потому что запросы обслуживаются из кэша браузера при повторных посещениях.
Отключить кеш браузера из ящика условий сети
Если вы хотите отключить кэш во время работы на других панелях Devtools, используйте ящик для условий сети .
- Нажмите
Значок, чтобы открыть ящик для условий сети .
- Проверьте или очистите флажок «Отключить кэш» .
Вручную очистить кеш браузера
Чтобы вручную очистить кэш браузера в любое время, щелкните правой кнопкой мыши в любом месте в таблице запросов и выберите Clear Browser Cache .
Эмулировать офлайн
Существует новый класс веб -приложений, называемых Progressive Web Apps , которые могут функционировать в автономном режиме с помощью работников обслуживания . Когда вы создаете этот тип приложения, полезно иметь возможность быстро имитировать устройство, у которого нет подключения к данным.
Чтобы моделировать совершенно автономный опыт сети, выберите в автономном режиме в раскрывающемся меню с помощью сетевого дросселя рядом с флажком отключения кэша .
Devtools отображает значок предупреждения рядом с вкладкой Network , чтобы напомнить вам, что автономный режим включен.
Эмулировать медленные сетевые подключения
Чтобы подражать быстрое 4G, медленное 4G или 3G, выберите соответствующую предустановку в выпадающем меню с дросселем в панели действий наверху.
Devtools отображает значок предупреждения о
рядом с сетевой панелью, чтобы напомнить вам, что дросселя включена.Создать индивидуальные дроссельные профили
В дополнение к пресетам, таким как медленный или быстрый 4G, вы также можете добавить свои собственные профили дросселя:
- Откройте меню дросселя и выберите Custom > Добавить ....
- Установите новый профиль дросселя, как описано в настройки > дроссель .
Вернувшись на сетевую панель, выберите свой новый профиль в раскрывающемся меню с дросселем .
Devtools отображает Значок предупреждения рядом с сетевой панелью, чтобы напомнить вам, что включен дроссель.
Соединения дроссельной заслонки
В дополнение к HTTP -запросам, DevTools Devtols Drottles WebSocket подключено с версии 99.
Наблюдать за дроссельностью WebSocket:
- Например, инициируйте новое соединение, используя тестовый инструмент .
- На сетевой панели выберите отсутствие дросселирования и отправьте сообщение через соединение.
- Создайте очень медленный индивидуальный дроссельный профиль , например,
10 kbit/s
. Такой медленный профиль поможет вам заметить разницу. - На сетевой панели выберите профиль и отправьте другое сообщение.
- Переключите фильтр WS , щелкните имя подключения, откройте вкладку «Сообщения» и проверьте разницу во времени между отправленными и эхо -сообщением с помощью дросселирования и без него. Например:
Эмулировать медленные сетевые подключения из ящика условий сети
Если вы хотите запустить сетевое соединение во время работы на других панелях Devtools, используйте ящик для условий сети .
- Нажмите
Значок, чтобы открыть ящик для условий сети .
- Выберите скорость подключения в меню «Дроить сеть» .
Вручную чистое печенье для браузера
Чтобы в любое время очистить файлы cookie вручную вручную, щелкните правой кнопкой мыши в любом месте в таблице запросов и выберите Clear Browser Cookie .
Переопределить заголовки ответов HTTP
См. Переопределение файлов и заголовки ответов HTTP локально .
Переопределить пользовательский агент
Чтобы вручную переопределить пользовательский агент:
- Нажмите
Значок, чтобы открыть ящик для условий сети .
- Очистить выберите автоматически .
- Выберите опцию пользовательского агента из меню или введите пользовательский в поле.
Поисковые запросы
Чтобы найти заголовки запросов, полезные нагрузки и ответы:
Нажмите следующий ярлык, чтобы открыть вкладку поиска справа:
- На macOS, команда + f .
- В Windows или Linux, Control + F.
На вкладке «Поиск» введите свой запрос и нажмите Enter Enter . Необязательно нажмите
или чтобы включить чувствительность или регулярные выражения соответственно.Нажмите на один из результатов поиска. Сетевая панель подчеркивает желтый запрос, который соответствует. Кроме того, панель также открывает вкладку «Заголовки» или «Ответ» и выделяет соответствующую там строку, если таковые имеются.
Чтобы обновить результаты поиска, нажмите
обновление» . Чтобы очистить результаты, нажмите Clear .Для получения дополнительной информации обо всех способах поиска в Devtools см. Поиск: Найдите текст во всех загруженных ресурсах .
Запросы фильтра
Запросы фильтров по свойствам
Используйте поле «Фильтр» для фильтрации запросов по свойствам, таким как домен или размер запроса.
Если вы не видите коробку, прунка фильтров , вероятно, скрыта. Смотрите, скрыть бар фильтров .
Чтобы инвертировать свой фильтр, проверьте флажок Invert рядом с полевым полетом.
Вы можете использовать несколько свойств одновременно, разделяя каждое свойство с пространством. Например, mime-type:image/gif larger-than:1K
отображает все GIF-файлы, которые больше, чем один килобит. Эти мульти-проектные фильтры эквивалентны и операциям. Или операции не поддерживаются.
Следующим является полный список поддерживаемых свойств.
-
cookie-domain
. Покажите ресурсы, которые устанавливают конкретный домен cookie . -
cookie-name
. Покажите ресурсы, которые устанавливают конкретное название cookie . -
cookie-path
. Покажите ресурсы, которые устанавливают определенный путь cookie . -
cookie-value
. Покажите ресурсы, которые устанавливают конкретную ценность cookie . -
domain
. Отображать только ресурсы из указанного домена. Вы можете использовать символ подстановочного знака (*
), чтобы включить несколько доменов. Например,*.com
отображает ресурсы от всех доменных имен, заканчивающихся.com
. Devtools показывает популярное раскрывающееся меню автозаполнения со всеми доменами, с которыми он столкнулся. -
has-overrides
. Показать запросы, которые имеют переопределенныйcontent
,headers
, любые переопределения (yes
) или нет переопределения (no
). Вы можете добавить соответствующий стол, который переопределяет столбец в таблицу запросов. -
has-response-header
. Покажите ресурсы, которые содержат указанный заголовок ответа HTTP. Devtools заполняет выпаданию автозаполнения всеми заголовками ответов, с которыми он столкнулся. -
is
. Использованиеis:running
, чтобы найти ресурсыWebSocket
. -
larger-than
. Показать ресурсы, которые больше, чем указанный размер, в байтах. Установка значения1000
эквивалентно установке значения1k
. -
method
Показать ресурсы, которые были извлечены по указанному типу метода HTTP. Devtools заполняет выпаданию автозаполнения всеми методами HTTP, с которыми он столкнулся. -
mime-type
. Показать ресурсы указанного типа MIME. Devtools заполняет выпаданию автозаполнения всеми типами MIME, с которыми он столкнулся. -
mixed-content
. Покажите все ресурсы смешанного контента (mixed-content:all
) или только те, которые отображаются (mixed-content:displayed
). -
priority
. Показать ресурсы, уровень приоритета, соответствует указанному значению. -
resource-type
. Показать ресурсы типа ресурса, например, изображение. Devtools заполняет выпаданию автозаполнения всеми типами ресурсов, с которыми он столкнулся. -
response-header-set-cookie
. Покажите необработанные заголовки Set-Cookie на вкладке «Проблемы». Узоловые файлы cookie с неправильными заголовкамиSet-Cookie
будут помечены на сетевой панели. -
scheme
. Покажите ресурсы, полученные через незащищенные HTTP (scheme:http
) или защищенные HTTPS (scheme:https
). -
set-cookie-domain
. Покажите ресурсы, которые имеют заголовокSet-Cookie
с атрибутомDomain
, который соответствует указанному значению. Devtools заполняет автозаполнение всеми доменами cookie, с которыми он столкнулся. -
set-cookie-name
. Покажите ресурсы, которые имеют заголовокSet-Cookie
с именем, соответствующим указанному значению. Devtools заполняет автозаполнение всеми именами печенья, с которыми он столкнулся. -
set-cookie-value
. Покажите ресурсы, которые имеют заголовокSet-Cookie
со значением, которое соответствует указанному значению. Devtools заполняет автозаполнение всеми значениями cookie, с которыми он столкнулся. -
status-code
. Только показывают ресурсы, чей код состояния HTTP соответствует указанному коду. Devtools заполняет выпадающее меню автозаполнения всеми кодами состояния, с которым он столкнулся. -
url
Покажите ресурсы, которые имеютurl
, соответствующий указанному значению.
Запросы фильтров по типу
Чтобы отфильтровать запросы по типу ресурса, нажмите All , Fetch/XHR , JS , CSS , IMG , Media , Font , DOC , WS (WebSocket), WASM (Webassembly), Manifest или другие (любой другой тип, не указанный здесь) на панели сети .
Если вы не видите эти кнопки, панель действий фильтров , вероятно, скрыта. Смотрите, скрыть бар фильтров .
Чтобы отобразить ресурсы нескольких типов одновременно, удерживайте команду (Mac) или Control (Windows, Linux), а затем нажмите несколько фильтров типа.
Запросы на фильтр по времени
Перетащите влево или вправо по временной шкале обзора , чтобы отобразить только запросы, которые были активны в течение этого периода времени. Фильтр включительно. Любой запрос, который был активен в выделенное время, показан.
Скрыть URL -адреса данных
URL -адреса данных представляют собой небольшие файлы, встроенные в другие документы. Любой запрос, который вы видите в таблице запросов , которая начинается с data:
это URL -адрес данных.
Чтобы скрыть эти запросы, в панели действий фильтров выберите больше фильтров >
HIDE URL -адреса данных .Строка состояния внизу отображает количество показанных запросов из общего числа.
Скрыть удлинительные URL -адреса
Чтобы сосредоточиться на коде, который вы можете, вы можете отфильтровать не относящиеся к делу запросы, отправленные расширениями, которые вы могли установить в Chrome. Запросы на расширение имеют URL-адреса, которые начинаются с chrome-extension://
.
Чтобы скрыть запросы на расширение, в панели действий фильтров выберите больше фильтров >
HIDE URL -адреса расширения .Строка состояния внизу отображает количество показанных запросов из общего числа.
Покажите только запросы с заблокированными файлами cookie
Чтобы отфильтровать все, кроме запросов с помощью файлов cookie, заблокированных по любой причине, в панели действий фильтров выберите больше фильтров > демо -странице .
Blocked Cookie Cookie . Попробуйте на этойСтрока состояния внизу отображает количество показанных запросов из общего числа.
Чтобы узнать причину, по которой был заблокирован ответ на ответ, выберите запрос, откройте вкладку Cookie и наведите на себя значок
.Кроме того, сетевая панель показывает значок предупреждения о
рядом с запросом с файлами cookie, заблокированными либо из -за хромированных флагов, либо конфигурации. Наведите значок, чтобы увидеть подсказку с подсказкой, и нажмите на него, чтобы перейти на панель «Проблемы» для получения дополнительной информации.Показать только заблокированные запросы
Чтобы отфильтровать все, кроме заблокированных запросов, в панели действий фильтров выберите больше фильтров > Заблокированные запросы блокировки сетевого запроса в ящике.
. Чтобы проверить это, вы можете использовать вкладкуТаблица запросов подчеркивает заблокированные запросы в красном. Строка состояния внизу отображает количество показанных запросов из общего числа.
Показать только сторонние запросы
Чтобы отфильтровать все, кроме запросов с происхождением, которые отличаются от происхождения страницы, в строке действий фильтров выберите больше фильтров > демо -странице .
3-й стороны . Попробуйте на этойСтрока состояния внизу отображает количество показанных запросов из общего числа.
Сортировки запросов
По умолчанию запросы в таблице запросов сортируются по времени инициации, но вы можете сортировать таблицу, используя другие критерии.
Сортировать по столбцу
Нажмите на заголовок любого столбца в таблице запросов , чтобы сортировать запросы по этому столбцу.
Сортировать по фазе активности
Чтобы изменить то, как обрабатывает запросы водопада , щелкните правой кнопкой мыши заголовок таблицы запросов, парят над водопадом и выберите один из следующих вариантов:
- Время начала . Первый запрос, который был инициирован, находится на вершине.
- Время ответа . Первый запрос, который начал загружать, находится наверху.
- Время окончания . Первый запрос, который закончил, находится наверху.
- Общая продолжительность . Запрос с самой короткой настройкой подключения и запросом / ответом находится вверху.
- Задержка . Запрос, который ждал кратчайшего времени для ответа, находится на вершине.
Эти описания предполагают, что каждый соответствующий вариант ранжируется от самого короткого до самого длинного. Нажатие на заголовок колонны Waterfall обращается с порядок.
В этом примере водопад сортируется по общей продолжительности. Более легкая часть каждого бара - это время, потраченное на ожидание. Темная часть - это время, потраченное на загрузку байтов.
Проанализировать запросы
Пока DevTools открыт, он регистрирует все запросы на сетевой панели. Используйте сетевую панель для анализа запросов.
Просмотреть журнал запросов
Используйте таблицу запросов , чтобы просмотреть журнал всех запросов, сделанных, пока DevTools был открыт. Нажатие или зависание по запросам раскрывает больше информации о них.
Таблица запросов отображает следующие столбцы по умолчанию:
- Имя . Имя файла или идентификатор для ресурса.
Статус Этот столбец может показать следующие значения:
- Например, код состояния HTTP,
200
или404
. -
CORS error
для запросов не удалась из-за обмена ресурсами по перекрестному происхождению (CORS). -
(blocked:origin)
для запросов с неправильно настроенными заголовками. Наведите на это значение статуса, чтобы увидеть подсказку с подсказкой на то, что пошло не так. -
(failed)
с последующим сообщением об ошибке.
- Например, код состояния HTTP,
Тип . Тип запрашиваемого ресурса.
Инициатор . Следующие объекты или процессы могут инициировать запросы:
- Анализатор . HTML -анализатор Chrome.
- Перенаправить . Http перенаправление.
- Сценарий . Функция JavaScript.
- Другой . Некоторый другой процесс или действие, такие как навигация на страницу, используя ссылку или ввод URL в адресную строку.
Размер . Объединенный размер заголовков отклика плюс корпус отклика, доставленная сервером.
Время . Общая продолжительность с начала запроса до получения окончательного байта в ответе.
Водопад . Визуальная разбивка деятельности каждого запроса.
Добавить или удалить столбцы
Щелкните правой кнопкой мыши заголовок таблицы запросов и выберите опцию, чтобы скрыть или показать его. У отображаемых параметров есть следы проверки рядом с ними.
Вы можете добавить или удалить следующие дополнительные столбцы: путь , URL , метод , протокол , схема , домен , удаленный адрес , пространство удаленного адреса , адресное пространство инициатора , файлы cookie , файлы cookie , приоритет , идентификатор соединения , имеют переопределение и водопад .
Добавьте пользовательские столбцы
Чтобы добавить пользовательский столбец в таблицу запросов :
- Щелкните правой кнопкой мыши заголовок таблицы запросов и выберите заголовки ответов > Управление столбцами заголовка .
- В диалоговом окне нажмите «Добавить пользовательский заголовок» , введите его имя и нажмите «Добавить» .
Групповые запросы по встроенным кадрам
Если встроенные кадры на странице инициируют много запросов, вы можете сделать журнал запросов более дружелюбным, группируя их.
Для групповых запросов по iframes, открыть настройки Внутри сетевой панели и проверьте Group по кадру .
Чтобы просмотреть запрос, инициированный встроенным кадром, разверните его в журнале запросов.
Просмотреть время запросов по отношению друг к другу
Используйте водопад , чтобы просмотреть время запросов по отношению друг к другу. По умолчанию водопад организован во время начала запросов. Таким образом, запросы, которые находятся дальше слева, начались раньше, чем те, которые находятся дальше вправо.
Смотрите сортировку по фазе активности , чтобы увидеть различные способы, которыми вы можете сортировать водопад .
Проанализируйте сообщения подключения к WebSocket
Для просмотра сообщений подключения к WebSocket:
- Под столбцом имени таблицы запросов нажмите на URL -адрес подключения WebSocket.
- Нажмите на вкладку «Сообщения» . В таблице показаны последние 100 сообщений.
Чтобы обновить таблицу, повторно щелкните имя подключения к WebSocket в столбце имени таблицы запросов .
Таблица содержит три столбца:
- Данные . Полезная нагрузка сообщения. Если сообщение является простым текстом, оно отображается здесь. Для двоичных опкомпомов этот столбец отображает имя и код OpCode. Поддерживаются следующие выборы: кадр продолжения, двоичный кадр, закрытие подключения, рамка пинга и рамка понга.
- Длина . Длина полезной нагрузки сообщения, в байтах.
- Время . Время, когда сообщение было получено или отправлено.
Сообщения с цветовой кодировкой в соответствии с их типом:
- Исходящие текстовые сообщения светлые.
- Входящие текстовые сообщения белые.
- WebSocket Opcodes легкие желтые.
- Ошибки легкие.
Анализировать события в потоке
Чтобы просмотреть события, которые передают серверы через API Fetch , Eventource API и XHR:
- Записывает запросы сети на странице, которая потоковых событий. Например, откройте эту демо -страницу и нажмите любую из трех кнопок.
- В сети выберите запрос и откройте вкладку EventStream .
Чтобы отфильтровать события, укажите регулярное выражение в панели фильтра в верхней части вкладки EventStream .
Чтобы очистить список захваченных событий, нажмите
Clear .Посмотреть предварительный просмотр тела ответа
Чтобы просмотреть предварительный просмотр тела ответа:
- Щелкните URL -адрес запроса, под столбцом имени таблицы запросов .
- Нажмите на вкладку Предварительного просмотра .
Эта вкладка в основном полезна для просмотра изображений.
Посмотреть тело ответа
Чтобы просмотреть тело ответа на запрос:
- Щелкните URL -адрес запроса, под столбцом имени таблицы запросов.
- Нажмите на вкладку «Ответ» .
Посмотреть заголовки HTTP
Чтобы просмотреть данные заголовка HTTP запроса:
- Нажмите на запрос в таблице запросов .
- Откройте вкладку «Заголовки» и прокрутите вниз до общего , заголовки ответов , запрашиваемые заголовки и, необязательно, в разделах заголовков ранних подсказок .
В общем разделе Devtools показывает вам, читаемое на человеку, рядом с полученным кодом состояния HTTP.
В разделе «Заголовки ответов» вы можете зависать над значением заголовка и нажать кнопку переопределить заголовок ответа локально .
редактирование» , чтобыПосмотреть источник заголовка HTTP
По умолчанию вкладка заголовков показывает имена заголовков в алфавитном порядке. Чтобы просмотреть имена заголовков HTTP в порядке, который они были получены:
- Откройте вкладку «Заголовки» для запроса, который вы заинтересованы. См. View Http Headers .
- Нажмите «Просмотреть источник» , рядом с разделом заголовка запроса или заголовка ответов .
Временные заголовки предупреждение
Иногда вкладка «Заголовки» показывают Provisional headers are shown...
Предупреждающее сообщение. Это может быть связано со следующими причинами:
Запрос не был отправлен по сети, но был подан из локального кэша, в котором не хранятся исходные заголовки запросов. В этом случае вы можете отключить кэширование , чтобы увидеть полные заголовки запроса.
Сетевой ресурс не действителен. Например, выполнить
fetch("https://jec.fish.com/unknown-url/")
в консоли .
DevTools также может отображать только предварительные заголовки из -за соображений безопасности.
Просмотреть полезную нагрузку запроса
Чтобы просмотреть полезную нагрузку запроса, то есть его параметры строки запроса и данные формы, выберите запрос из таблицы запросов и откройте вкладку полезной нагрузки .
Просмотреть источник полезной нагрузки
По умолчанию Devtools показывает полезную нагрузку в читаемой человеке.
Чтобы просмотреть источники параметров строки запроса и данных формы, на вкладке « Полезная нагрузка» нажмите «Просмотреть источник рядом с параметрами строки запроса или разделам данных формы ».
Просмотреть URL-декодированные аргументы параметров строки запроса
Чтобы переключить URL-кодирование для аргументов, на вкладке « Полезная нагрузка » нажмите «Просмотреть декодированные» или просмотреть URL-кодирование .
Просмотр файлов cookie
Чтобы просмотреть файлы cookie, отправленные в заголовке HTTP запроса:
- Щелкните URL -адрес запроса, под столбцом имени таблицы запросов.
- Нажмите на вкладку cookie .
Описание каждого из столбцов см. Поля .
Чтобы изменить файлы cookie, см. Просмотр, редактировать и удалить файлы cookie .
Просмотреть время разрыва запроса
Для просмотра времени просьбы запроса:
- Щелкните URL -адрес запроса, под столбцом имени таблицы запросов .
- Нажмите на вкладку « Время» .
См . Предварительный просмотр просмотра времени для более быстрого способа доступа к этим данным.
См. Фазы разбивки времени, объясненные для получения дополнительной информации о каждой из фаз, которые вы можете увидеть на вкладке Timing .
Предварительный просмотр поломки времени
Чтобы просмотреть предварительный просмотр расщепления времени запроса, наведите на себя запись запроса в столбце водопада в таблице запросов.
См . Просмотреть время разбивки времени запроса на способ получить доступ к этим данным, которые не требуют колебания.
Время разбивки объяснены
Вот больше информации о каждом из этапов, которые вы можете увидеть на вкладке Timing :
- Очередь . Запросы в очереди браузера перед началом подключения и когда:
- Существуют более высокие приоритетные запросы. Приоритет запроса определяется такими факторами, как тип ресурса, а также его местоположение в документе. Для получения дополнительной информации прочитайте раздел «Приоритет ресурса » Руководства
fetchpriority
. - Для этого происхождения уже открыто шесть соединений TCP, что является пределом. (Относится только к HTTP/1,0 и HTTP/1.1.)
- Браузер кратко распределяет пространство в кеше диска.
- Существуют более высокие приоритетные запросы. Приоритет запроса определяется такими факторами, как тип ресурса, а также его местоположение в документе. Для получения дополнительной информации прочитайте раздел «Приоритет ресурса » Руководства
- Остановился . Запрос может быть остановлен после начала соединения по любой из причин, описанных в очереди .
- DNS поиск . Браузер разрешает IP -адрес запроса.
- Начальное соединение . Браузер устанавливает соединение, включая рукопожатия TCP или переговоры и ведение переговоров по SSL.
- Переговоры по доверенности . Браузер ведет переговоры по запросу с прокси -сервером .
- Запрос отправлен . Запрос отправляется.
- Подготовка к обслуживанию . Браузер запускает обслуживающий работник.
- Запрос перед работником . Запрос отправляется работнику службы.
- Ожидание (TTFB) . Браузер ждет первого байта ответа. TTFB стоит времени на первый байт. Это время включает в себя 1 переход к задержке и время, которое сервер, предназначенный для подготовки ответа.
- Контент скачать . Браузер получает ответ, либо непосредственно от сети, либо от обслуживающего работника. Это значение является общим количеством времени, потраченного на чтение тела ответа. Больше, чем ожидалось, значения могут указывать на медленную сеть, или что браузер занят выполнение другой работы, которая задерживает ответ от чтения.
Просмотреть инициаторы и зависимости
Чтобы просмотреть инициаторы и зависимости запроса, удерживайте сдвиг и наведите на то, чтобы запрашивать запрос в таблице запросов. Devtools Colors Инициаторы зеленых, а зависимости красные.
Когда таблица запросов упорядочена в хронологическом порядке, первый зеленый запрос выше запроса, который вы падаете, является инициатором зависимости. Если выше есть еще один зеленый запрос, этот более высокий запрос является инициатором инициатора. И так далее.
Просмотреть события загрузки
Devtools отображает время DOMContentLoaded
и load
события в нескольких местах на сетевой панели. Событие DOMContentLoaded
, загруженное окрашенным синим, а событие load
красное.
Просмотреть общее количество запросов
Общее количество запросов указано в строке состояния в нижней части сетевой панели.
Посмотреть общий размер переведенных и загруженных ресурсов
Devtools перечисляет общий размер переносимых и загруженных (несжатых) ресурсов в строке состояния в нижней части сетевой панели.
См. Посмотрите несжатый размер ресурса, чтобы увидеть, насколько большие ресурсы после браузера их распадают.
Просмотреть след стека, которая вызвала запрос
Когда оператор JavaScript вызывает запрос ресурса, проведите над столбцом инициатора , чтобы просмотреть трассировку стека, ведущая к запросу.
Просмотреть несжатый размер ресурса
Проверьте настройки > Большие запросы строки , а затем посмотрите на нижнее значение столбца размера .
В этом примере сжатый размер документа www.google.com
, который был отправлен по сети, составлял 43.8 KB
, тогда как несжатый размер составлял 136 KB
.
Экспорт запрашивает данные
Вы можете экспортировать или скопировать список запросов, применяемые фильтрами несколькими способами, описанными дальше.
Сохранить все сетевые запросы в файл HAR
HAR (HTTP Archive) - это формат файла, используемый несколькими инструментами сеанса HTTP для экспорта полученных данных. Формат представляет собой объект JSON с определенным набором полей.
Чтобы уменьшить шансы на случайные утечки конфиденциальной информации, по умолчанию вы можете экспортировать «дезинфицированный» сетевой вход в формат HAR, который исключает конфиденциальную информацию, такую как Cookie
, Set-Cookie
и заголовки Authorization
. При необходимости вы также можете экспортировать журнал с конфиденциальными данными.
Чтобы сохранить все сетевые запросы в файл HAR, выберите один из двух способов:
Щелкните правой кнопкой мыши по любому запросу в таблице запросов и выберите «Копировать »> Сохраните все [перечислено] как HAR (дезинфекция) или сохраните все [перечислено] как HAR (с конфиденциальными данными) .
Нажмите
export har» (дезинфекция) ... в панели действий в верхней части сетевой панели.Чтобы экспортировать с конфиденциальными данными, сначала включите настройки
> Настройки > Сеть > Разрешите генерировать HAR с конфиденциальными данными , затем нажмите кнопку Export и выберите Export HAR (с конфиденциальными данными) в раскрывающемся меню.
После того, как у вас есть файл HAR, вы можете импортировать его обратно в DevTools для анализа двумя способами:
- Перетащите файл HAR в таблицу запросов .
- Нажмите импорт HAR» в строку действий в верхней части сетевой панели.
Скопируйте запрос, отфильтрованный набор запросов или все из них в буфер обмена
В столбце имени таблицы запросов щелкните правой кнопкой мыши запрос, проведите копию и выберите один из следующих вариантов.
Чтобы скопировать один запрос, его ответ или трассировку стека:
- Копия URL . Скопируйте URL -адрес запроса в буфер обмена.
- Копировать как curl . Скопируйте запрос в качестве команды Curl.
- Копировать как PowerShell . Скопируйте запрос в качестве команды PowerShell.
- Скопируйте как выборочное . Скопируйте запрос в качестве вызова.
- Скопируйте как Fetch (node.js) . Скопируйте запрос в качестве вызова Node.js.
- Ответ копирования . Скопируйте корпус ответа в буфер обмена.
- Копировать трассировку стека . Скопируйте дорожку стека запроса в буфер обмена.
Чтобы скопировать все запросы:
- Скопируйте все URL . Скопируйте URL -адреса всех запросов в буфер обмена.
- Скопируйте все как curl . Скопируйте все запросы как цепочку команд Curl.
- Скопируйте все как PowerShell . Скопируйте все запросы как цепочку команд PowerShell.
- Скопируйте все как выбор . Скопируйте все запросы как цепочку вызовов.
- Скопируйте все как Fetch (node.js) . Скопируйте все запросы как цепочку Node.js вызовы.
- Скопируйте все как Хар (дезинфицированный) . Скопируйте все запросы в качестве данных HAR без конфиденциальных данных, таких как
Cookie
,Set-Cookie
и заголовкиAuthorization
. - Скопируйте все как HAR (с конфиденциальными данными) . Скопируйте все запросы в качестве данных HAR с конфиденциальными данными.
Чтобы скопировать отфильтрованный набор запросов, примените фильтр в журнал сети, щелкните правой кнопкой мыши запрос и выберите:
- Скопируйте все перечисленные URL . Скопируйте URL -адреса всех фильтрованных запросов в буфер обмена.
- Скопируйте все перечисленные как curl . Скопируйте все отфильтрованные запросы в качестве цепочки команд Curl.
- Скопируйте все перечисленные как PowerShell . Скопируйте все отфильтрованные запросы в качестве цепочки команд PowerShell.
- Скопируйте все, что перечислено как выборка . Скопируйте все отфильтрованные запросы в виде цепочки вызовов.
- Скопируйте все перечисленные как Fetch (node.js) . Скопируйте все отфильтрованные запросы как цепочку Node.js вызовы.
- Скопируйте все перечисленные как HAR (дезинфекция) . Скопируйте все отфильтрованные запросы в качестве данных HAR без конфиденциальных данных, таких как
Cookie
,Set-Cookie
и заголовкиAuthorization
. - Скопируйте все перечисленные как HAR (с конфиденциальными данными) . Скопируйте все отфильтрованные запросы в качестве данных HAR с конфиденциальными данными.
Измените макет сетевой панели
Разверните или обрушитесь на разделы пользовательского интерфейса сетевой панели, чтобы сосредоточиться на том, что для вас важно.
Спрятать панель действий фильтров
По умолчанию Devtools показывает панель фильтров в верхней части сетевой панели. Нажмите Filter , чтобы скрыть его.
Используйте строки больших запросов
Используйте большие строки, когда вы хотите больше пробелов в таблице запросов сети. Некоторые столбцы также предоставляют немного больше информации при использовании больших строк. Например, нижним значением столбца размера является несжатый размер запроса, а столбец приоритета показывает как начальное (нижнее значение), так и приоритет окончательного (верхнего значения).
Откройте настройки и нажмите «Большие запросы», чтобы увидеть большие ряды.
Скрыть обзор трека
По умолчанию Devtools показывает обзор трека. Откройте настройки И очистите флажок обзора шоу, чтобы скрыть его.