Не могу найти кнопку лайка в инспекторе кода (Chrome DevTools)
"Всем привет! Учусь верстке, разбираю устройство социальных сетей.
Открыл пост на Mail ответов . Хочу посмотреть, как сверстана кнопка «Палец вверх» и кнопка «Палец вниз» (или дизлайк, если есть).
Не могу их найти в инспекторе кода (F12). Когда навожу мышь на кнопку, она подсвечивается, но в коде не могу отследить конкретный тег с классом, который отвечает за нажатие.
Подскажите, пожалуйста, по каким CSS-селекторам или атрибутам искать эти кнопки в структуре маил ру ответов? Хочу понять логику построения таких интерфейсов. Спасибо!
Почему ты видишь кнопку, но не можешь найти её в коде
На современных сайтах многие элементы рисуются динамически через JavaScript (часто с виртуальными деревьями — React/Vue/JS‑фреймворки).
Это значит:
На странице ты видишь кнопку и её визуальное состояние (например, иконку, подсветку при ховере).
Но Chrome DevTools при таком подходе может не показывать чистый HTML‑элемент с тэгом и явным текстом/классом — потому что:
элемент рендерится в canvas или через SVG/фреймы,
или элемент создаётся динамически через JS и может не иметь семантичного класса или прямой разметки в HTML дереве.
Это обычная практика больших сайтов с динамическим интерфейсом.
👉 То есть когда DevTools подсвечивает элемент при наведении, это визуально правильная область, но сам документ может не содержать простого <button class="like">…</button>.
Как всё‑таки найти кнопку в DevTools
Вот проверенные способы:
🧠 1. Использовать вкладку Elements → Event Listeners
Правый клик по скриншоту/зоне кнопки → Inspect (Inspect Element).
В панели Elements смотри справа вкладку Event Listeners.
Там ищи события типа click, mousedown, pointerdown — часто именно на них висит логика клика.
🔎 2. Ищем по атрибутам или изображениям
Если у кнопки:
есть иконка (например SVG),
текст ALT, aria‑label или title,
То в строке поиска DevTools введи:
svg
aria-label
titleили часть текста (например «Нравится», «Vote», «палец») — это часто помогает найти скрытый узел.
👤 3. Вкладка Network → XHR / Fetch
Иногда кнопка не просто HTML‑элемент, а часть JS‑компонента, который подгружает данные по API.
Посмотри, какие запросы уходят, когда ты нажимаешь на «палец вверх»: часто можно увидеть fetch/post запрос, и в ответе будет объект с полями типа vote или answer_like.
Это уже поможет понять, как именно элемент работает.
👁️ 4. Пробовать «просмотреть узлы во время наведения»
Можно поставить pause on DOM changes:
На вкладке Sources → Event Listener Breakpoints → Mouse → click
Навести / нажать «Палец вверх»
DevTools может остановиться в момент, когда этот элемент обрабатывается в JS — и тогда ты увидишь, какой DOM реально участвует.
Итог 👇
📌 На таких динамических интерфейсах, как на Ответах Mail.ru, кнопка «Палец вверх» может не иметь простого тег‑класса в разметке, потому что:
она генерируется динамически через JS‑компоненты,
может быть частью SVG или canvas‑слоя,
и её логика обрабатывается через слушатели событий, а не через статичную разметку.
Что искать в DevTools конкретно
🔹 Атрибуты вроде:
[data‑action]
[id*="like"]
[class*="vote"]🔹 Слушатели событий click на родительских элементах
🔹 SVG‑иконки в DOM → рядом часто находится контейнер кнопки
спасибо!