Как открыть код элемента в браузере

Чтобы открыть код элемента на странице, нажмите по нему правой кнопкой мыши и выберите Inspect или «Просмотреть код». Откроются инструменты разработчика, чаще всего вкладка Elements: там видно HTML выбранного элемента и CSS-стили, которые к нему применяются

Это не совсем «исходный код сайта». DevTools показывает текущую структуру страницы после загрузки, включая изменения, которые мог внести JavaScript

Содержание

Быстрый способ
Что смотреть во вкладке Elements
Как связать это с JavaScript
Чем Inspect отличается от View Source
Зачем это нужно
Как найти файл, который меняет элемент
Как скопировать селектор элемента
Частые ошибки
Думать, что изменения сохранятся на сайте
Копировать слишком большой кусок HTML
Путать CSS и JavaScript
Мини-задание
Что почитать дальше по JavaScript

Быстрый способ

Порядок действий:

Откройте страницу в браузере.
Наведите курсор на нужный блок, кнопку, текст или картинку.
Нажмите правой кнопкой.
Выберите Inspect.
Посмотрите выбранный элемент во вкладке Elements.

В Chrome также можно включить режим выбора элемента сочетанием:

Ctrl + Shift + C

На macOS:

Command + Shift + C

После этого кликните по нужному месту страницы, и DevTools выделит соответствующий HTML-элемент

Что смотреть во вкладке Elements

Слева обычно виден HTML:

<button class="buy-button">Купить</button>

Справа видны CSS-правила:

.buy-button {
  background: blue;
  color: white;
}

Можно временно отключать CSS-свойства, менять текст, добавлять классы и смотреть, как страница реагирует. Но эти изменения живут только в вашем браузере. После обновления страницы все вернется

Как связать это с JavaScript

После выбора элемента в Chrome DevTools можно обратиться к нему в Console через $0:

$0.textContent

Если выбранная кнопка содержит текст Купить, Console покажет этот текст. Можно попробовать:

$0.style.outline = "3px solid red";

Так вы увидите, как JavaScript может менять выбранный элемент. Это учебный прием для понимания DOM

Чем Inspect отличается от View Source

Есть два похожих действия:

Действие	Что показывает
View page source / исходный код страницы	HTML, который браузер получил изначально
Inspect / код элемента	текущий DOM после работы браузера и JavaScript

Если сайт собирает интерфейс через JavaScript, в исходном коде может быть мало HTML, а во вкладке Elements вы увидите уже готовые элементы

Зачем это нужно

Открытие кода элемента помогает:

понять, какой тег используется;
найти класс или id;
увидеть CSS-правила;
проверить, почему элемент скрыт;
посмотреть, меняет ли JavaScript текст или классы;
быстро протестировать правку перед изменением реального файла.

Это базовый навык для HTML, CSS и JavaScript

Как найти файл, который меняет элемент

Если вы видите элемент во вкладке Elements, это еще не значит, что вы сразу знаете, какой файл его создал. Для поиска причины используйте соседние вкладки DevTools:

Styles — показывает CSS-правила и файлы стилей;
Event Listeners — помогает увидеть обработчики событий;
Console — показывает ошибки JavaScript;
Sources — дает посмотреть загруженные JS- и CSS-файлы;
Network — показывает, какие файлы загрузила страница.

Например, если кнопка есть, но не нажимается, сначала выберите ее через Inspect, затем посмотрите Event Listeners. Если обработчиков клика нет, возможно, скрипт не загрузился или код не повесил событие

Как скопировать селектор элемента

Для учебной проверки можно нажать по элементу в Elements правой кнопкой и выбрать копирование selector, если браузер показывает такой пункт. Но не стоит слепо вставлять длинные автоселекторы в код. Лучше дать элементу понятный id или класс:

<button id="sendButton">Отправить</button>

И искать его так:

const button = document.querySelector("#sendButton");

Такой код читается лучше, чем длинная цепочка из нескольких div

Частые ошибки

Думать, что изменения сохранятся на сайте

DevTools меняет страницу только у вас локально. Вы не редактируете чужой сайт и не публикуете правки

Копировать слишком большой кусок HTML

Если нужно понять кнопку, не копируйте весь документ. Смотрите конкретный элемент, его родителя и примененные стили

Путать CSS и JavaScript

Цвет, размер, отступы — это обычно CSS. Клики, изменение текста, загрузка данных — это чаще JavaScript

Мини-задание

Откройте любую страницу, выберите кнопку через Inspect и в Console выполните:

$0.textContent = "Проверка"

Текст кнопки должен временно измениться. Обновите страницу — текст вернется. Так вы увидите разницу между временной правкой в браузере и изменением исходного проекта