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

Как эффективно использовать Network в Chrome DevTools

Недавно я уже рассказывала о наборе инструментов 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 можно увидеть ответ сервера для данной страницы.

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

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

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

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

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

• на панели справа (с более подробной информацией) можно увидеть, какие заголовки HTTP настроены сейчас.

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

Смена User-Agent

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

1. Панель Network в Chrome DevTools можно настроить «под себя». Например, скрыть неиспользуемые столбцы сетевого журнала, фильтровать данные, в том числе по типу ресурса, отключать запись сетевого журнала или регулировать скорость подключения.
2. Для SEO-специалиста инструмент полезен, в первую очередь, тем, что позволяет сделать проверку ответа сервера или просмотреть заголовки HTTP.
3. Чтобы увидеть, как ваш сайт просматривает Google, вы можете сменить пользовательский агент.
4. Можете также определить ресурсы, блокирующие рендеринг или проверить время загрузки страницы.

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

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

Inspect network activity

Published on Friday, February 8, 2019

Technically, I’m a writer

This is a hands-on tutorial of some of the most commonly-used DevTools features related to inspecting a page’s network activity.

See Network Reference if you’d like to browse features instead.

Read on, or watch the video version of this tutorial:

# When to use the Network panel

In general, use the Network panel when you need to make sure that resources are being downloaded or uploaded as expected. The most common use cases for the Network panel are:

• Making sure that resources are actually being uploaded or downloaded at all.
• Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on.

If you’re looking for ways to improve page load performance, don’t start with the Network panel. There are many types of load performance issues that aren’t related to network activity. Start with the Audits panel because it gives you targeted suggestions on how to improve your page. See Optimize Website Speed.

# Open the Network panel

To get the most out of this tutorial, open up the demo and try out the features on the demo page.

Figure 1. The demo

You might prefer to move the demo to a separate window.

Figure 2. The demo in one window and this tutorial in a different window

Open DevTools by pressing Control+Shift+J or Command+Option+J (Mac). The Console panel opens.

Figure 3. The Console

Figure 4. DevTools docked to the bottom of the window

Click the Network tab. The Network panel opens.

Figure 5. DevTools docked to the bottom of the window

Right now the Network panel is empty. That’s because DevTools only logs network activity while it’s open and no network activity has occurred since you opened DevTools.

# Log network activity

To view the network activity that a page causes:

Reload the page. The Network panel logs all network activity in the Network Log.

Figure 6. The Network Log

Each row of the Network Log represents a resource. By default the resources are listed chronologically. The top resource is usually the main HTML document. The bottom resource is whatever was requested last.

Each column represents information about a resource. Figure 6 shows the default columns:

Status. The HTTP response code.

Type. The resource type.

Initiator. What caused a resource to be requested. Clicking a link in the Initiator column takes you to the source code that caused the request.

Time. How long the request took.

Waterfall. A graphical representation of the different stages of the request. Hover over a Waterfall to see a breakdown.

Note The graph above the Network Log is called the Overview. You won’t be using it in this tutorial, so you can hide it if you prefer. See Hide the Overview pane.

So long as you’ve got DevTools open, it will record network activity in the Network Log. To demonstrate this, first look at the bottom of the Network Log and make a mental note of the last activity.

Now, click the Get Data button in the demo.

Look at the bottom of the Network Log again. There’s a new resource called getstarted.json . Clicking the Get Data button caused the page to request this file.

Figure 7. A new resource in the Network Log

# Show more information

The columns of the Network Log are configurable. You can hide columns that you’re not using. There are also many columns that are hidden by default which you may find useful.

Right-click the header of the Network Log table and select Domain. The domain of each resource is now shown.

Figure 8. Enabling the Domain column

Tip You can see the full URL of a resource by hovering over its cell in the Name column.

# Simulate a slower network connection

The network connection of the computer that you use to build sites is probably faster than the network connections of the mobile devices of your users. By throttling the page you can get a better idea of how long a page takes to load on a mobile device.

Click the Throttling dropdown, which is set to Online by default.

Figure 9. Enabling throttling

Select Slow 3G.

