MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Сетевой монитор (Network Monitor) показывает вам все сетевые запросы, которые делает Firefox (например, когда загружается страница или выполняются запросы XMLHttpRequests), как долго выполняется получение ответа и детали запроса.

Как открыть Сетевой монитор

Есть несколько различных способов:

  • Нажмите Ctrl + Shift + Q ( Command + Option + Q на Mac).
  • Выберите "Сеть" из меню "Web Developer" (это подменю меню "Tools" на OS X и Linux).
  • Кликните значок (), который находится на панели инструментов в меню (), а после выберите "Сеть".

Монитор появится внизу окна браузера. Для просмотра запросов перезагрузите страницу:

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

Обзор пользовательского интерфейса

Интерфейс разбит на четыре основные части:

Панель инструментов

Начиная с Firefox 47 и далее, панель инструментов находится сверху окна. В ранних версиях Firefox она располагалась внизу.

Она содержит:

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

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

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

Поля таблицы запросов

Каждая строка содержит:

  • Статус: возвращенный HTTP-код статуса. Здесь отображается цветной значок:
    • синий круг для информационных кодов (коды 1XX). В частности включает код 101 (переключение протоколов) для WebSocket-переключения.
    • зелёный круг для успеха (коды 2XX)
    • оранжевый треугольник для перенаправления (3XX)
    • красный квадрат для ошибок (4XX и 5XX)
    • серая окружность для ответов, которые получены из кэша браузера.
    Точный код отображен сразу после значка.
  • Метод: HTTP-метод запроса.
  • Файл: базовое имя запрошенного файла.
  • Домен: домен, к которому происходит запрос.
    • Если запрос использовал SSL/TLS, и подключение имело низкий уровень безопасности, такой как слабые шифры, вы увидите предупреждающий треугольник у имени домена. Вы сможете увидеть более подробную информацию о проблеме на вкладке Защита.
    • Наведите мышь на имя домена, чтобы увидеть IP-адрес.
    • Значок рядом с доменом предоставит вам расширенную информацию о статусе безопасности этого запроса. Смотрите Значки безопасности.
  • Причина: Причина, по который был вызван запрос, например, XHR-запрос, <img>, скрипт, скрипт, запрашивающий изображение и др. Это нововведение в Firefox 49.
  • Тип: Content-type ответа.
  • Передано: число байт, который фактически были переданы для загрузки ресурса. Это число будет меньше, чем Размер, если ресурс был упакован. Начиная с Firefox 47, если ресурс был получен из кэша service worker, то в этой ячейке будет отображено "service worker".
  • Размер: размер ресурса после распаковки.

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

Миниатюры изображений

Если файл является изображением, то в строку будет включена его миниатюра, при наведении на которую появится посмотр изображения во всплывающей подсказке:

Значки безопасности

Сетевой монитор показывает значок в колонке Домен:

Это предоставляет вам дополнительную информацию о безопасности запроса:

Значок Значение
HTTPS
Слабый HTTPS (наример, использовался слабый шифр)
Ошибка HTTPS (например, недействительный сертификат)
HTTP
Localhost

По слабым и ошибочным HTTPS-запросам, вы можете посмотреть более детальную информацию о проблеме на вкладке "Защита".

Колонка "Причина" (Cause)

Колонка "Причина" указывает, что было причиной запроса. Это обычно и так очевидно, и вы можете увидеть корреляцию между этой колонкой и колонкой "Тип". Наиболее распространённые значения:

  • document: Исходный HTML-документ.
  • img: Элемент <img> .
  • imageset: Элемент <img> .
  • script: Файл JavaScript.
  • stylesheet: Файл CSS.

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

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

Временной график

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

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

Начиная с Firefox 45 график содержит две вертикальные линии:

  • синяя линия маркирует точку, в которой произошло событие DOMContentLoaded страницы
  • красная линия маркирует точку, в которой произошло событие load страницы

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

Вы можете отфильтровать запросы по типу контента или по URL.

Фильтрация по типу контента

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

Фильтрация XHR

Для просмотра только XHR-запросов используйте кнопку "XHR" панели инструментов.

Фильтрация WebSockets

Новое в Firefox 48

Для просмотра только подключений WebSocket, используйте кнопку "WS" панели инструментов.

Для контроля данных, передаваемых через WebSocket-соединения, попробуйте дополнение WebSocket Monitor.

Фильтрация по URL

Для фильтрации по URL используйте поле поиска, расположенное правее на Панели инструментов. Кликните на это поле или нажмите клавиши Ctrl + F или Cmd + F, и начните набирать текст. При этом список запросов будет отфильтрован по подстроке, включающей введённую строку; также фильтрация будет происходить по колонкам "Домен" и "Файл".

Начиная с Firefox 45, вы можете фильтровать запросы, которые не содержат введённую вами строку, предварив вводимую строку символом "-". Например, запрос "-google.com" покажет все запросы, которые не имеют подстроки "google.com" в своих URL.

Контекстное меню

