РАЗДЕЛ 01Что такое код элемента и DevTools простыми словами
Любая страница сайта это код: HTML задаёт текст и блоки, CSS их внешний вид, JavaScript поведение. Браузер получает этот код и рисует страницу. Код элемента это кусок HTML, из которого собран конкретный блок: заголовок, кнопка, картинка.
DevTools (девтулс, developer tools, developer console) это встроенная в браузер панель, которая показывает этот код и всё, что происходит со страницей: какие файлы загрузились, какие скрипты сработали, какие ошибки возникли.
Кому это нужно, кроме программистов
Мне DevTools нужны каждый день, хотя код сайтов я не пишу. Через панель проверяю, стоит ли счётчик, ушла ли цель при отправке формы, что прописано в title и canonical, сколько весит страница. Владельцу бизнеса это даёт простую вещь: проверить подрядчика, не дожидаясь отчёта.
Код элемента и код страницы
Ctrl+U (на Mac Cmd+Option+U) открывает исходный код страницы: то, что пришло с сервера. Код элемента в DevTools показывает страницу после работы скриптов. Если блок подгружается скриптом, в исходном коде его может не быть, а в коде элемента он есть.
РАЗДЕЛ 02Как открыть код элемента: клавиши для всех браузеров
Chrome, Яндекс Браузер, Opera, Opera GX и Edge построены на одном движке Chromium, поэтому клавиши у них почти одинаковые. Сочетания для Chrome сверял с документацией Chrome DevTools 11.10.2026.
Листайте вбок
| Действие | Windows и Linux | Mac |
|---|---|---|
| Открыть DevTools | F12 или Ctrl+Shift+I | Cmd+Option+I |
| Выбрать элемент на странице | Ctrl+Shift+C | Cmd+Option+C |
| Сразу открыть консоль | Ctrl+Shift+J | Cmd+Option+J |
| Исходный код страницы | Ctrl+U | Cmd+Option+U |
| Мобильный вид страницы | Ctrl+Shift+M при открытой панели | Cmd+Shift+M |
Chrome и Edge
Правая кнопка мыши на элементе, пункт «Просмотреть код» в Chrome. Или меню с тремя точками, «Дополнительные инструменты», «Инструменты разработчика». В Edge работают те же F12 и Ctrl+Shift+I.
Яндекс Браузер
Правая кнопка, «Исследовать элемент», или Ctrl+Shift+I. Это и есть DevTools в Яндекс Браузере, панель та же, что в Chrome, отличается только оформление меню.
Opera и Opera GX
Ctrl+Shift+I открывает инструменты разработчика в обеих версиях. Через меню путь лежит в разделе разработки. Если клавиши не срабатывают в Opera GX, проверьте, не перехватило ли их расширение.
Safari на Mac
Сначала включите панель: меню Safari, «Настройки», вкладка «Дополнения», флажок «Показывать функции для веб-разработчиков» (по справке Apple). После этого в строке меню появится «Разработка», а Cmd+Option+I откроет инспектор.
РАЗДЕЛ 03Что показывают вкладки панели разработчика
Вкладок в DevTools больше десяти, маркетологу хватает четырёх.
Elements: структура страницы
Что показывает панель Elements: дерево HTML-тегов страницы и стили выбранного блока. Наводите курсор на строку кода, и браузер подсвечивает блок на странице. Ctrl+F внутри панели ищет по коду: так быстро находятся title, canonical, код счётчика.
Console: сообщения и ошибки
Командная строка в браузере. Здесь видны ошибки скриптов и сообщения счётчиков в режиме отладки. Красные строки в консоли на странице с формой это повод проверить, отправляется ли форма вообще.
Network: что загрузилось
Вкладка Network показывает каждый файл и запрос, который сделала страница: картинки, скрипты, обращения к Метрике. Видно размер, время загрузки и код ответа. Перезагрузите страницу с открытой вкладкой, иначе список будет пустым.
Lighthouse: быстрая оценка страницы
Встроенный в Chrome отчёт по скорости, доступности и базовому SEO. Запускается одной кнопкой и даёт список проблем. Подробно про скорость и что с ней делать разбирал в статье про скорость загрузки сайта, здесь повторять не буду.
РАЗДЕЛ 04Проверка 1: стоит ли счётчик Метрики и срабатывают ли цели
Самая частая проблема, которую нахожу у новых клиентов: реклама крутится, а цели в Метрике не считаются или считаются дважды.
Через вкладку Network
Откройте DevTools, вкладку Network, в фильтр впишите mc.yandex. Перезагрузите страницу. Если запросы к Метрике появились, счётчик загружается. Пусто: счётчика нет на этой странице или его режет блокировщик рекламы в вашем браузере.
Через режим отладки Метрики
По справке Метрики на октябрь 2026: добавьте к адресу страницы ?_ym_debug=2, например site.ru/?_ym_debug=2, и откройте консоль Ctrl+Shift+J. Если в консоли номер счётчика и событие PageView, счётчик работает. С новым кодом счётчика внизу страницы появится ещё и панель отладки. Закрыть отладку можно, открыв страницу с ?_ym_debug=0.
Как проверить цель
В том же режиме отладки отправьте тестовую заявку или нажмите кнопку мессенджера. В консоли должна появиться новая строка от счётчика. Если ничего не появилось, цель настроена не на тот элемент или форма отправляется так, что счётчик этого не видит. Как настраивать цели правильно, разбирал в статье про настройку Яндекс Метрики.
РАЗДЕЛ 05Проверка 2: мета-теги, canonical и микроразметка
Второе, что смотрю на любом сайте перед продвижением, это служебные теги в шапке страницы.
Что искать в коде
Откройте Elements, нажмите Ctrl+F и ищите по очереди:
Листайте вбок
| Что ищем | Что должно быть | Тревожный знак |
|---|---|---|
<title> | уникальный заголовок под запрос | одинаковый title на всех страницах |
name="description" | описание страницы | пусто или шаблон движка |
name="robots" | нет тега или index, follow | noindex на нужной странице |
rel="canonical" | адрес этой же страницы | адрес другой страницы или главной |
application/ld+json | блок микроразметки | ошибки в данных, чужие цены |
Почему это важно смотреть самому
Случайный noindex, оставшийся после разработки, выкидывает страницу из поиска, и никто этого не замечает месяцами. Через код элемента такая ошибка находится за минуту. Как проверить микроразметку целиком, а не только наличие блока, описано в статье про проверку микроразметки.
РАЗДЕЛ 06Проверка 3: UTM-метки, редиректы и мобильная версия
Ещё два места, где реклама теряет данные.
Метки на редиректах
Откройте вкладку Network, поставьте галочку Preserve log и перейдите по рекламной ссылке с UTM-метками. Если первая строка со статусом 301 или 302, а на конечном адресе меток нет, редирект их съел, и в Метрике визиты с рекламы окажутся без источника. Про сами метки подробнее в статье про UTM-метки.
Мобильная версия
Ctrl+Shift+M при открытой панели переключает страницу в вид телефона. Выберите модель устройства сверху и пролистайте: видна ли кнопка заявки на первом экране, не уезжают ли таблицы за край, не перекрывает ли виджет чата форму.
Медленная сеть
Во вкладке Network есть ограничение скорости сети. Включите медленный режим и перезагрузите страницу: так видно, что увидит человек с плохим мобильным интернетом в первые секунды.
РАЗДЕЛ 07Как изменить текст через код элемента и почему это не правка сайта
Частый вопрос: как поменять код элемента в браузере или как изменить текст через код элемента в Яндекс Браузере.
Как это сделать
Выберите элемент, дважды щёлкните по тексту в панели Elements, впишите новый и нажмите Enter. Текст на странице поменяется.
Что на самом деле произошло
Изменение живёт только в вашей вкладке. Обновили страницу, и всё вернулось. На сервере ничего не поменялось, другие посетители видят старый вариант. Я пользуюсь этим, чтобы показать клиенту, как будет выглядеть новый заголовок первого экрана, до того как просить разработчика.
Обратная сторона
Раз текст на странице меняется за секунду, скриншот «рекламного кабинета» или «выписки» тоже подделывается за секунду. Когда подрядчик присылает отчёт картинкой, просите гостевой доступ к кабинету, а не снимок экрана.
РАЗДЕЛ 08Консоль: как вставить код и почему браузер не даёт
Консоль позволяет выполнить JavaScript прямо на странице. Отсюда вопросы, как вставить команду в консоль и почему вставка не работает.
Защита от вставки
По документации Chrome DevTools, если вставить код в консоль, браузер может заблокировать вставку и показать предупреждение о самоатаке (self-XSS). Чтобы разрешить вставку, нужно вручную набрать в консоли allow pasting. В браузерах на Chromium, включая Яндекс Браузер, работает похожая защита, нужная фраза написана в самом предупреждении.
Когда вставлять нельзя
Защиту придумали не зря: мошенники просят «вставить строчку в консоль», чтобы украсть доступ к аккаунту. Вставляйте код только тот, который понимаете или получили от своего разработчика. Это касается и приложений вроде Discord: в обычной версии клиента панель разработчика обычно отключена, и включать её по советам из чатов не стоит.
РАЗДЕЛ 09Код элемента на телефоне и режимы разработчика
Отдельная группа вопросов: как открыть код элемента на телефоне и что такое режим разработчика в браузере.
На телефоне
В мобильных браузерах панели разработчика нет. Посмотреть код страницы с Android-телефона можно через компьютер: по документации Chrome включите на телефоне отладку по USB в настройках для разработчиков, подключите кабель, на компьютере откройте в Chrome chrome://inspect#devices и нажмите Inspect у нужной вкладки. Для проверки вёрстки проще включить мобильный вид Ctrl+Shift+M на компьютере.
Режим разработчика для расширений
Запрос «browser extensions режим разработчика» про другое. На странице расширений (chrome://extensions в Chrome) есть переключатель «Режим разработчика»: он позволяет ставить расширения из папки на компьютере, минуя магазин. Включайте его только для своих проверенных расширений: чужое расширение из папки получает доступ к страницам, которые вы открываете.
Свойства обозревателя
«Свойства обозревателя» это настройки интернета в Windows из панели управления, а не часть Chrome или Яндекс Браузера. К коду элемента и DevTools они отношения не имеют.
РАЗДЕЛ 10FAQ
Отвечает Никита МорозовКак открыть код элемента клавишами?
F12 или Ctrl+Shift+I открывают панель разработчика, Ctrl+Shift+C сразу включает выбор элемента на странице. На Mac Cmd+Option+I и Cmd+Option+C.
Как открыть DevTools в Яндекс Браузере?
Правая кнопка мыши на странице, пункт «Исследовать элемент», или Ctrl+Shift+I. Панель такая же, как в Chrome.
Как открыть консоль в браузере?
Ctrl+Shift+J в Chrome, Яндекс Браузере, Opera и Edge, на Mac Cmd+Option+J. Или откройте DevTools и выберите вкладку Console.
Можно ли открыть код элемента на телефоне?
В самом мобильном браузере нельзя. Android-телефон подключают к компьютеру по USB и смотрят страницу через chrome://inspect в Chrome на компьютере.
Сохранятся ли изменения, если поменять текст через код элемента?
Нет. Изменения видны только в вашей вкладке до перезагрузки, сайт на сервере не меняется.
Как через DevTools проверить счётчик Метрики?
Откройте вкладку Network и впишите в фильтр mc.yandex, либо добавьте к адресу ?_ym_debug=2 и посмотрите консоль: там должны быть номер счётчика и событие PageView.
Почему консоль не даёт вставить код?
Это защита браузера от мошенников. Chrome просит вручную набрать allow pasting, только после этого вставка разрешается. Вставляйте только код, которому доверяете.
РАЗДЕЛ 11С чего начать
- Откройте свой сайт, нажмите F12 и найдите вкладки Elements, Console и Network.
- В Network впишите в фильтр
mc.yandexи перезагрузите страницу: проверьте, что счётчик загружается. - Откройте страницу с
?_ym_debug=2, отправьте тестовую заявку и посмотрите, появилась ли строка в консоли. - В Elements через Ctrl+F проверьте title, robots и canonical на главной и двух посадочных.
- Если что-то не сходится или реклама вот-вот стартует, пришлите сайт и номер счётчика: проверю цели и метки до запуска.