Какова основная функция вкладки сети в консоли браузера

Обновлено: 21.11.2024

Когда вы сообщаете о проблеме в службу поддержки HappyFox, мы можем запросить снимок экрана консоли вашего веб-браузера и/или сетевых журналов для тщательного устранения проблемы 🛠.

Консольные/сетевые журналы часто содержат важные сведения об ошибках, необходимые для определения основной причины проблемы/ошибки, с которой вы столкнулись в HappyFox.

В этой статье описывается, как получить доступ к этим журналам в таких популярных веб-браузерах, как:

Журналы консоли в Chrome:

В Google Chrome журналы консоли доступны как часть Chrome Dev Tools.

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

Нажмите Ctrl + Shift + J (Windows/Linux) или Cmd + Opt + J (Mac).

Вы также можете получить доступ к этой панели консоли из меню Chrome:

Найдите и нажмите на строку меню с тремя точками в правом верхнем углу браузера Chrome.
Перейдите в Дополнительные инструменты >> Инструменты разработчика.
Переключиться на вкладку "Консоль".

На вкладке "Консоль" вы можете найти текущие сообщения об ошибках (отображены красным) вместе с другой информацией уровня консоли, такой как предупреждения и информация.

Совет 💡. Если ваша ошибка/проблема связана с перемещением по нескольким страницам приложения, рекомендуется «Сохранить журнал». Это помогает сохранять сообщения об ошибках.

Сетевые журналы в Chrome:

Как правило, панель «Сеть» используется, когда вам нужно убедиться, что ресурсы загружаются или выгружаются должным образом. Откройте DevTools, нажав Control + Shift + I или Command + Option + I (Mac). Обновите содержимое веб-страницы.

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

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

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

Журналы консоли в FireFox

В Mozilla FireFox журналы консоли доступны как часть инструментов разработчика FireFox.

выберите «Веб-консоль» в подменю «Веб-разработчик» в меню Firefox (или в меню «Инструменты», если у вас отображается строка меню или вы работаете в Mac OS X)
или нажмите сочетание клавиш Ctrl+Shift+K (Command+Option+K в OS X).

Сетевые журналы в FireFox:

Нажмите Ctrl + Shift + E (Command + Option + E на Mac).
Выберите «Сеть» в меню «Веб-разработчик» (это подменю меню «Инструменты» в OS X и Linux).
Нажмите значок гаечного ключа на главной панели инструментов или в меню "Гамбургер", затем выберите "Сеть".

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

Поиск ошибки . Прокрутите сетевые журналы, чтобы найти записи, выделенные шрифтом "Розовый", например, приведенную ниже:

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

В браузере Safari консольные и сетевые журналы доступны как часть «Меню разработки». По умолчанию эти параметры отключены. Чтобы включить «Меню разработки»,

Запустите «Сафари».
Перейдите в Safari >> «Настройки» >> «Дополнительно» (из заголовка).
Включите параметр «Показывать меню «Разработка» в строке меню».

Журналы консоли в Safari:

После включения «Меню разработки» перейдите на нужную веб-страницу и нажмите «Разработка» >> «Показать консоль Javascript».

Сетевые журналы в Safari:

Открытие сетевого журнала:

Откройте консоль Safari JavaScript.
Перейдите на вкладку "Сеть".
Обновите веб-страницу.
Ошибки отображаются красным шрифтом. При нажатии на ошибку откроется область сведений.Информацию о критических ошибках можно найти в заголовке и на вкладках Предварительный просмотр.

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

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

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

Работа с консолью в браузере

Большинство современных веб-браузеров, поддерживающих основанные на стандартах HTML и XHTML, предоставят вам доступ к консоли разработчика, где вы сможете работать с JavaScript в интерфейсе, похожем на оболочку терминала. Мы рассмотрим, как получить доступ к консоли в Firefox и Chrome.

Файрфокс

Чтобы открыть веб-консоль в FireFox, перейдите в меню ☰ в правом верхнем углу рядом с адресной строкой.

Оттуда нажмите кнопку "Разработчик", обозначенную значком гаечного ключа, чтобы открыть меню "Веб-разработчик". Открыв его, щелкните элемент меню веб-консоли.

После этого в нижней части окна браузера откроется панель:

Вы также можете войти в веб-консоль с помощью сочетания клавиш CTRL + SHIFT + K в Linux и Windows или COMMAND + OPTION + K в macOS.

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

