Инструменты разработчика Chrome
DevTools: инспектор элементов, консоль, сетевые запросы, хранилище, адаптивный дизайн.
Кликни на вкладку чтобы узнать подробнее
Как открыть DevTools. Вкладка Elements
Что такое DevTools?
DevTools (Developer Tools) — встроенные инструменты браузера для разработчиков. Открыть их можно тремя способами:
- Нажать F12
- Нажать Ctrl+Shift+I (Cmd+Option+I на Mac)
- Правой кнопкой на любом элементе страницы → Inspect (Просмотр кода)
Вкладка Elements — инспектор страницы
Здесь видно HTML и CSS любого сайта. Можно кликнуть на любой элемент и посмотреть:
- Какой у него HTML-тег
- Какие CSS-стили применены
- Как они влияют на внешний вид
Как выбрать элемент: Нажми иконку курсора ↖ в левом верхнем углу DevTools, затем кликни на любой элемент страницы — и увидишь его в инспекторе.
Редактирование «на лету»
В панели Elements можно изменить HTML и CSS прямо в браузере — страница обновится мгновенно. Это временно (обновление страницы всё сбросит), но очень удобно для экспериментов.
Двойной клик на значение свойства → меняй и нажимай Enter.
Адаптивный дизайн
Иконка телефона 📱 в левом верхнем углу DevTools включает Device Mode — режим имитации мобильных устройств.
Можно выбрать:
- Конкретное устройство (iPhone 14, Samsung Galaxy, iPad...)
- Произвольный размер экрана
- Эмуляцию медленного интернета
Это главный способ проверить как сайт выглядит на телефоне, не имея телефона под рукой.
Как быстро открыть DevTools в Chrome?
Ты хочешь проверить как сайт выглядит на iPhone. Что использовать в DevTools?