Заказать SEO-услуги
Согласен с правилами обработки персональных данных
Скорость ответа - до 30 минут!

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

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

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

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

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

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

Открыть Devtools

Открыть панель без мыши можно комбинацией клавиш «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/.

Проверить ответ сервера Devtools

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

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

Проверить ответ сервера Devtools

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

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

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

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

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

 Проверить мобильность через Devtools

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

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

Как сделать

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

Проверить мобильность через Devtools

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

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

Как сделать

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

Изменить геолокацию через Devtools

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

Изменить геолокацию через Devtools

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

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

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

Изменить геолокацию через Devtools

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

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

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

 Изменить геолокацию через Devtools

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

Изменить геолокацию через Devtools

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

Изменить геолокацию через Devtools

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

Изменить геолокацию через Devtools

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

Изменить геолокацию через Devtools

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

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

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

Правки дизайна через Devtools

Как изменить

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

Изменить цвет элемента Devtools

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

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

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

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

Изменить текст через Devtools

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

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

Проверить протокол через Devtools

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

Проверить протокол через Devtools

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

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

Проверить протокол через Devtools

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

Проверить протокол через Devtools

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

Как сделать

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

Проверить протокол через Devtools

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

Проверить протокол через Devtools

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

Сомневаетесь в своей SEO-стратегии? Наш специалист подскажет Вам правильное решение!

Получить совет эксперта

Подписаться на рассылку

Еще по теме:


Ольга С.

SEO-аналитик

Работала в рекламе, занималась копирайтингом.

Дожила до своих лет, предсказала будущее, вывела в ТОП сайт ветеринарной клиники.

Сейчас помогаю развивать клиентские проекты в SiteClinic.

Девиз: Рано или поздно это придется сделать, поэтому лучше рано.

Оцените мою статью: 

1 Star2 Stars3 Stars4 Stars5 Stars (14 оценок, среднее: 4,21 из 5)

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Наверх
  • Stanislav Romanenko

    Прикольно, про design mode = on не знал, крутая штука 🙂

  • олег стоянов

    Спасибо — круто сделана статья, информативно! Респект!

  • Sergey Shok

    Интересно. Спасибо.