Хром

Чтобы открыть консоль JavaScript в Chrome, перейдите в меню в правом верхнем углу окна браузера, обозначенное тремя вертикальными точками подряд. Оттуда вы можете выбрать «Дополнительные инструменты», а затем «Инструменты разработчика».

Откроется панель, на которой можно щелкнуть Консоль в верхней строке меню, чтобы открыть консоль JavaScript, если она еще не выделена:

Вы также можете войти в консоль JavaScript, используя сочетание клавиш CTRL + SHIFT + J в Linux или Windows или COMMAND + OPTION + J в macOS, что сразу перенесет фокус на консоль.

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

Работа в консоли

В консоли вы можете ввести код JavaScript.

Начнем с предупреждения, которое выводит строку Hello, World! :

После того, как вы нажмете клавишу ENTER после строки кода JavaScript, вы должны увидеть следующее всплывающее окно с предупреждением в своем браузере:

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

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

Чтобы распечатать Hello, World! строку, мы можем ввести в консоль следующее:

В консоли вы получите следующий вывод:

Мы также можем использовать JavaScript для выполнения математических операций в консоли:

Вы также можете попробовать более сложную математику:

Кроме того, мы можем работать с несколькими строками с переменными:

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

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

Работа с файлом HTML

Вы также можете работать в контексте файла HTML или динамически отображаемой страницы в консоли. Это дает вам возможность экспериментировать с кодом JavaScript в контексте существующих HTML, CSS и JavaScript.

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

Давайте возьмем пустой HTML-документ, например следующий файл index.html, чтобы понять, как использовать консоль для его изменения. В своем любимом текстовом редакторе создайте файл index.html и добавьте следующие строки HTML:

Если вы сохраните приведенный выше HTML-файл и загрузите его в выбранный вами браузер, вы должны увидеть пустую страницу с заголовком страницы «Сегодняшняя дата» .

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

Вы получите следующий вывод в консоли:

На этом этапе ваша страница должна выглядеть примерно так:

Мы также можем изменить стиль страницы, например цвет фона:

А также цвет текста на странице:

Теперь ваша страница будет выглядеть примерно так:

Здесь вы можете создать

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

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

И, наконец, добавьте p вместе с абзацем

элемент и присоединенный текстовый узел к документу:

После выполнения этих шагов ваша HTML-страница index.html будет выглядеть примерно так:

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

Знакомство с другими инструментами разработки

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

DOM — объектная модель документа

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

DOM представляет собой дерево объектов и показывает элементы HTML в иерархическом представлении. Дерево DOM доступно для просмотра на панели «Инспектор» в Firefox или на панели «Элементы» в Chrome.

Эти инструменты позволяют просматривать и редактировать элементы DOM, а также позволяют определять HTML-код, связанный с аспектом конкретной страницы. Модель DOM может сообщить вам, есть ли у фрагмента текста или изображения атрибут ID, и определить значение этого атрибута.

Страница, которую мы изменили выше, будет иметь представление DOM, похожее на это, прежде чем мы перезагрузим страницу:

Кроме того, вы увидите стили CSS на боковой панели или под панелью DOM, что позволит вам увидеть, какие стили используются в документе HTML или с помощью таблицы стилей CSS. Вот как выглядит стиль body нашего образца страницы выше в инспекторе Firefox:

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

Как и в случае с консолью, если вы перезагрузите страницу, вы вернетесь к сохраненному состоянию HTML-документа.

Сеть

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

Вы можете использовать вкладку "Сеть" вместе с консолью JavaScript. То есть вы можете начать отладку страницы с помощью консоли, а затем переключиться на вкладку «Сеть», чтобы увидеть сетевую активность без перезагрузки страницы.

Адаптивный дизайн

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

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

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

Заключение

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

Чтобы узнать больше о JavaScript, вы можете прочитать о типах данных или библиотеках jQuery или D3.

Хотите узнать больше? Присоединяйтесь к сообществу DigitalOcean!

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

Серия руководств: Как программировать на JavaScript

JavaScript – это высокоуровневый объектно-ориентированный динамический язык сценариев, популярный как инструмент для создания интерактивных веб-страниц.

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

См. Справочник по сети, если вместо этого вы хотите просмотреть функции.

Прочитайте или посмотрите видеоверсию этого руководства:

