Сетевой модуль Chrome Debug Tool
При разработке проекта неизбежно вызов большого количества фоновых служб и загрузка ресурсов.Все эти Http-запросы и загрузка ресурсов можно наблюдать в модуле NetWork в инструменте отладки Chrome.Если вы освоите этот модуль NetWork, вы сможете выполнить его лучше. Совместно отлаживаются интерфейсы front-end и back-end, выполняется несложный анализ производительности, и даже на его основе производится оптимизация производительности.Далее вкратце расскажу о моих знаниях и понимании модуля NetWork.
1. Обзор модуля
2. Модуль управления
2.1 Остановить запись
Остановить запись — красная кнопка.При нажатии сетевой модуль не будет выполнять запись Http-запроса.После повторного нажатия запись можно открыть снова.
2.2 Очистить записи
После нажатия кнопки «Очистить записи» все записанные запросы в списке вызовов ресурсов и служб будут очищены.
2.3 Режим скриншота
Режим снимка экрана — это логотип камеры. Нажмите, чтобы включить функцию режима снимка экрана. При обновлении страницы будет рассчитано время снимка экрана вашей зрительной области. Отображается желтая вертикальная линия, указывающая узел времени, в котором это изображение было захвачено.
2.4 Показать и скрыть панель фильтров
Нажмите эту кнопку, чтобы контролировать отображение и скрытие панели фильтров.
2.5 Режим больших значков списка запросов
После нажатия этой кнопки значок каждой строки списка вызовов ресурсов и сервисов становится крупнее, а количество записей http-запросов, которые можно просматривать одновременно в визуальной области, становится меньше, что на практике не очень полезно.
2.6 Показать и скрыть временную шкалу
Управление отображением и скрытием временной шкалы
2.7 Обновление списка записей страницы обновления
Нажмите эту кнопку, чтобы указать, будет ли обновляться после обновления страницы различная информация о запросах, записанная в списке вызовов ресурсов и служб.По умолчанию новые HTTP-запросы будут перезаписываться после обновления.Последний HTTP-запрос также сохраняется.
2.8 Использовать ли кеш
По умолчанию при включенном инструменте отладки F12 кеш не будет использоваться.Эта настройка удобна для записи получения некоторых ресурсов, потому что если ресурсы получены из кеша, быстрое и медленное выполнение получения ресурсов не может увидеть вообще. После нажатия кеш доступен, и кеш также можно использовать в состоянии инструмента отладки F12.
2.9 Режим скорости Интернета
В этом варианте вы можете выбрать разные скорости сети, что удобно для проверки фактической работы веб-сайта при разных скоростях сети.
3. Фильтр
Модуль фильтра может отфильтровать различные типы запросов HTTP, вводя или выбирая некоторые условия. Я просто перечислю следующие типы скрининга (неполных, для добавления)
- Нечеткий экран по имени
- Фильтровать по статусу Http-запросов, например, равномерно отфильтровать 404 запроса или 500 запросов
- Фильтровать по методу запроса Http-запроса, например
GET,POSTЖдать - Фильтровать по типу файла Http-запроса, например
css,jpg,jsЖдать - Фильтровать по протоколу, например
http,httpsЖдать
4. Хронология
Этот модуль показывает временные шкалы различных загрузок ресурсов. Несколько временных шкал складываются, потому что они загружаются одновременно. Вы можете сделать выбор поля, выбрать определенный период времени для загрузки ресурса и запроса на просмотр. Самое главное - это временная шкала. , Синие и красные линии, появляющиеся наDomContentLoaded, красная линия представляетLoadмероприятие.
Load: На данный момент все ресурсы загружены.
5. Загрузка ресурсов и список вызовов службы
Можно сказать, что это самая важная часть всего модуля NetWork.Он не только содержит конкретное распределение времени загрузки различных ресурсов во время инициализации, но также может просматривать конкретную информацию при вызове фоновой службы, независимо от того, когда она отображается. на первом экране страницы Эта часть очень важна при настройке или отладке интерфейса, и необходимо понимать ее конкретное значение.
5.1 Распределение времени загрузки ресурсов
Эта часть является более важной частью.Наведя мышь на столбец Водопад, вы можете увидеть конкретное распределение времени загрузки ресурса.Проанализировав время загрузки ресурса, вы можете понять, почему некоторые ресурсы не могут быть загружены в течение длительного времени, чтобы найти первый ресурс.Конкретная проблема медленного экранного времени оптимизирована и улучшена для этой проблемы.
Queueing: В этом поле указывается время ожидания.По умолчанию Chrome одновременно загружает до 6 ресурсов, поэтому, когда одновременно запрашивается слишком много ресурсов, нужно ждать в очереди; если время ожидания слишком долго, возможно, вам придется подумать об объединении ресурсов, например, об использовании спрайтов, уменьшая количество обращений к ресурсам.
Stalled: В этом поле указывается время с момента установления HTTP-соединения до момента, когда можно отправить запрос; если это время слишком велико, может потребоваться рассмотреть вопрос о том, не заблокирован ли сервер, к которому осуществляется доступ? Обработка с высокой степенью параллелизма отсутствует.
Proxy negotiation: это поле представляет время, которое потребовалось для подключения к прокси-серверу.
DNS Lookup: время выполнения DNS-запроса.Каждое новое доменное имя на веб-странице должно проходить через DNS-запрос.При первом открытии страницы время запроса будет больше, но после второго открытия будет cache, и это время будет уменьшено до 0 .
Initial connection: время установления соединения, включая время установления связи TCP и время повторной попытки.
SSL: SSL — это зашифрованный сертификат в протоколе https. Если в качестве протокола пути к ресурсу используется https, сертификат SSL необходимо загрузить для выполнения подтверждения SSL.
Request sent: Время инициировать запрос.
Ожидание (TTFB): время до возврата первого байта после того, как сервер получил запрос; если время велико, можно рассмотреть, плохие ли условия в сети или медленный ответ сервера, в основном это проблема сети или проблема сервера. , например, отправлять ли некоторые конкретные условия, заставляющие сервер попадать в глубокую петлю и т. д., и необходимо учитывать оптимизацию производительности сети или сервера.
Conetn Download: сервер вернул данные в ответ, и время, необходимое для получения данных в ответе; если время велико, количество возвращаемых байтов ресурсов должно быть большим, и для завершения обработки потребуется много времени. скачать.
5.2 Сведения о ресурсах
Это также важная часть.Когда мы нажимаем на имя ресурса, подробная информация о ресурсе будет расширена.Эта информация включает информацию заголовка Http, предварительный просмотр возвращаемого ресурса, возвращаемый ресурс, информацию о файлах cookie и время распределения ресурса.
Headers: содержит информацию о заголовке HTTP запроса на доступ к ресурсу, включая заголовок запроса, заголовок ответа, общие сведения и полезные данные запроса. Конкретное использование заголовков запросов и заголовков ответов не будет повторяться слишком много.Давайте поговорим здесь о General и Request-payload. В общем, мы можем видеть адрес запроса, метод запроса и т. д. Иногда причина, по которой некоторые интерфейсы вызывают 404, заключается в том, чтоRequest URLНеправильно, это простая идея устранения неполадок. пока вRequest-payloadВы можете увидеть данные и формат данных, отправляемых интерфейсом на сервер, при вызове службы или получении ресурсов.Это на самом деле очень важно.Он больше используется в совместной отладке интерфейса и сервера, так что внешний интерфейс может проверить, передается ли правильный формат на серверную часть.
Preview: это предварительный просмотр возвращенных данных, который аналогиченResponseРазница в том, что если возвращаемые данные представляют собой строку json, вPreviewбудет отформатирован как спецификация внешнего интерфейса в формате json с каскадным вложением для удобного просмотра и просмотра, в то время как вResponseпредставляет собой длинную строку строк, которую неудобно просматривать. На картинке ниже показана разница между ними.
Cookies: Если выбранный ресурс имеет информацию о файлах cookie в процессе «Запрос и ответ», вы можете просмотреть в нем конкретное сообщение о файлах cookie.Он используется менее временно, и понимания больше нет.
Timing: По сути, это распределение времени загрузки ресурса в разделе 5.1.
6. Обзор информации о текущем запросе страницы
Эта строка недели фактически суммирует общее количество запросов, инициированных текущей страницей, объем данных, которыми обмениваются, событие завершения и запуск текущей страницы.DOMContentLoadedвремя и триггерLoadвремя события.