Справочник по анализу сети

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

Запись сетевых запросов

По умолчанию DevTools записывает все сетевые запросы на панели "сеть", пока не откроете DevTools.

Панель сеть

Прекращение записи сетевых запросов

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

  1. Выберите остановить запись остановка записи сетевого журнала  на панели сеть . Оно превращается в серый, чтобы показать, что DevTools больше не записывает запросы.
  2. Нажимайте клавиши Control + E \ (Windows ) или Command + E \ (macOS ), пока фокус находится на панели " сеть ".

Очистка запросов

Clear  Чтобы очистить все запросы из таблицы "запросы", на панели "сеть" нажмите кнопку Clear Clear.

Кнопка очистить

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

Для сохранения запросов на страницах загрузок на панели "сеть" установите флажок сохранить журнал . DevTools сохраняет все запросы, пока не отключайте параметр сохранить журнал.

Флажок сохранить журнал

Захват снимков экрана при загрузке страницы

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

Чтобы включить снимки экрана, нажмите кнопку Параметры сети и выберите команду захватить снимки экрана на панели " сеть ".

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

После захвата снимка экрана вы взаимодействуете с ним следующими способами.

  • Наведите указатель мыши на снимок экрана, чтобы просмотреть точку, в которой был записан снимок экрана. На панели обзора появится желтая линия.
  • Щелкните эскиз экрана, чтобы отфильтровать все запросы, произошедшие после захвата снимка экрана.
  • Дважды щелкните эскиз, чтобы увеличить его.

Наведение указателя на снимок экрана

Изменение поведения при загрузке

Эмуляция первого времени посетителя с помощью отключения кэша браузера

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

Флажок отключить кэш

Отключение кэша браузера из денежных ящиков условий сети

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

  1. Откройте денежный ящик условий сети .
  2. Установите или снимите флажок отключить кэш .

Очистка кэша браузера вручную

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

Выбор очистки кэша браузера

Эмуляция в автономном режиме

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

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

Раскрывающееся меню автономный режим

Эмуляция медленных сетевых подключений

Эмуляция медленной сети 3G, Fast 3G и других скоростей соединения из раскрывающегося меню Online .

Раскрывающееся меню регулирования

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

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

Эмуляция медленных сетевых подключений из денежных ящиков условий сети

Если вы хотите регулировать сетевое соединение при работе с другими панелями DevTools, используйте денежные ящики условий сети.

  1. Откройте денежный ящик условий сети .
  2. Выберите нужную скорость соединения в меню регулирования .

Чтобы вручную удалить cookie-файлы браузера в любое время, откройте контекстное меню (щелкните правой кнопкой мыши, где угодно в таблице запросов и выберите команду Очистить cookie-файлы браузера).

Выбор очистки cookie-файлов браузера

Переопределение агента пользователя

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

  1. Откройте денежный ящик условий сети .
  2. Снимите флажок автоматически.
  3. Выберите в меню пункт агента пользователя или введите его в текстовом поле.

Фильтрация запросов

Фильтрация запросов по свойствам

С помощью текстового поля Фильтр можно отфильтровать запросы по свойствам, таким как домен или размер запроса.

Если надпись не отображается, возможно, область Фильтры скрыта.
Посмотрите скрыть область фильтров.

Текстовое поле фильтр

Вы можете использовать несколько свойств одновременно, разделяя каждое свойство пробелами. Например, mime-type:image/png larger-than:1K отображает все PNGs, размер которых больше 1 Кбайт. Эти фильтры с несколькими свойствами эквивалентны AND операциям. OR операции в настоящее время не поддерживаются.

Полный список поддерживаемых свойств.

Свойство Сведения
domain Отображать только ресурсы из указанного домена. Вы можете использовать подстановочный знак "\ * ", чтобы включить несколько доменов. Например, *.com отображаются ресурсы из всех доменных имен, которые заканчиваются на .com . DevTools заполняет раскрывающееся меню автозаполнения всеми найденными доменами.
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 ).
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 заполнит раскрывающееся меню автозаполнения, содержащее все найденные коды состояния.