При кликне правой клавишей мыши по строке отобразится контекстное меню:

  • Копировать URL
  • Копировать параметры URL (новое в Firefox 40)
  • Копировать POST-данные (новое в Firefox 40, только для запросов POST)
  • Копировать как cURL
  • Копировать заголовки запроса (новое в Firefox 40)
  • Копировать заголовки ответа (новое в Firefox 40)
  • Копировать ответ (новое в Firefox 40)
  • Копировать изображение как URL данных (only for images)
  • Копировать всё как HAR (новое в Firefox 41)
  • Сохранить всё как HAR (новое в Firefox 41)
  • Изменить и снова отправить
  • Открыть в новой вкладке
  • Запустить анализ производительности

Изменить и снова отправить

Эта опция открывает редактор, позволяющий вам отредактировать метод запроса, URL, параметры и заголовки и ещё раз отправить запрос.

Копировать как cURL

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

-X [METHOD] Если метод запроса не GET или POST
--data Для параметров запроса, закодированных в URL
--data-binary Для параметров запроса типа Multipart. Например, файлы.
--http/VERSION Если HTTP версия не 1.1
-I Если метод запроса HEAD
-H

Один для каждого заголовка запроса.

Начиная с Firefox 34, если присутствует заголовок "Accept-Encoding", то команда cURL будет включать --compressed вместо -H "Accept-Encoding: gzip, deflate". Это значит, что запрос был автоматически распакован.

Копировать/Сохранить всё как HAR

Новое в Firefox 41.

Эти операции создают HTTP-архив (HAR) для всех запросов из списка. Формат HAR позволяет вам экспортировать детальную информацию о сетевых запросах. "Копировать всё как HAR" копирует данные в буфер, "Сохранить всё как HAR" открывает диалог сохранения архива на диск.

Детализация запроса

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

Вкладки сверху этой панели позволяю переключаться между следующими страницами:

  • Заголовки (Headers)
  • Куки (Cookies)
  • Параметры (Params)
  • Ответ (Response)
  • Тайминги (Timings)
  • Защита (Security) (только для защищённых запросов)
  • Предпросмотр (Preview) (только для типа HTML)

Щелчок по значку, расположенном справа на панели инструментов (справа от поиска), закроет эту панель и вернёт вас к просмотру списка.

Заголовки (Headers)

Эта вкладка содержит основную информацию о запросе:

Она включает:

  • URL-запроса
  • метод запроса
  • удалённый IP-адрес и порт (новой в Firefox 39)
  • код состояния
  • HTTP-заголовки запроса и ответа, которые были отосланы
  • кнопка "Изменить и снова отправить"

Вы можете отфильтровать отображаемые заголовки:

Куки (Cookies)

Эта вкладка показывает все детали кук, которые были отправлены с запросом или ответом:

Как и в случае с заголовками их список можно фильтровать.

Параметры (Params)

Эта вкладка отображает параметры GET и данные POST запроса:

Ответ (Response)

Полное содержание ответа. Если в ответе HTML, JS или CSS, то он отобразится как текст:

Если ответ - JSON, то он отобразится как просматриваемый объект.

Если ответ - изображение, то вкладка будет содержать предпросмотр:

Тайминги (Timings)

Вкладка "Тайминги" разбивает сетевой запрос на следующие этапы, определённые в спецификации HTTP-архива (HAR):

Имя Описание
Блокировка (Blocked)

Время, потраченное в очереди ожидания для создания сетевого соединения.

Браузер накладывает ограничение на число одновременных соединений с одним сервером. В по умолчанию это 6, но это можно изменить, используя свойство network.http.max-persistent-connections-per-server. Если все соединения используются, то браузер не может скачивать больше рерурсов, до тех пор пока одно из соединений не освободится.

Разрешение DNS (DNS resolution) Время на разрешение имени хоста.
Соединение (Connecting) Время на создание TCP-соединения.
Отправка (Sending) Время на отправку HTTP-запроса на сервер.
Ожидание (Waiting) Ожидание ответа от сервера.
Получение (Receiving) Время на чтение полного ответа с сервера (или из кэша).

Здесь представлена детальная информация, есть аннотации, а также "графики-полосы" времени запроса, которые показывают разбивку общего времени на этапы:

Защита

Если работа с сайтом ведётся через HTTPS, то у вас появится дополнительная вкладка "Защита". Она содержит детали об используемой безопасной связи, включающие: протокол, набор шифров, детали сертификата:

На вкладке "Защита" отображается предупреждение о слабой безопасности:

  1. Использование SSLv3 вместо TLS
  2. Использование шифра RC4

Предпросмотр (Preview)

Если тип файла это HTML, то появится вкладка "Предпросмотр". Она отображает вид, как выглядит HTML-страница в браузере:

Анализ производительности

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

Для запуска инструмента анализа производительности кликните значок "Часы" на панели.

(Кроме того, если у вас только что открытый Сетевой монитор, и список запросов ещё пуст, то у вас будут "Часы" в главном окне.)

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

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

Для возврата в Сетевой монитор нажмите кнопку "Назад", расположенную слева от результатов.

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

Метки документа и участники

 Внесли вклад в эту страницу: pk.prog, MAJTREJ, Doxtyp, ssaayylleerr09, Aleksej, loginov-as
 Обновлялась последний раз: pk.prog,