Если вы ищете способы повысить скорость загрузки страниц, не начинайте с панели "Сеть". Существует множество типов проблем с производительностью нагрузки, не связанных с сетевой активностью. Начните с панели «Аудит», потому что она дает вам целевые предложения по улучшению вашей страницы. См. раздел Оптимизация скорости веб-сайта.

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

Рисунок 1. Демонстрация

Вы можете переместить демонстрацию в отдельное окно.

Рисунок 2. Демонстрация в одном окне и это руководство в другом окне

Откройте DevTools, нажав клавиши Control+Shift+J или Command+Option+J (Mac). Откроется панель консоли.

Рисунок 3. Консоль

Рис. 4. DevTools закреплен в нижней части окна

Перейдите на вкладку "Сеть". Откроется панель «Сеть».

Рис. 5. DevTools закреплен в нижней части окна

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

Чтобы просмотреть сетевую активность страницы:

Обновите страницу. Панель «Сеть» регистрирует всю сетевую активность в журнале сети.

Рис. 6. Сетевой журнал

Каждая строка сетевого журнала представляет ресурс. По умолчанию ресурсы перечислены в хронологическом порядке.Верхним ресурсом обычно является основной HTML-документ. Нижний ресурс — это то, что было запрошено последним.

Каждый столбец представляет информацию о ресурсе. На рис. 6 показаны столбцы по умолчанию:

Тип. Тип ресурса.

Инициатор. Что вызвало запрос ресурса. Щелкнув ссылку в столбце Инициатор, вы перейдете к исходному коду, вызвавшему запрос.

Время. Сколько времени занял запрос.

Водопад. Графическое представление различных этапов запроса. Наведите курсор на водопад, чтобы увидеть разбивку.

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

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

Теперь нажмите кнопку "Получить данные" в демоверсии.

Посмотрите еще раз на конец сетевого журнала. Появился новый ресурс getstarted.json. При нажатии кнопки "Получить данные" страница запросила этот файл.

Рис. 7. Новый ресурс в сетевом журнале

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

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

Рис. 8. Включение столбца "Домен"

Совет. Чтобы увидеть полный URL-адрес ресурса, наведите указатель мыши на его ячейку в столбце "Имя".

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

Нажмите раскрывающееся меню "Дросселирование", для которого по умолчанию установлено значение "В сети".

Рис. 9. Включение регулирования

Выберите Медленный 3G.

Рис. 10. Выбор медленного 3G

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

Рис. 11. Пустой кэш и жесткая перезагрузка

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

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

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

Нажмите Сделать снимки экрана .

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

Рисунок 12. Скриншоты загрузки страницы

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

Рис. 13. Сетевая активность на первом снимке экрана

Нажмите "Создать снимки экрана" еще раз, чтобы закрыть панель "Снимки экрана".

Перезагрузите страницу еще раз.

Нажмите на ресурс, чтобы узнать о нем больше информации. Попробуйте прямо сейчас:

Рис. 14. Вкладка "Заголовки"

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

Рис. 15. Вкладка "Предварительный просмотр"

Эта вкладка полезна, когда API возвращает код ошибки в HTML, а отображаемый HTML легче читать, чем исходный код HTML, или при проверке изображений.

Перейдите на вкладку "Ответ". Отображается исходный код HTML.

Рис. 16. Вкладка "Ответ"

Совет. Когда файл минимизирован, нажатие кнопки "Формат" в нижней части вкладки "Ответ" изменит формат содержимого файла для удобства чтения.

Перейдите на вкладку "Время". Показана разбивка сетевой активности для этого ресурса.

Рис. 17. Вкладка "Время"

Нажмите "Закрыть", чтобы снова просмотреть сетевой журнал.

Рис. 18. Кнопка "Закрыть"

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

Нажмите "Поиск" . Панель поиска откроется слева от сетевого журнала.

Рис. 19. Панель поиска

Введите Cache-Control и нажмите Enter. На панели поиска перечислены все экземпляры Cache-Control, найденные в заголовках или содержимом ресурсов.

Рисунок 20. Результаты поиска для Cache-Control

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

Рис. 21. Результат поиска, выделенный на вкладке "Заголовки"

Закройте панель поиска и вкладку "Время".

Рисунок 22. Кнопки закрытия

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

Рис. 23. Панель инструментов "Фильтры"

Панель инструментов "Фильтры" должна быть включена по умолчанию. Если нет:

Текстовое поле "Фильтр" поддерживает различные типы фильтрации.