Figure 10. Selecting Slow 3G

Long-press Reload and then select Empty Cache And Hard Reload.

Figure 11. Empty Cache And Hard Reload

On repeat visits, the browser usually serves some files from its cache, which speeds up the page load. Empty Cache And Hard Reload forces the browser to go the network for all resources. This is helpful when you want to see how a first-time visitor experiences a page load.

Note The Empty Cache And Hard Reload workflow is only available when DevTools is open.

# Capture screenshots

Screenshots let you see how a page looked over time while it was loading.

Click Capture Screenshots .

Reload the page again via the Empty Cache And Hard Reload workflow. See Simulate a slower connection if you need a reminder on how to do this. The Screenshots pane provides thumbnails of how the page looked at various points during the loading process.

Figure 12. Screenshots of the page load

Click the first thumbnail. DevTools shows you what network activity was occurring at that moment in time.

Figure 13. The network activity that was happening during the first screenshot

Click Capture Screenshots again to close the Screenshots pane.

Reload the page again.

# Inspect a resource’s details

Click a resource to learn more information about it. Try it now:

Click getstarted.html . The Headers tab is shown. Use this tab to inspect HTTP headers.

Figure 14. The Headers tab

Click the Preview tab. A basic rendering of the HTML is shown.

Figure 15. The Preview tab

This tab is helpful when an API returns an error code in HTML and it’s easier to read the rendered HTML than the HTML source code, or when inspecting images.

Click the Response tab. The HTML source code is shown.

Figure 16. The Response tab

Tip When a file is minified, clicking the Format button at the bottom of the Response tab re-formats the file’s contents for readability.

Click the Timing tab. A breakdown of the network activity for this resource is shown.

Figure 17. The Timing tab

Click Close to view the Network Log again.

Figure 18. The Close button

# Search network headers and responses

Use the Search pane when you need to search the HTTP headers and responses of all resources for a certain string or regular expression.

For example, suppose you want to check if your resources are using reasonable cache policies.

Click Search . The Search pane opens to the left of the Network log.

Figure 19. The Search pane

Type Cache-Control and press Enter. The Search pane lists all instances of Cache-Control that it finds in resource headers or content.

Figure 20. Search results for Cache-Control

Click a result to view it. If the query was found in a header, the Headers tab opens. If the query was found in content, the Response tab opens.

Figure 21. A search result highlighted in the Headers tab

Close the Search pane and the Timing tab.

Figure 22. The Close buttons

# Filter resources

DevTools provides numerous workflows for filtering out resources that aren’t relevant to the task at hand.

Figure 23. The Filters toolbar

The Filters toolbar should be enabled by default. If not:

1. Click Filterto show it.

# Filter by string, regular expression, or property

The Filter text box supports many different types of filtering.

Type png into the Filter text box. Only the files that contain the text png are shown. In this case the only files that match the filter are the PNG images.

Figure 24. A string filter

Type /.*\.[cj]s+$/ . DevTools filters out any resource with a filename that doesn’t end with a j or a c followed by 1 or more s characters.

Figure 25. A regular expression filter

Type -main.css . DevTools filters out main.css . If any other file matched the pattern they would also be filtered out.

Figure 26. A negative filter

Type domain:raw.githubusercontent.com into the Filter text box. DevTools filters out any resource with a URL that does not match this domain.

Figure 27. A property filter

See Filter requests by properties for the full list of filterable properties.

Clear the Filter text box of any text.

# Filter by resource type

To focus in on a certain type of file, such as stylesheets:

Click CSS. All other file types are filtered out.

Figure 28. Showing CSS files only

To also see scripts, hold Control or Command (Mac) and then click JS.

Figure 29. Showing CSS and JS files only

Click All to remove the filters and see all resources again.

See Filter requests for other filtering workflows.

# Block requests

How does a page look and behave when some of its resources aren’t available? Does it fail completely, or is it still somewhat functional? Block requests to find out:

Press Control+Shift+P or Command+Shift+P (Mac) to open the Command Menu.

Figure 30. The Command Menu

Type block , select Show Request Blocking, and press Enter.

Figure 31. Show Request Blocking