Фильтрация запросов по типу

Чтобы отфильтровать запросы по типу запроса, выберите один из указанных ниже кнопок: XHR, JS, CSS, img, Media, Font, doc, WS \ (WebSocket ), Манифестили другой \ (любой другой тип, не указанный здесь) на панели "сеть".

Если эти кнопки не отображаются, возможно, область фильтров скрыта.
Посмотрите скрыть область фильтров.

Чтобы включить множественные фильтры типов одновременно, удерживайте клавишу Control \ (Windows ) или Command \ (macOS ) и выберите.

Использование фильтров типов для отображения ресурсов JS, CSS и документов

Фильтрация запросов по времени

Чтобы отобразить только те запросы, которые были активны в течение этого времени, выберите и перетащите его влево или вправо в области "Обзор". Фильтр является инклюзивным. Отображается любой запрос, который был активен в течение выбранного периода времени.

Фильтрация запросов, которые неактивны вокруг 300ms

Скрыть URL-адреса данных

URL-адреса данных — это небольшие файлы, внедренные в другие документы. Любой запрос, который начинается с адреса в таблице запросов, data: — это URL-адрес данных.

Установите флажок скрыть URL-адреса данных , чтобы скрыть запросы.

Флажок скрыть URL-адреса данных

Запросы сортировки

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

Сортировка по столбцам

Выберите верхний колонтитул любого столбца в списке запросы для сортировки запросов по этому столбцу.

Этап сортировки по действию

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

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

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

Сортировка каскадом по общей длительности

Анализ запросов

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

Просмотр журнала запросов

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

Таблица запросов

По умолчанию в таблице запросов отображаются следующие столбцы.

  • Имя. Имя или идентификатор ресурса.
  • Состояние. Код состояния HTTP.
  • Тип. Тип MIME запрашиваемого ресурса.
  • Инициатор. Следующие объекты или процессы инициируют запросы:
    • Средство синтаксического анализа. Средство синтаксического анализа HTML для Microsoft Edge.
    • Redirect (перенаправление). Переадресация HTTP.
    • Сценарий. Функция JavaScript.
    • Другие. Другие процессы или действия, например переход на страницу с помощью ссылки или ввод URL-адреса в адресную строку.
  • Размер. Объединенный размер заголовков ответа и текст ответа, доставленный сервером.
  • Time (время). Общая продолжительность от начала запроса до получения последнего байта в ответе.
  • Каскадом. Визуальная декомпозиция мероприятия для каждого запроса.

Добавление и удаление столбцов

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

Добавление столбца в таблицу запросы

Добавление настраиваемых столбцов

Чтобы добавить настраиваемый столбец в таблицу запросы, наведите указатель мыши на заголовок таблицы запросы, откройте контекстное меню (щелкните правой кнопкой мыши ) и выберите заголовки ответов > .Управление столбцами заголовков.

Добавление настраиваемого столбца в таблицу запросы

Просмотр времени связи между запросами друг на друга

Используйте Каскад, чтобы просмотреть время связи между запросами друг с другом.
По умолчанию каскадом упорядочиваются по времени начала запросов.
Таким образом, запросы, которые раньше приступили к началу, чем те, которые находятся дальше по правому краю.

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

Столбец Каскад на панели запросы

Предварительный просмотр тела ответа

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

  1. Выберите URL-адрес запроса в столбце " имя " таблицы "запросы".
  2. Откройте вкладку Предварительный просмотр .

Эта вкладка особенно полезна для просмотра изображений.

Вкладка предварительный просмотр

Просмотр текста ответа

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

  1. Выберите URL-адрес запроса в столбце " имя " таблицы "запросы".
  2. Откройте вкладку ответ .

Вкладка ответ

