Chrome Dev Tools: 7 фишек для SEO анализа в инструментах разработчика Chrome

Chrome DevTools — набор инструментов для веб-разработчика, встроенный в браузер Google Chrome. Он помогает быстро редактировать страницы и диагностировать проблемы. Весьма полезен для разработчиков. Но что он дает SEO-специалисту? Об этом и поговорим.
Как открыть DevTools
Чтобы открыть DevTools, кликните правой кнопкой мыши на элемент и выберите «Просмотреть код».
Или нажмите:
- Command+Option+C или Command+Option+I для Mac OS;
- Ctrl+Shift+C или Ctrl+Shift+I для Windows, Linux, Chrome OS;
- F12 также для Windows.
А теперь расскажу подробнее о том, какие возможности дает этот инструмент.
Сравнение визуализированного и исходного HTML
Вы можете сравнить исходный HTML (до выполнения JavaScript) с визуализированным (после выполнения JavaScript).
Как просмотреть исходный HTML-код:
- Command+U (Mac OS) или Ctrl+U (Windows, Linux, Chrome OS) ;
- щелкните правой кнопкой мыши и выберите «Просмотр кода страницы»;
- введите view-source: https://example.com в своем браузере.
Визуализированный HTML — это в основном то, что вы видите в DOM. Получите доступ к коду, используя:
- Command+Option+I (Mac OS) или CTRL+Shift+I (Windows) ;
- Нажать F12 и перейти на вкладку Elements.
Зачем это нужно? Полезно в работе с сайтами, использующими AJAX-технологии, или с сайтами на JavaScript фреймворках. Вы можете проверить основные элементы содержания своей страницы, в том числе обработанные с помощью JavaScript.
Анализ протокола безопасности
В панели Chrome DevTools есть информация о безопасности текущей страницы и данные о сертификате безопасности. Чтобы ее увидеть, перейдите на вкладку Security.
Показывает не только подключение вашего сайта, но и сторонних сервисов (блок Overview).
Опция позволяет увидеть, безопасна ли страница, имеет ли она действующий сертификат HTTPS, тип безопасного соединения. Есть ли проблемы со смешанным содержимым из-за небезопасного происхождения любого используемого ресурса.
Chrome DevTools пригодится во время перехода на HTTPS.
Копирование ключевых паттернов
Вы можете скопировать элементы XРath, JSPath и CSS Selectors.
Например, вам нужно спарсить цены с сайта с помощью Netpeak Spider. Для этого надо знать ХPath элемента цены.
Что необходимо:
- Открыть страницу товара и выделить цену.
- Щелкнуть по ней правой кнопкой и нажать «Показать код элемента» (Inspect в англоязычном интерфейсе).
- В открывшемся окне найти элемент, отвечающий за цену (он будет подсвечен).
- Кликнуть по нему правой кнопкой и выбрать «Копировать» → «Копировать XPath».
Такое копирование ключевых паттернов очень важно для сканирования и сбора определенных элементов на сайте.
Просмотр внешнего вида сайта для мобильного устройства
В DevTools вы можете переключаться между различными мобильными устройствами, чтобы проверить, как на них отображается страница.
В панели инструментов DevTools на сайте нажмите на кнопку с телефоном.
Страница преобразится в мобильную версию (как ее видит пользователь на мобильном устройстве). Вверху появится меню с различными возможностями.
- Из предложенного списка можно выбрать конкретную модель смартфона.
А если нужного устройства в списке нет, нажмите Edit:
- дальше выберите из списка;
- или добавьте свое устройство, нажав Add custom device.
Чтобы добавить устройство, вам понадобятся его параметры.
- Разрешение эмулируемого экрана можно изменить, если в поле типа устройства стоит Responsive. Выбрав определенный тип, разрешение уже не изменить.
- При типе устройства Responsive можно выбрать его вид.
- Есть опция изменить масштаб отображения, чтобы результат лучше вписывался в панель эмулятора.
- Скорость сети. Меню регулирования режима позволяет имитировать мобильное устройство низкого или среднего уровня:
- Mid-tier mobile имитирует быстрый 3G и снижает скорость вашего процессора в 4 раза;
- Low-end mobile имитирует медленный 3G и замедляет процессор в 6 раз.
Имейте в виду, регулирование зависит от обычных возможностей вашего ноутбука или настольного компьютера.
- Кнопка переключения книжной/альбомной ориентации.
Еще одно меню позволяет отображать или скрывать дополнительные элементы управления:
- если выбрана определенная модель телефона или планшета, можно включить/выключить отображение рамок устройства;
- включить/выключить панель медиа-запросов CSS;
- включить/выключить линейки пикселей;
- добавить соотношение пикселей устройства;
- добавить функционал выбора девайса, чтобы увидеть отображение под разные виды устройства. Работает только для типа Responsive, а не для конкретной модели;
- сделать снимок экрана. Если включена рамка девайса, то скрин получится вместе с ней;
- сделать снимок экрана на всю страницу.
Также вы можете масштабировать сайт, как это делал бы пользователь:
- Наведите указатель на устройство, чтобы увидеть круговой «сенсорный» курсор.
- Удерживая нажатой клавишу Shift, щелкните и переместите мышь, чтобы имитировать масштабирование. Оно реагирует на сенсорные события JavaScript, такие как touchstart, touchmove и touchend.
Этим же функционалом можно анализировать выдачу поисковой системы на мобильных устройствах.
Если у вас есть проблемы с трафиком с мобильных устройств, вы сможете детально проанализировать мобильную версию сайта.
Региональная поисковая выдача
Позволяет анализировать поисковую выдачу в разных геолокациях.
Лучше всего зайти на страницу в гостевом режиме. В верхней панели Google Chrome нажмите на изображение пользователя и выберите «Гость».
- Заходите в дополнительные инструменты — Sensors.
- Внизу панели DevTools откроется вкладка Sensors.
- Теперь нужно выбрать локацию.
Можно это сделать с помощью предложенного списка.
Или прописать новую геолокацию:
- нажимаете Manage;
- выбираете Add location, внизу появится новая строка для ввода данных геоточки;
- вводите название;
- географическую широту Lat в формате десятичных градусов;
- географическую долготу Long в формате десятичных градусов;
- Timezone ID — обычно это регион и город;
- Locale — указываете язык в формате ISO 639-1 и регион в формате ISO 3166-1 Alpha 2.
Параметры геолокации вы легко найдете в Google Maps.
Допустим, вам нужно добавить Вашингтон. Прописываете данные новой геоточки, нажимаете Add.
После чего:
- вводите, например, запрос «cafe» в поисковой выдаче (запрос нужно вводить на языке, указанном в Locale) ;
- открываете панель DevTools и заходите в Sensors;
- выбираете регион Вашингтон.
Спускаетесь на странице поиска вниз и кликайте «Обновить».
Вверху в строке поиска нажимаете на знак лупы.
И вы получите выдачу по Вашингтону.
Поисковые системы уже давно регионально зависимые. Если в одном регионе запрос может быть в ТОПе, в другом — необязательно. DevTools удобен как раз для проверки позиций поисковых запросов и получения данных для анализа разницы выдачи в разных регионах.
Анализ скорости на сайте
Существует множество сторонних инструментов для быстрого аудита скорости вашего сайта, включая Google PageSpeed Insights, WebPageTest, Pingdom Tools.
Lighthouse — это открытый ответ Google на инструменты аудита, встроенный в сам Chrome.
Чтобы получить к нему доступ, необходимо:
- Открыть Chrome DevTools.
- Перейти на вкладку Lighthouse и выбрать Generate report.
Вы получите отчет по скорости загрузки с оценкой от Google.
С рекомендациями и диагностикой.
Скорость сайта — один из самых важных факторов ранжирования. Lighthouse дает полный анализ и рекомендации по улучшению скоростных показателей вашего сайта.
Выявление «мертвого» кода
Иногда в ваших файлах CSS и JS будет много лишнего кода, который не используется на странице. В Chrome есть функция под названием Coverage:
- Необходимо перейти в панели DevTools в дополнительные инструменты и выбрать Coverage.
- Внизу появится панель Coverage, которую нужно обновить.
- Теперь вы можете узнать процент неиспользуемых CSS и JS в загруженных файлах. Щелкните по одному из них и увидите используемые и неиспользуемые строки кода красным и синим цветом соответственно.
Если вы заботитесь о производительности своей веб-страницы, важно избавиться от «мертвого» кода. Такой функционал помогает в анализе страницы.
Заказывайте SEO-продвижение у лидеров рынкаФишки на «закуску»
В конце хочется рассказать еще о парочке опций от DevTools. Их редко используют именно SEO-специалисты, но они могут оказаться полезны.
Структурирование кода
Хотя минифицированный код (без «мертвых» элементов) хорош для производительности, очень сложно, глядя на такой сплошной код, понять, что он делает.
В инструментах разработчика Chrome есть удобная функция для отмены минимизации. То есть код будет с отступом и разделен на четко определенные разделы. Его будет легче понять при необходимости технических изменений.
- Перейдите в панель DevTools.
- На вкладке Elements кликните любой ресурс, который минимизирован, например CSS, JS или HTML.
- Новая панель загрузит содержимое, вы увидите фигурные скобки { }.
- Нажмите на них, и Chrome структурирует ваш код.
Снимок экрана веб-страницы в Chrome
Знали ли вы, что в Google Chrome есть встроенная функция создания снимков экрана?
Если хотите сделать скриншот всего сайта:
- Откройте DevTools на нужной странице.
- Нажмите Ctrl+Shift+P на Windows, Linux, Chrome OS или Command+Option+P на Mac OS, чтобы загрузить комaндное меню DevTools.
- Введите в рабочую строку Screenshot и выберите нужный вариант.
- Снимок экрана будет добавлен в вашу папку загрузок.
Запомнить:
- Набор инструментов DevTools от Chrome предоставляет уйму возможностей для оптимизации сайта.
- Среди них анализ разницы между исходным и визуализированным HTML-кодом, анализ безопасности веб-страницы, возможность скопировать ключевые элементы XPath, JSPath и CSS Selectors.
- Есть много инструментов для изучения мобильной версии сайта. Можно посмотреть, как выглядит ваша страничка на экране конкретного гаджета, какая у нее скорость загрузки или как происходит масштабирование.
- Сравнение поисковой выдачи вашего сайта в разных геолокациях, анализ скорости и выявление «мертвого кода».
- И наконец возможность структурировать код или сделать снимок экрана страницы в Chrome.
Напишите в комментариях ваши любимые фишки, чтобы мы все вместе научились максимально эффективно использовать Chrome.
Артем Бородатюк о бизнесе и том, как он меняет мир Андрей Чумаченко о маркетинге, управлении собой и агентством Читать ЧитатьПодписывайтесь на Telegram-каналы основателей Netpeak
Комментарии:
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
23 07 2026 13:31:17
Кликбейтинг в опасности. Если хочешь узнать методы работы антикликбейт-комaнды Facebook, просто нажми на этот заголовок...
22 07 2026 18:24:45
Важный вопрос, если вы рассчитываете на вирусный эффект своих рекламных идей....
21 07 2026 9:38:35
Как разобраться в типах соответствия ключевых слов и определить, что минус-слова блокируют показы нужных ключевых слов....
20 07 2026 22:24:47
Подробная инструкция по интеграции с облачной базой данных и сравнение BI-платформ....
19 07 2026 9:22:21
Наш обзор кинофильма «Социальная сеть» про Facebook и Марка Цукерберга....
18 07 2026 23:35:56
PBN (Private Blog Network) — приватная/частная сеть блогов, сайты-сателлиты, сетки сайтов. Строить их долго, дорого, но это работает....
17 07 2026 15:57:28
Как расширение от Netpeak может облегчить работу над важными SEO-задачами....
16 07 2026 0:36:24
В этой статье я покажу пример визуальной работы с закладкой и пошагово разберу процесс их создания и применения для удобства визуализации данных...
15 07 2026 6:41:52
Как в Google Search можно найти мелодию по примерному напеву...
14 07 2026 16:24:25
Звук телефонного звонка важен и для пользователя интернета. Как точно рассчитать полученную прибыль и рентабельность инвестиций в рекламу...
13 07 2026 11:46:10
Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....
12 07 2026 6:21:39
Что же такое эти authority и чем они лучше и полезнее, к примеру, чем Page Rank?...
11 07 2026 0:26:55
Главная задача крауд-маркетинга — помочь, дать пользователю экспертный ответ и уже в последнюю очередь — оставить ссылку...
10 07 2026 6:19:35
Какие фишки влияют на видимость сайтов? Советы по юзабилити от SEO-специалиста....
09 07 2026 0:38:36
Запускаем первую таргетированную рекламу. Мы составили инструкцию для начинающих таргетолов, а также для SMM-специалистов, которым регулярно нужно рекламировать товары и услуги. Читайте подробнее!...
08 07 2026 16:27:44
Профессор психологии Йельского университета разработала курс по обретению счастья. Его прошли уже 3,5 млн человек...
07 07 2026 13:30:20
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
06 07 2026 3:57:36
Главные вопросы при запуске и настройке любых кампаний: «чего я хочу достичь?», «помогает ли текущая кампания достичь желаемых результатов?», «влияет ли кампания на эффективность других кампаний и источников?». Узнать больше....
05 07 2026 10:20:28
Как избежать скликивания, случайных переходов и «пустых» установок при рекламе мобильного приложения...
04 07 2026 4:44:16
И научиться делать свою рекламу прибыльной. Читайте про типы автостратегий и способы их оптимизации....
03 07 2026 12:32:30
Новости, доработки и обновления в услугах, блоге, Академии блога и Кластере....
02 07 2026 19:58:29
На этой картинке изображены два предмета. Один из них называется «буба», а второй «кики»....
01 07 2026 10:31:28
Как завоевать Instagram, задавая правильные цели и вопросы. Также в статье делимся табличкой лучшего времени постинга для различных тематических публикаций. Узнать больше!...
30 06 2026 13:16:16
Наконец-то вы создали сайт. Вы потратили усилия на дизайн, разработку, его наполнение. Но этого оказалось недостаточно, чтобы о вашем интернет- ресурсе узнали. Как же привлечь посетителей на сайт?...
29 06 2026 19:29:19
Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....
28 06 2026 20:47:54
Образец чек-листа по созданию форм заказа на сайте интернет-магазина...
27 06 2026 23:52:20
Часто руководители, которые прекрасно справляются с работой в мирное время, в период войны перестают быть эффективными. У них нет навыков кризис-менеджмента. Чтобы удержать ситуацию на плаву, кризис-менеджером должен стать главный руководитель компании....
26 06 2026 16:44:55
Информация для SEO- и PPC-специалистов, маркетологов и предпринимателей малого бизнеса...
25 06 2026 0:31:30
Сакральные знания о контекстной рекламе для экспертов и тех, кто с ними сотрудничает....
24 06 2026 16:16:45
Под какие треки работают интернет-маркетологи, копирайтеры и другие специалисты digital-рынка....
23 06 2026 19:49:26
Часто копирайтеры пишут для поисковых роботов, не заботясь о качестве контента и читабельности. Рассмотрим метрики для оценки ридабилити....
22 06 2026 9:13:15
Большой проект Джима Коллинза и его комaнды. Одна из лучших книг в нашей библиотеке. Всем рекомендуется к прочтению!...
21 06 2026 22:18:48
Сегодня стоит озвучить особенности страниц и групп в социальной сети Фейсбук...
20 06 2026 9:11:48
Объясняем по пунктам, как создать и правильно настроить DSA c таргетингом на фид и содержание сайта...
19 06 2026 11:14:43
Более строгие требования к таким ресурсам обуславливают свои подходы....
18 06 2026 10:36:45
Руководство по переносу кампаний в новый аккаунт Рекламы...
16 06 2026 7:41:45
Все дело в формате объявлений Instant Experience с подключенным каталогом товаров. Нет, не только в нем. Узнать больше!...
15 06 2026 16:10:37
Как найти тему для поста, который и в онлайн поиске будет хорошо ранжироваться, и по социалкам разойдется, и комментарии в треде обеспечит...
14 06 2026 4:20:40
Чтобы увеличить количество заявок и получить волну новых заказов, нужен комплексный подход...
13 06 2026 3:49:57
Правильно выбранная соц. площадка поможет раскрутить бизнес эффективно....
12 06 2026 12:19:40
Список рекомендаций для SMM-специалистов. Статья будет полезна SMM-менеджерам, проектным менеджерам, а также владельцам бизнеса, которые предпочитают самостоятельно ставить комaнде задачи и отслеживать выполнение целей....
11 06 2026 22:41:15
Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...
10 06 2026 15:29:58
Достаточно настроить соответствующим способом триггеры и теги. Мануал здесь....
09 06 2026 3:32:53
Структура обзора, правила написания и важные хаpaктеристики этого формата. Подача информации в обзоре и запрещенные методы, которые отпугнут клиентов. Узнать больше!...
08 06 2026 8:52:30
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
07 06 2026 2:40:59
Настройка пикселя TikTok — короткий и понятный мануал. Устанавливаем пиксель вручную: вставка кода на сайт и интеграция через Install pixel code by 3rd party tool. Читать дальше....
06 06 2026 9:26:40
Четыре важных шага для новичка...
05 06 2026 1:18:46
Чтобы увеличить продажи и улучшить их эффективность в новых условиях необходимо применять «социальные доказательства»....
04 06 2026 20:32:42
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::