Click Add Pattern .

Figure 32. Blocking main.css

Click Add.

Reload the page. As expected, the page’s styling is slightly messed up because its main stylesheet has been blocked. Note the main.css row in the Network Log. The red text means that the resource was blocked.

Figure 33. main.css has been blocked

Uncheck the Enable request blocking checkbox.

# Next steps

Congratulations, you have completed the tutorial. Click Dispense Award to receive your award.

Check out the Network Reference to discover more DevTools features related to inspecting network activity.

Панель разработчика — вкладка «Network»

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

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

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

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

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

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

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

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

У пользователей зачастую возникает такая проблема: они отправляют сообщение в приватный чат, но после этого ничего не происходит. Если во вкладке «Network» не отображаются запросы пользователя, то разработчику стоит обратить внимание на вкладку «Console». Дело в том, что в такой ситуации проблемы, скорее всего, произошли в JavaScript-скриптах сайта.

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

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

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

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

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

Консоль в браузере Chrome

В каждом браузере есть свой инструмент разработчика – это то, что многие называют просто «консолью», рассмотрим Консоль в браузере Chrome. Выглядит вот так:

Консоль в браузере Chrome

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

Как открыть консоль в браузере Chrome:

— нажав одновременно клавиши Ctrl + Shift + I;

— ПКМ по элементу страницы –> Просмотреть код;

— меню браузера –> Дополнительные Инструменты –> Инструменты Разработчика.

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

Итого в ней есть 8 вкладок, каждая из которых отображает определенные данные:

1 – Elements (содержит весь html/css код страницы и позволяет выбрать элементы для исследования, а также редактировать их)

2 – Console (отображает наличие/отсутствие ошибок/предупреждений в коде)

3 – Sources (позволяет выполнять операции с кодом страницы)

4 – Network (отслеживает время исполнения определенных запросов и сами запросы)

5 – Timeline (измеряет время загрузки страницы)

6 – Profiles (позволяет создавать JavaScript, профили CPU)

7 – Resources (позволяет просмотреть определенные сохраненные данные)

8 – Audits (проводит проверки определенных параметров)

Теперь пройдемся по каждой из них в отдельности и поподробнее:

Панель Elements

Панель элементов

Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере. Можно визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Как вы, наверное, заметили (а может и нет), в левом окошке отображается html–документ, в правом – css. Проводя нехитрые манипуляции с данными можно изменить наполнение и дизайн открытой страницы. Например, можно поменять текст в окне, если редактировать его в теле html, а также изменить шрифт страницы поменяв его значение в поле css. Но это не сохранит введенных данных, а поможет просто визуально оценить примененные изменения. Помимо этого, можно просмотреть код конкретного элемента страницы. Для этого нужно райткликнуть его и выбрать команду «Посмотреть код».

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

Эмулятор девайсов

При клике на кнопку Select Model выпадет дропдаун с огромнейшим выбором девайсов. Выбираете что вам нужно – и вуаля! Страница отображена так, как если бы это был девайс. Таким образом панель Elements можно использовать не только для просмотра или редактирования страницы, но и для эмуляции устройств отображения. Все унифицировано и доступно в Хроме!

Панель Console

Панель console

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

Очистить поле вкладки Console (в случае, если вам требуется удалить сообщения о предыдущих ошибках) можно кликнув иконку перечеркнутого круга. Фильтровать сообщения в консоли можно по типу — ошибки, предупреждения, инфо, стандартный вывод, сообщения отладчика, исправленные — выбрав одну из доступных опций консоли.

Панель Sources

Как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):

1. Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
2. Зона текста. В ней находится текст файлов.
3. Зона информации и контроля.

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

Панель Network

Панель Network

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

Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.

Панель Performance

Performance панель

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

Панель Memory

Панель Memory

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

CPU profiler предоставляет информацию по времени, затраченному на выполнение Javascript.

Heap profiler отображает распределение памяти.

JavaScript profile детализирует, куда именно ушло время при выполнении скриптов.

Панель Application

Панель Application

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

Панель Audits

Аудит панель

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

Панель Secuirity

Security панель

Security Panel показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.