Как использовать 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...
• Каким сервисом можно определить изменение релевантной страницы?
Подскажите каким сервисом можно отследить, что релевантная страница по запросу меняется, т.е. другими словами какой сервис может показать релевантные дубли? Ответ Для отслеживания истории изменений...
• Как определить намеренно скрытые от консоли ссылки на сайт и как их можно скрыть?
При анализе конкурентов изучаем ссылочную массу их сайтов. Как определить намеренно скрытые от консоли ссылки на сайт? И как их скрыть у себя на сайте?...
• Выбор Telegram-каналов для рекламы: самостоятельный подход vs использование Telega.in
Перспективность Telegram как рекламной платформы очевидна — об этом свидетельствует стремительный рост числа пользователей и увеличение объема интеграций на площадке. Тем не менее, многие рекламодатели...
• В каких приложениях можно посмотреть на нынешний трафик сайтов и 2-3 года назад?
Подскажите, какие есть сайты или приложения, где можно посмотреть на нынешний трафик сайтов и 2-3 года назад? Ответ Среди самых популярных сервисов для оценки истории...