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
Комментарии:
Структура того, чем обладают сотрудники департаментов работы с клиентами лучших компаний....
08 06 2026 2:53:31
Пришло такое время — обновить данные, тем более что в начале сентября появилось исследование Google....
07 06 2026 15:47:10
Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....
06 06 2026 8:47:27
Как расширение от Netpeak может облегчить работу над важными SEO-задачами....
05 06 2026 6:41:56
При создании проекта и выбора доменного имени важно взвесить плюсы и минусы использования домена с историей...
04 06 2026 22:15:12
Правильно задать вопрос или сфоримулировать ответ на собеседовании это еще далеко не все. Рецензия на книгу Ласло Бока «Работа рулит»...
03 06 2026 6:49:53
Пока вы не осознаете причины, почему вам выгодно не хвалить, забудьте про качественную обратную связь и максимальную включенность комaнды. Фишки управления собой, людьми и проектами....
02 06 2026 20:24:10
Будь мобильным — заливай видео на Youtube с телефона...
01 06 2026 5:33:29
Зачем нужно работать с отчетами по ассоциированным конверсиям и сравнивать различные модели атрибуции?...
31 05 2026 10:59:47
Настройка пикселя TikTok — короткий и понятный мануал. Устанавливаем пиксель вручную: вставка кода на сайт и интеграция через Install pixel code by 3rd party tool. Читать дальше....
30 05 2026 22:32:38
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
29 05 2026 21:27:49
Пользователи могут смотреть вирусные ролики без единого слова...
28 05 2026 8:12:13
2 любопытные истории и 8 успешных стартапов, которые вас удивят....
27 05 2026 15:42:51
Как определить, что SEO-продвижение не будет в тягость, что и кого читать начинающему специалисту...
26 05 2026 17:52:52
Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....
25 05 2026 13:58:44
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
24 05 2026 18:22:11
С помощью этой шпаргалки вы легко распределите акценты и начнете последовательно внедрять маркетинговую стратегию по продвижению мобильного приложения...
23 05 2026 9:18:45
Как специалисту сэкономить время для создания и оптимизации кампаний, проверки орфографии и другие фишки. Советы из пpaктики....
22 05 2026 5:15:59
Чтобы привлечь представителей малого и среднего бизнеса, мы разработали стратегии по контекстной рекламе. Это открывает двери агентства Netpeak проектам с самым скромным бюджетом...
21 05 2026 6:14:15
Крутые площадки для нового инструмента: контекстщикам на заметку!...
20 05 2026 4:12:49
Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...
19 05 2026 8:12:17
Как получить трафик из песочниц контента в популярных изданиях....
18 05 2026 10:59:54
Что поможет написать объявление без грамматических ошибок? В недрах агентства Netpeak рождается новый полезный сервис...
17 05 2026 19:23:56
Семнадцать крутых шагов к эффективному бренду Заг — это авторский неологизм от слова зигзаг (англ. zigzag). Он подразумевает движение в другом направлении....
16 05 2026 11:11:48
Алексей Селезнев проанализировал, как дорого обходятся рекламодателям клики по объявлениям в 25 тематиках и 92 странах....
15 05 2026 4:31:27
Раскрутить телеграм-канал с нуля до тысячи — реально. Раскрываем пошаговый алгоритм и даем рекомендации для SMM-специалистов....
14 05 2026 11:57:41
Шаги, которые необходимо выполнить для правильного сбора и анализа данных сайта...
13 05 2026 18:29:39
Старт любых активностей в сфере email-маркетинга — разработка стратегии...
12 05 2026 17:31:28
Почему встречаются низкие показатели переходов на сайты по всем источникам трафика? Нет рекламодателей, которые могут предложить пользователям те или иные товары и услуги....
11 05 2026 22:27:35
Facebook + Instagram, Business Manager + основная бизнес-страница на Facebook, BM + рекламный аккаунт и так далее....
10 05 2026 20:22:16
Часто копирайтеры пишут для поисковых роботов, не заботясь о качестве контента и читабельности. Рассмотрим метрики для оценки ридабилити....
09 05 2026 5:20:10
Данные, приведенные в исследовании, могут помочь в составлении медиапланов по продвижению в интернете....
08 05 2026 23:56:58
Отчет «Многокaнaльные последовательности» в Google ***ytics помогает оценить влияние каждого канала, сделать выводы о работе рекламных кампаний — понять их вклад и участие в цепочке до совершения конверсии. Показываем на примере....
07 05 2026 13:26:54
Если вы автор телеграм-канала, то стоит задуматься об альтернативных контент-платформах. Мнение...
06 05 2026 11:31:23
Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...
05 05 2026 3:58:57
Если маркетер хочет привлечь к бренд-контенту дополнительное внимание, стоит воспользоваться опцией Promote post....
04 05 2026 11:26:34
Настроенная бизнес-страница компании в Instagram и на Facebook помогает в продвижении товаров и услуг в интернете. Поэтому так важно сделать их seo-friendly. Читать!...
03 05 2026 7:52:46
Правила Facebook позволяют пользоваться автоматизированным контролем над эффективностью рекламы. Читайте, как уменьшить количество ручной работы с помощью автоматических правил...
02 05 2026 12:40:57
Какой движок сайта стоит выбрать...
01 05 2026 12:19:59
В коробку [SEO 2.0] вместе с самим поисковым продвижением входят дополнительные ценности Netpeak: унифицированные действия по увеличению продаж, улучшения удобства работы и преимущества бренда Netpeak...
30 04 2026 21:41:59
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
29 04 2026 0:40:55
Как без проблем пересылать данные в Google Покупки....
28 04 2026 9:17:21
SMM для агентства перформанс-маркетинга. Как уйти от сухих текстов и стандартных баннеров для бизнес-страницы....
27 04 2026 23:42:24
Как снизить цену за привлечение клиента на 50%, развивая только кампании для пользователей десктопов....
26 04 2026 1:35:44
Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....
25 04 2026 19:32:10
Email-маркетинг увеличивает частоту транзакций. Показываем как это происходит и за счет чего. Делимся кейсом email-маркетинга для книжного интернет-магазина. Читать дальше....
24 04 2026 20:55:51
О важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении....
23 04 2026 19:51:15
Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....
22 04 2026 4:50:29
В Twitter удобно собрать список потенциальных клиентов, чтобы время от времени посматривать за их новостями...
21 04 2026 10:37:53
Рассказываем об интересных диджитал-специальностях и зарплатах, как обучиться этим профессиям с нуля (в том числе в зрелом возрасте) и можно ли работать удалённо....
20 04 2026 14:11:38
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::