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
Комментарии:
Украинские реалии того, в каких тематиках трафик из Yandex.Direct дороже Google Ads. Новое исследование Алексея Селезнева....
23 07 2026 6:12:54
в поисках нового источника трафика расскажем о Pinterest — современной поисковой сети c акцентом на визуальном контенте...
22 07 2026 18:28:14
Корзина интернет-магазина поможет повысить продажи, если ее функционал содержит: фото товара, кликабельное наименование товара, перечень способов оплаты. Узнать больше!...
21 07 2026 22:54:27
Пример удачной рекламы. История о том, как маленький региональный магазин может получать хорошую прибыль с прайс-агрегаторов...
20 07 2026 8:44:40
Иконки отличаются между собой размером, формой, весом, количеством оттенков и объемом. Наиболее популярными считаются векторные пиктограммы...
19 07 2026 9:47:37
Как увеличить количество транзакциий, сохранив прибыльность кампании в РСЯ?...
18 07 2026 22:31:44
Как понять, что проект нуждается в новых текстах и сделать читателя счастливым...
17 07 2026 8:28:54
10 заданий, которые заставят пошевелить мозгами и придумать нестандартные решения. Используйте их (видоизмените, адаптируйте) под свой продукт или услугу. Создайте крутую кампанию, креатив или предложите это своей комaнде....
16 07 2026 5:35:11
Узнаем расширенную информацию о посещениях сайта с помощью языка R — кейс Netpeak...
15 07 2026 6:13:59
Дайджест-путеводитель по серии постов о работе с редакторами электронных таблиц для PPC-специалистов....
14 07 2026 9:59:15
Кейс SMM-специалиста Edu-CASH.com о том, что делать, если Facebook страница заблокирована. И почему могут забанить аккаунт даже популярного бренда. Узнайте в статье!...
13 07 2026 22:19:48
С каждым годом китайские маркетплейсы увеличивают свое влияние, и покупатели всё активней заказывают товары из Поднебесной. Но не всё скидки да покупки — обладатели интернет-аудитории и маркетологи могут еще и хорошо заработать на этих площадках....
12 07 2026 8:34:36
Голосуй за первых лиц маркетинга ecommerce-проектов Украины...
11 07 2026 12:35:25
Что ждет новичка в его первый день работы в Netpeak — подарки, первые задачи и традиции компании. Все, что нужно знать, чтобы меньше волноваться и влиться в коллектив. Узнать больше!...
10 07 2026 19:53:53
Каковы интересы вашей аудитории, как люди находят ваш контент. Рассказываем обо всех возможностях от Search Console Insights....
09 07 2026 10:13:10
Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....
08 07 2026 16:57:13
В помощь вебмастерам, которые поддерживают работу PBN....
07 07 2026 4:54:17
К чему стоит относиться с особенным вниманием при отправке рассылок. Грамматические ошибки, тема, прехедер и другие стратегически важные составляющие письма. Узнать больше!...
06 07 2026 7:49:53
Все, что нужно знать об UTM-метках: зачем использовать, как правильно сгенерить и анализировать....
05 07 2026 15:17:11
Украинцы хотят заниматься коммерцией. И иногда делают это очень нестандартно. Собрали для вас подборку бизнесменов с особенным мышлением....
04 07 2026 14:36:41
Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....
03 07 2026 5:15:44
От того, что такое оффер до лучших стратегий и избежания ошибок...
02 07 2026 20:33:48
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
01 07 2026 18:10:13
Почему сайт упал в выдаче и какой апдейт алгоритма поисковика на это повлиял...
30 06 2026 5:32:11
Статистика изменений долей рынка после майского и декабрьского апдейта Google в 2020 году....
29 06 2026 17:22:42
Грабберы — программы, позволяющие автоматизировать процесс сбора и публикации контента. С помощью грабберов, помимо парсинга контента, осуществляют перевод и уникализацию текстов....
28 06 2026 18:28:44
Парсинг сайтов: как избавиться от головной боли и сэкономить сотни часов рутинного труда...
27 06 2026 9:30:15
Подробное руководство по настройке отслеживания событий в GA4...
26 06 2026 17:56:25
О том, как работают, празднуют, танцуют и в какой корпоративной культуре живут сотрудники корпорации Google. Этот пост развеет кое-какие мифы....
25 06 2026 21:59:35
Данные из контента страницы и основного заголовка h1 вместо метатега title. Что показало исследование Serpstat....
24 06 2026 13:50:57
Решили перейти на Google ***ytics 4? Предлагаем разобраться, чем отличается инструмент от предыдущей версии и изучить новинки в отчетах «Демография» и «Технология»....
23 06 2026 14:23:35
Мы решили внедрить товарные рекомендации на сайте. Они приносят дополнительно до 10% дохода....
22 06 2026 2:14:37
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
21 06 2026 10:44:21
Это не автобиографические романы, не бесплатные учебники и не подборка книжек, чтобы скачать в epub. Это интересная топ литература о маркетинге, которую мы хотим вам посоветовать....
20 06 2026 11:31:37
Зачем амбициозным онлайн-проектам индивидуальные инструменты веб-аналитики....
19 06 2026 12:44:54
Создать BI-систему собственного кошелька. Для ввода и хранения данных выбор стоял между Google Forms и Google Sheets или Airtable.Читайте дальше, что выбрал автор, чтобы оптимизировать расход, планировать траты на месяц и контролировать результаты в PowerBI....
18 06 2026 10:20:59
Пользователи могут смотреть вирусные ролики без единого слова...
17 06 2026 9:31:49
Об истории и значении поговорок и других фразеологических оборотов...
16 06 2026 1:25:28
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
15 06 2026 7:31:22
Что такое App Store optimization и как раскручивать мобильные приложения...
14 06 2026 3:53:28
Клиенты, партнеры, потенциальные сотрудники — для каждой аудитории есть своя платформа. Какими нужно быть в соцсетях, чтобы вас заметили, читайте об опыте Reface....
13 06 2026 6:27:37
Как бесплатно пользоваться преимуществами, особенностями и дополнительными инструментами сервиса...
12 06 2026 4:31:49
Расскажу, как подобрать картинку на рабочий стол объявления в Рекламной сети Яндекса, и приведу небольшой кейс о том, как это делали мы для агентства путешествий...
11 06 2026 11:50:19
Инсайты Диви Конф 2021, онлайн-конференции о видеомаркетинге....
10 06 2026 17:25:48
Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...
09 06 2026 6:48:10
Непросто найти ответственного автора, готового проводить сео-оптимизацию своих статей, исправлять ошибки, вносить дополнения в материал. Это очень дорого? Узнать!...
08 06 2026 4:31:20
Что нужно делать на старте работ с интернет-магазином и как минимизировать риски для бизнеса онлайн, используя такие инструмента как SEO, PPC и Email-маркетинг — советы от эксперта. Читать дальше!...
07 06 2026 1:37:54
Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....
06 06 2026 16:44:38
Простые пошаговые советы о том, как самому сделать верстку шаблона Wordpress. От вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна. Узнать больше!...
05 06 2026 3:18:51
Как сделать рекламу в Universal App Campaign 2.0 максимально эффективной...
04 06 2026 17:18:20
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::