Введите png в текстовое поле «Фильтр». Отображаются только файлы, содержащие текст png. В этом случае фильтру соответствуют только файлы в формате PNG.

Рисунок 24. Строковый фильтр

Введите /.*\.[cj]s+$/ .DevTools отфильтровывает любой ресурс, имя файла которого не заканчивается буквами j или c, за которыми следует 1 или более символов s.

Рисунок 25. Фильтр регулярного выражения

Введите -main.css . DevTools отфильтровывает main.css. Если какой-либо другой файл соответствует шаблону, он также будет отфильтрован.

Рис. 26. Отрицательный фильтр

Рисунок 27. Фильтр свойства

Полный список фильтруемых свойств см. в разделе Фильтрация запросов по свойствам.

Очистите текстовое поле "Фильтр" от любого текста.

Чтобы сосредоточиться на файле определенного типа, например на таблицах стилей:

Нажмите CSS. Все остальные типы файлов отфильтровываются.

Рис. 28. Отображение только файлов CSS

Чтобы также просмотреть скрипты, удерживайте клавишу Control или Command (Mac), а затем нажмите JS.

Рис. 29. Показаны только файлы CSS и JS

Нажмите "Все", чтобы удалить фильтры и снова увидеть все ресурсы.

Дополнительные сведения о других рабочих процессах фильтрации см. в разделе Фильтрация запросов.

Как выглядит и ведет себя страница, когда некоторые ее ресурсы недоступны? Он полностью выходит из строя или все еще работает? Заблокируйте запросы, чтобы узнать:

Нажмите Control+Shift+P или Command+Shift+P (Mac), чтобы открыть меню команд.

Рис. 30. Меню команд

Введите блок , выберите Показать блокировку запросов и нажмите Enter.

Рис. 31. Показать блокировку запросов

Нажмите "Добавить шаблон" .

Рисунок 32. Блокировка файла main.css

Нажмите "Добавить".

Обновите страницу. Как и ожидалось, стиль страницы немного испорчен, потому что ее основная таблица стилей заблокирована. Обратите внимание на строку main.css в сетевом журнале. Красный текст означает, что ресурс был заблокирован.

Рис. 33. main.css заблокирован

Снимите флажок Включить блокировку запросов.

Поздравляем, вы завершили обучение. Нажмите «Выдать награду», чтобы получить награду.

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

Панель "Сеть" инструментов разработчика Chrome используется для поиска и решения сетевых проблем с целью оптимизации веб-сайтов. Как только вы откроете DevTools, вкладка Chrome Network начнет записывать все сетевые запросы, которые позже вы сможете отсортировать по различным свойствам.

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

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

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

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

Одна из возможных проблем, которую можно обнаружить на вкладке Chrome Network, – это правильность обработки ресурсов.Кроме того, если вы хотите реализовать тест времени отклика монитора, панель «Сеть» поможет вам выполнить моделирование, чтобы проанализировать, как ваша веб-страница загружается на более медленных компьютерах.

Содержание

Chrome DevTools Network: основные советы

В этом руководстве мы рассмотрим панель "Сеть" инструментов разработчика Chrome.
Эта панель используется для анализа производительности сети и записи запросов, пока открыты DevTools (или пока вы не останавливаете процесс записи намеренно).

Объяснение сетевой панели

На вкладке Chrome Network записываются все сетевые запросы, пока открыты DevTools.

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

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

Остановить/начать запись сетевого журнала: если кнопка красная, остановите процесс записи, нажав ее. Если он серый, нажмите кнопку, чтобы начать запись.
Очистить: удаление ранее записанных запросов.
Создание снимков экрана: выбрав этот параметр и перезагрузив страницу, вы получите снимки экрана, показывающие, какие элементы страницы загружаются первыми, а какие занимают больше времени.
Фильтр: отображение интерфейса фильтра.
Использовать большие строки запроса: переключение между большими и меньшими строками для отображения данных запросов.
Скрыть обзор: переключает видимость каскадной диаграммы.
Группировать по фреймам: запросы группируются в соответствии с тем, к какому фрейму они принадлежат (вы можете проверить, какие фреймы присутствуют в целом, на панели консоли).
Сохранить журнал: сохраняет журнал на протяжении всей навигации и перезагрузки.
Отключить кеш: отключает использование кеша для имитации загрузки страницы в первый раз.
Офлайн: имитирует работу в автономном режиме.

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

Содержимое таблицы журнала

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

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

Читайте также: