# Браузер и инструменты разработчика

Курс: Claude Code и терминал: с 0 — https://zero2claude.ru/learn/code-terminal
Канонический URL: https://zero2claude.ru/learn/code-terminal/9-5-brauzer-devtools

Инструменты разработчика — встроенная в браузер панель, открывается клавишей F12. Как заглянуть под капот страницы: HTML, стили, ошибки.

Мы разобрали три слоя веба: HTML, CSS и JavaScript. Но где всё это увидеть вживую? Оказывается, у тебя уже есть мощный инструмент для этого — он встроен прямо в твой браузер. Это **инструменты разработчика** (по-английски *DevTools*).

## Как их открыть

В большинстве браузеров — Chrome, Firefox, Edge — инструменты разработчика открываются одной клавишей:

- нажми **F12** на клавиатуре;
- или кликни правой кнопкой мыши по любому месту страницы и выбери **«Просмотреть код»** (или «Инспектировать»).

Откроется панель — обычно сбоку или снизу. На первый взгляд там много непонятного, но не пугайся: это просто окно, через которое видно внутренности страницы.

## Что там можно увидеть

Инструменты разработчика показывают именно те слои, о которых мы говорили:

- **HTML-элементы** — вся структура страницы. Наводишь на строчку кода — и нужный кусок на странице подсвечивается. Так сразу видно, какой тег за что отвечает.
- **Стили (CSS)** — выбираешь любой элемент и видишь, какие цвета, шрифты и размеры к нему применены.
- **Консоль** — место, где появляются ошибки и сообщения. Если на сайте что-то идёт не так, причина часто видна именно здесь.

Это как рентген для веб-страницы: ты заглядываешь под капот и видишь, из чего она собрана.

Иногда в инструментах можно прямо на месте поменять текст или цвет — и страница изменится у тебя на глазах. Но это меняется только **твоя копия** в браузере. Обнови страницу — и всё вернётся как было.

## Можно ли так что-то сломать

Короткий ответ: **нет**. Когда ты смотришь страницу через инструменты, ты работаешь только со своей копией, которую браузер уже скачал к тебе на компьютер. Настоящий сайт живёт на сервере, и до него ты этими действиями не дотягиваешься.

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

Это отличный способ учиться. Открой любимый сайт, нажми F12 и поразглядывай, как он устроен. Ты будешь узнавать знакомые теги и стили — и веб перестанет быть для тебя загадкой.

## Зачем это знать

Инструменты разработчика — повседневный спутник любого, кто делает сайты. С их помощью разработчики проверяют вёрстку, ищут ошибки и подбирают стили. А ты теперь знаешь, как туда заглянуть — и можешь сам исследовать устройство любой страницы в интернете.