Как использовать Chrome DevTools при анализе сайта

Полезные функции Chrome DevTools

• Проверка ответа сервера
• Проверка мобильной адаптивности
• Проверка мобильной выдачи
• Региональная поисковая выдача
• Изменение дизайна
• Анализ протокола безопасности
• Анализ скорости загрузки страницы

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

Сегодня рассматриваем только инструменты Google Chrome. Большинство описанных функций можно найти и в других популярных браузерах.

Открывается панель просто:

Правая кнопка мыши (контекстное меню) → «Просмотреть код».

Открыть панель без мыши можно комбинацией клавиш «Ctrl+Shift+C».

Полезные функции Chrome DevTools

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

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

1. Открываем целевую страницу + «Ctrl+Shift+C».
2. Вкладка Network. Уже в ней перезагружаем страницу через «Ctrl+F5».
3. Среди всего списка загружаемых url находим наш основной (при наведении показывается адрес страницы).

Например, мы хотим увидеть ответ сервера страницы https://www.olx.ua/elektronika/tehnika-dlya-kuhni/hlebopechki/odessa/.

В колонке Status есть код ответа 200.

Полный список http-заголовков можно увидеть при нажатии на url, во вкладке «Headers».

Уже здесь можно изучить подробнее http-заголовки, которые отдаёт страница. Расшифровка заголовков, которые могут оказывать влияние на индексирование/ранжирование страницы, приведена в нашей статье.

Проверка мобильной адаптивности

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

Как посмотреть

1. В панели выбираем иконку (1) (или нажимаем «Ctrl+Shift+M») и уже можно оценивать, как страница адаптирована для мобильных устройств.
2. В выпадающем списке (2) можно выбрать устройство или через кнопку «Edit» добавить собственное.

Проверка мобильной выдачи

Описанным выше способом можно анализировать выдачу ПС на мобильных.

Как сделать

1. Открываем выдачу + Консоль + Выбираем иконку (1).
2. Снова нажимаем «Поиск».
3. Получаем отображение выдачи на мобильных устройствах.

Региональная поисковая выдача

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

Как сделать

Открываем дополнительные инструменты в консоли (три точки) + More tools + Sensors.

Далее внимание на «Geolocation» и выпадающий список.

Здесь есть несколько дефолтных геоточек, но их можно дополнить интересующими вас регионами через кнопку «Manage».

Порядок действий для добавления своей геоточки:

1. «Add location» – открывает редактор.
2. Вносите название новой геоточки (в произвольной форме).
3. Lat – географическая широта (вносите в формате десятичных градусов).
4. Long – географическая долгота (вносите также в формате десятичных градусов).
5. Timezone ID – обычно это регион и город.
6. Add – сохранение изменений.

Теперь в вашем браузере заданы нужные регионы для дальнейшей работы. Проверим выдачу Google по запросу «заказать пиццу» в Москве и Минске.

Начнём с Москвы:

1. Гуглим наш запрос «заказать пиццу».
2. Открываем Sensors в консоли, выбираем регион, который мы предварительно уже прописали в браузере. У меня он называется «moscow».

3. Скроллим страницу поиска вниз и нажимаем «Use precise location» или «Обновить».

4. Поднимаемся вверх и снова жмём на лупу. Если браузер запрашивает разрешение на доступ к геоданным, то разрешаем.

В итоге получаем московскую выдачу.

Сменив таким же способом Москву на Минск, получаем белорусскую выдачу:

Изменение дизайна

Часто при анализе сайта, в особенности юзабилити, возникает необходимость «примерить» дополнительные элементы дизайна. И здесь нам тоже помогает DevTools.

Например, мы хотим изменить цвет заливки элемента быстро, не запуская дополнительного функционала. Допустим, мы хотим изменить цвет блока поиска авиабилетов на сайте https://www.booking.com/. Изначально этот блок выглядит так:

Как изменить

1. Стрелкой выбираете нужный элемент.
2. Переходим на вкладку «Styles».
3. Выбираем на палитре новый цвет для нашего блока.

В рамках той же задачи по изменению дизайна может понадобиться быстро заменить/добавить текст.

Как это сделать

1. Открываем вкладку Console.
2. Прописываем следующее – document.designMode=’on’.

Теперь на нашей странице появляется курсор, которым можно изменять текст и даже удалять элементы дизайна. Так мы заменили текст заголовка с «Search hundreds of travel sites at once» на «Hello, world!».

Анализ протокола безопасности

При помощи панели можно получить информацию о безопасности текущей страницы и данные о сертификате безопасности во вкладке Security (она может быть скрыта за значком «>>»).

Вкладка Security показывает не только подключение нашего сайта, но и сторонних сервисов (блок Overview). Например, на изображении ниже мы видим, что сайт не использует протокол безопасности, но внешний сервис на https-соединении.

Анализ скорости загрузки страницы

На вкладке «Audits» можно получить рекомендации относительно скорости загрузки страницы. Анализ проводится инструментом Lighthouse. Для начала браузер предлагает выбирать настройки будущего отчёта – отметьте необходимое либо оставьте галочки по умолчанию. Для подготовки отчёта нажимайте кнопку «Run audits».

Через несколько секунд мы получаем знакомый отчёт о скорости загрузки страницы.

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

Как сделать

1. Вкладка «Network» → значок «Network settings».
2. Ставим галочку на «Capture screenshots», перезагружаем страницу (Ctrl+R).
3. Оцениваем скорость отрисовки анализируемой страницы.

Здесь же вы можете эмулировать сеть. Браузер предлагает online и offline-соединения, Fast и Slow 3G. А также вы можете прописать собственные настройки скорости интернет-соединения через кнопку «Add».

Chrome DevTools – очень информативный инструмент, но в статье мы перечислили наиболее ценные для SEO-специалистов функции. А какие из возможностей DevTools используете вы?

Еще по теме:

• Отслеживание кликов в Google Analytics c помощью Google Tag Manager
В данной статье мы рассмотрим, как настроить отслеживание кликов по любому элементу на сайте в Google Analytics с помощью Google Tag Manager (далее GTM). Если...
• Правильно ли отображается передача DR по Ahrefs при подклейке дропа к сайту и стоит ли на это ориентироваться?
Не пойму, клею к 1 сайту дроп с сылочным DR по ahrefs 15, получаю у своего сайта DR 12. Ну норм, причем вес уже через...
• Как пользоваться операторами Яндекс Wordstat
В предыдущей статье «Как узнать частоту ключевого запроса в Яндекс и Google» я разобрал способы, с помощью которых можно узнать частоту запроса, а также рассмотрел...
• Как выявить все ссылки на конкретную страницу сайта конкурента?
Как определить и найти все ссылки на конкретную страницу (не сайт) конкурента? Ответ Для этого вы можете: Воспользоваться сервисом наподобие Ahrefs, который показывает беклинки отдельных...
• Отслеживание отправки форм на сайте с помощью GTM
Ранее мы уже писали о том, как установить и настроить Google Tag Manager на сайт, а также как с его помощью настроить отслеживание кликов. В...