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

Обновлено: 07.01.2025

От автора: новые функции и основные изменения, внесенные в Chrome DevTools, включают в себя: блэкбоксинг на панели «Network», автоматическая настройка масштабирования в режиме устройства, удобочитаемые вкладки «Preview» и «Response», предварительный просмотр содержимого HTML на вкладке «Предварительный просмотр», Local Overrides со стилями внутри HTML.

Примечание. Проверьте в chrome://version, какую версию Chrome вы используете. Если это более ранняя версия, эти функции не будут доступны. Если более поздняя, функции могут быть изменены. Chrome автоматически обновляет основную версию каждые 6 недель.

Блэкбоксинг на панели «Network»

Столбец «Initiator» на панели «Network» сообщает, почему был запрошен ресурс. Например, если JavaScript вызывает выбор изображения, столбец Initiator показывает строку кода JavaScript, вызвавшую запрос.

Примечание. Вы можете скрыть или отобразить столбцы на панели «Network», щелкнув правой кнопкой мыши заголовок таблицы.

Раньше, если инфраструктура оборачивала сетевые запросы в оболочку, столбец Initiator не был бы таким полезным. Все сетевые запросы указывали на одну и ту же строку кода оболочки.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Наведите указатель мыши на столбец Initiator. Стек вызова, вызвавший запрос, появляется во всплывающем окне.

Щелкните правой кнопкой мыши вызов, который вы хотите скрыть от результатов Initiator.

Выберите Blackbox script . Столбец Initiator теперь скрывает любые вызовы из сценария, которые вы отметили.

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

Удобочитаемые вкладки «Preview» и «Response»

Вкладка «Preview» на панели «Network» теперь подключает удобочитаемые ресурсы по умолчанию, когда обнаруживает, что эти ресурсы были уменьшены.

Чтобы просмотреть неограниченную версию ресурса, используйте вкладку «Response». Вы также можете вручную распечатать ресурсы со вкладки «Response» с помощью новой кнопки «Format».

Предварительный просмотр содержимого HTML на вкладке «Preview»

Раньше вкладка «Preview» на панели «Network» отображала код ресурса HTML в определенных ситуациях, во время рендеринга предварительного просмотра HTML в других. На вкладке «Preview» всегда выполняется базовый рендеринг HTML. Он не предназначен для полного браузера, поэтому он может не отображать HTML так, как вы ожидаете. Если хотите увидеть код HTML, откройте вкладку «Response» или щелкните правой кнопкой мыши ресурс и выберите «Open in Sources panel».

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Автоматическая настройка масштабирования в режиме устройства

В режиме Device Mode откройте раскрывающееся меню Zoom и выберите «Auto-adjust zoom», чтобы автоматически изменять размер окна просмотра, когда вы меняете ориентацию устройства.

Теперь Local Overrides работает с некоторыми стилями, определенными в HTML

Когда DevTools запустил Local Overrides в Chrome 65, одним из ограничений было то, что он не мог отслеживать изменения в стилях, определенных в HTML. Например, на рисунке ниже есть правило стиля в head документа, объявляющего font-weight: bold для элементов h1.

В Chrome 65, если вы изменили объявление типа font-weight через панель стиля DevTools, Local Overrides не будет отслеживать изменение. Другими словами, при следующей перезагрузке стиль вернется к font-weight: bold. Но в Chrome 66 изменения, подобные этому, сохраняются при загрузке страниц.

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

Бонусный совет: сценарии фреймворка Blackbox сделает контрольные точки обработчика событий более полезными

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

Ранее, когда я создал видеоролик «Начните с отладки JavaScript», некоторые зрители прокомментировали, что точки прерывания обработки событий вредны для приложений, построенных поверх фреймворков, потому что обработчики событий часто обернуты в код рамки. Например, на рисунке ниже я установил брейкпоинт для кликов в DevTools. Когда я нажимаю кнопку в демо, DevTools автоматически приостанавливается в первой строке кода обработчика. В этом случае он останавливается в коде оболочки Vue.js в строке 1802, что не так полезно.

Поскольку сценарий Vue.js находится в отдельном файле, я могу использовать этот код из панели «Call Stack» , чтобы сделать брейкпоинт click более полезным

В следующий раз, когда я нажимаю кнопку и запускаю брейкпоинт click , запускается код Vue.js, не останавливаясь на нём, а затем останавливается на первой строке кода в обработчике моего приложения, и именно там я все это время хотел остановиться.

Запрос от команды DevTools: обратите внимание на Canary

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

Обратная связь

Автор: Kayce Basques

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Недавно я уже рассказывала о наборе инструментов DevTools, встроенных в Google Chrome. И о их полезных фишках, которые не на поверхности. Таких довольно много, поэтому продолжу. Расскажу об эффективном использовании вкладки Network в меню инструмента. Для SEO-специалистов и не только.

Как запустить Network в DevTools

Напомню, есть несколько способов открыть DevTools:

• кликнуть правой кнопкой мыши на элемент на странице и выбрать «Просмотреть код»;
• Command + Option + C или Command + Option + I для Mac OS;
• Ctrl + Shift + C или Ctrl + Shift + I для Windows, Linux, Chrome OS;
• F12 также для Windows.

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

При первом открытии она может оказаться пустой — тогда просто перезагрузите страницу.

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

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

• Status — код ответа;
• Type — тип ресурса;
• Initiator — что вызвало запрос ресурса. Щелкнув на ссылку в столбце Initiator, вы перейдете к исходному коду, вызвавшему запрос;
• Size — размер ресурса;
• Time — как долго длился запрос;
• Waterfall — графическое представление различных этапов запроса.

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

Функционал вкладки Network

Работать в Network удобно, если хорошо знать ее возможности.

1. Столбцы сетевого журнала можно настраивать. Есть много дополнительных столбцов с полезной информацией, а неиспользуемые вы можете скрыть.

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

2. Можете фильтровать данные в журнале с помощью панели инструментов Filter.

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

Инструмент Filter поддерживает множество различных типов фильтрации. Можно использовать не только отдельные слова, но и регулярные выражения и свойства.

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

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

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

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

7. Для сохранения данных в журнале необходимо включить Preserv log.

8. Если нажмете на шестеренку, в панели появятся дополнительные функции:

• Group by frame — разбивает ресурсы на четкие группы в зависимости от домена или типа;
• Capture screenshots — позволяет делать скриншоты страницы в ходе ее загрузки;
• Use large request rows — добавляет дополнительную информацию о файлах в таблицу;
• Show overview — позволяет скрывать и показывать графическую информацию о загрузке страницы.

Но чем эти опции полезны именно SEO-специалисту?

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

Можно сделать проверку ответа сервера из панели Chrome DevTools:

1. Откройте целевую страницу.
2. Ctrl+Shift+C/Command+Option+C или F12.
3. Вкладка Network.

1. Обновите страницу (Ctrl+F5/Command+R).
2. Найдите основной URL (адрес страницы, которую мы изучаем). В колонке Status можно увидеть ответ сервера для данной страницы.

Например, нам нужно узнать ответ сервера для страницы:

Таким образом можно быстро проанализировать ответ сервера страницы и ее отдельных элементов. Увидеть, например, «битые» картинки.

Изначально ход проверки такой же, как и в случае с ответом сервера.

Но после пятого пункта появится шестой:

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

Смена User-Agent

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

1. Заходите в дополнительные настройки DevTools.
2. Выбираете Network Conditions.

1. Внизу панели появится рабочее пространство с нужным функционалом.

1. Снимаете флажок Select automatically и выбираете, например, Googlebot Smartphone.

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

Определение ресурсов, блокирующих рендеринг

Используйте данные о времени загрузки ресурсов на панели Network, чтобы определить, какие ресурсы JS и CSS загружаются до DOM и потенциально блокируют его. Фильтруя данные по CSS и JS, можно вычислить проблемные ресурсы.

Блокировка скриптами и по стилям загрузки — одна из наиболее распространенных проблем со скоростью страницы. Их поиск и анализ ее улучшит или увеличит.

Проверка времени загрузки страницы и ее отдельных элементов

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

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

Выводы

Таким образом, при эффективном использовании панель Network дает немало возможностей для SEO-оптимизации сайта.

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

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

В случае возникновения проблем сервер обычно пишет «Fatal Error», «Warning» и т.д. Иногда сервер возвращает исключительно номер ошибки (например, 404).

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

Поэтому разработчикам стоит уделить этой вкладке особое внимание. Она очень информативна и полезна.

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

Информация, указанная в «Console» очень важна для веб-разработчиков. Именно она позволяет выявить конфликты, которые возникают в скриптах в процессе загрузки страницы. Здесь также отображаются и многие другие ошибки, о нюансах которых можно узнать по указанному тексту. В «Console» также отображается js-файл, в котором данная ошибка была выявлена.

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

Стоит понимать, что для обеспечения нормальной работы сайта «красных» ошибок вообще не должно быть.

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

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

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

Как открыть консоль на разных браузерах

Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

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

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

Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.

Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».

Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.

Какие вкладки есть в консоли и за что они отвечают

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

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

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

Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

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

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

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

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

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

Sources

Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.

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

Network

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

Performance

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

Memory

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

Application

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

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

• проверке сертификата – подтвердил ли сайт свою подлинность TLS;
• tls-соединении – использует ли сайт современные безопасные протоколы;
• безопасности второстепенных источников.

Lighthouse

Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

1. Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
2. TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
3. TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
4. (unknown):Scripterror. Обозначает ошибку скрипта.
5. TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
6. TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
7. Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
9. Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
10. ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!

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

  
• Файл без расширения не имеет формата
  
• After effects скрипт копирование ключей
  
• Вставка формул в ворде презентация
  
• Как смотреть видео в браузере через mx player
  
• Как приручить дракона фон для фотошопа