Просмотр заголовков HTTP

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

  1. Выберите URL-адрес запроса в столбце " имя " таблицы "запросы".
  2. Откройте вкладку заголовки .

Вкладка заголовки

Просмотр источника заголовков HTTP

По умолчанию на вкладке заголовки отображаются имена заголовков в алфавитном порядке. Чтобы просмотреть имена HTTP-заголовков в том порядке, в котором они были получены:

  1. Открытие вкладки " заголовки " для запроса, который вас интересует. См.: Просмотр заголовков HTTP.
  2. Нажмите кнопку источник, рядом с разделом заголовок запроса или заголовок ответа .

Просмотр параметров строки запроса

Чтобы просмотреть параметры строки запроса URL-адреса в удобочитаемом формате, выполните указанные ниже действия.

  1. Открытие вкладки " заголовки " для запроса, который вас интересует. См.: Просмотр заголовков HTTP.
  2. Перейдите к разделу Параметры строки запроса .

Раздел параметры строки запроса

Просмотр источника параметров строки запроса

Чтобы просмотреть источник параметра строки запроса для запроса:

  1. Перейдите к разделу Параметры строки запроса. Просмотрите Параметры строки запроса на просмотр.
  2. Нажмите кнопку Просмотр источника.

Просмотр строковых параметров запроса в кодировке URL

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

  1. Перейдите к разделу Параметры строки запроса. Просмотрите Параметры строки запроса на просмотр.
  2. Выберите команду Просмотреть закодированный URL-адрес.

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

  1. Выберите URL-адрес запроса в столбце " имя " таблицы "запросы".
  2. Перейдите на вкладку " cookie ".

Вкладка cookie

Просмотр разбиения по времени для запроса

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

  1. Выберите URL-адрес запроса в столбце " имя " таблицы "запросы".
  2. Откройте вкладку время .

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

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

Вкладка время

Дополнительные сведения о каждой из фаз.

Другие способы доступа к этому представлению можно найти в разделе Просмотр временных интервалов .

Предварительный просмотр разбивки по времени

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

Ознакомьтесь со сведениями о том, как получить доступ к данным, которые не требуют наведения мыши, в запросе.

> предварительный просмотр разбиения по времени для запроса

Описание этапов разделения времени

Дополнительные сведения о каждой из фаз, которые можно увидеть на вкладке время .

  • Очереди. Браузер помещает запросы в очередь в следующих случаях:
    • Существуют запросы с более высокими приоритетами.
    • Для этого происхождения уже открыто шесть подключений TCP, что является ограничением. Применимо только к HTTP/1.0 и HTTP/1.1.
    • Браузер временно выделяет место в кэше на диске.
  • Ожидание. Запрос может быть остановлен в любой из причин, описанных в разделе очереди.
  • Поиск DNS. Браузер разрешает IP-адрес запроса.
  • Начальное соединение. Браузер устанавливает подключение, в том числе подтверждения TCP, повторы TCP и согласование SSL.
  • Согласование прокси-сервера. Браузер согласовывает запрос с прокси-сервером.
  • Запрос отправлен. Запрос отправляется.
  • Подготовка ServiceWorker. Браузер запускает сервисный рабочий процесс.
  • Запросите ServiceWorker. Запрос отправляется сотруднику службы.
  • Ожидание \ (TTFB ). Браузер ожидает первый байт ответа. TTFB означает время для первого байта. Это время включает 1 круговый путь задержки и время, затраченное сервером на подготовку ответа.
  • Загрузка содержимого. Браузер получает ответ.
  • Получение push-уведомлений. Браузер получает данные для этого ответа через HTTP/2 серверную извещающую передачу.
  • Чтение push-уведомлений. Браузер читает локальные данные, полученные ранее.

Просмотр инициаторов и зависимостей

