Как использовать 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 используете вы?

Еще по теме:

• В каких приложениях можно посмотреть на нынешний трафик сайтов и 2-3 года назад?
Подскажите, какие есть сайты или приложения, где можно посмотреть на нынешний трафик сайтов и 2-3 года назад? Ответ Среди самых популярных сервисов для оценки истории...
• Обзор сервисов для съёма позиций сайта
Критерии оценки https://seolib.ru/ https://topvisor.com/ru/ https://seranking.ru/ https://ahrefs.com/ https://allpositions.ru/ https://ru.megaindex.com/ https://www.rush-analytics.ru/ https://www.semrush.com/ https://serpstat.com/ https://tools.pixelplus.ru/ https://line.pr-cy.ru/ https://serphunt.ru/ https://www.wincher.com/ Результаты Несколько месяцев назад, отвечая на вопрос в Телеграме, я...
• 10 настроек плагина RDS Bar для быстрого анализа сайта
Нам часто поступают вопросы о том, какие программы мы используем при анализе сайтов. Сегодня мы разберём один из наиболее популярных плагинов для браузеров, must have...
• Выбор Telegram-каналов для рекламы: самостоятельный подход vs использование Telega.in
Перспективность Telegram как рекламной платформы очевидна — об этом свидетельствует стремительный рост числа пользователей и увеличение объема интеграций на площадке. Тем не менее, многие рекламодатели...
• Чем опасны цепочки редиректов и как их можно определить?
Вопрос про цепочки редиректов: чем они опасны, всегда ли их нужно исправлять, чем удобнее всего отлавливать? Где-то слышал непопулярное мнение о том, что их специально...