Чтобы просмотреть инициаторы и зависимости запроса, удерживайте Shift и наведите указатель мыши на запрос в таблице запросы. DevTools цвета: инициаторы отображаются зеленым цветом, а зависимости — красным.

Просмотр инициаторов и зависимостей запроса

Когда таблица запросов упорядочивается в хронологическом порядке, первым зеленым запросом над ним, который вы наводите, является инициатор зависимости. Если над ним появится еще один зеленый запрос, этот более высокий запрос является инициатором инициатора. И так далее.

Просмотр событий загрузки

DevTools отображает время показа DOMContentLoaded load событий в нескольких местах на панели "сеть". DOMContentLoadedСобытие окрашивается синим цветом, а load событие — красным.

Расположение событий DOMContentLoaded и Load на панели сеть

Просмотр общего числа запросов

Общее количество запросов можно найти в области сводки в нижней части панели "сеть".

Внимание!

Этот номер отслеживает только те запросы, которые были зарегистрированы с момента открытия DevTools. Если при открытии DevTools возникли другие запросы, эти запросы не учитываются.

Общее количество запросов с момента открытия DevTools

Просмотр общего объема загружаемого файла

Общий объем загруженных запросов отображается в области Сводка в нижней части панели "сеть".

Внимание!

Этот номер отслеживает только те запросы, которые были зарегистрированы с момента открытия DevTools. Если при открытии DevTools возникли другие запросы, предыдущие запросы не учитываются.

Общий объем загруженных запросов

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

Просмотр трассировки стека, которая привела к запросу

После того, как инструкция JavaScript запрашивает ресурс, наведите указатель мыши на столбец инициатора , чтобы просмотреть трассировку стека, выступающей в запрос.

Трассировка стека, ведущая к запросу ресурсов

Просмотр несжатого размера ресурса

Установите флажок использовать строки большого запроса , а затем посмотрите на нижнее значение столбца Размер .

Пример несжатых ресурсов

Данные запросов на экспорт

Сохранение всех сетевых запросов в файле HAR

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

  1. Наведите указатель мыши на любой запрос в таблице запросов и откройте контекстное меню (щелкните правой кнопкой мыши ).
  2. Выберите команду Сохранить как HAR с содержимым. DevTools сохраняет все запросы, произошедшие после того, как вы открыли DevTools в файл HAR. Невозможно отфильтровать запросы или сохранить только один запрос.

После того как вы сохраните файл HAR, вы можете импортировать его обратно в DevTools для анализа. Просто перетащите файл HAR в таблицу запросы.

Выбор команды Сохранить как HAR с контентом

Копирование одного или нескольких запросов в буфер обмена

В столбце имя таблицы запросы наведите указатель мыши на запрос, откройте контекстное меню (щелкните правой кнопкой мыши ), наведите указатель на пункт Копироватьи выберите один из следующих вариантов.

  • Копировать адрес ссылки. Скопируйте URL-адрес запроса в буфер обмена.
  • Копирование ответа. Скопировать текст ответа в буфер обмена.
  • Копировать как выборку.
  • Копировать как фигуру. Копирование запроса в виде текстовой команды.
  • Копировать все как выборку.
  • Скопировать все как фигуру. Копирование всех запросов в виде последовательности команд с фигурой.
  • Копировать все как HAR. Скопируйте все запросы как данные HAR.

Выбор пункта Копировать ответ

Изменение макета панели "сеть"

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

Скрытие области фильтров

По умолчанию в DevTools отображается область фильтров.
Щелкните фильтр фильтра  , чтобы скрыть его.

Кнопка скрыть фильтры

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

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

Пример строк большого запроса в области запросы

Установите флажок использовать строки большого запроса , чтобы включить большие строки.

Флажок использовать строки большого запроса

Скрытие области обзора

По умолчанию в DevTools отображается область "Общие сведения". Снимите флажок Показать общие сведения , чтобы скрыть его.

Флажок Показать общие сведения

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

Лицензия Creative Commons
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.