StudyCode
DevTools: инспектор элементов, консоль, сетевые запросы, хранилище, адаптивный дизайн.
DevTools (Developer Tools) — встроенные инструменты браузера для разработчиков. Открыть их можно тремя способами:
Здесь видно HTML и CSS любого сайта. Можно кликнуть на любой элемент и посмотреть:
Как выбрать элемент: Нажми иконку курсора ↖ в левом верхнем углу DevTools, затем кликни на любой элемент страницы — и увидишь его в инспекторе.
В панели Elements можно изменить HTML и CSS прямо в браузере — страница обновится мгновенно. Это временно (обновление страницы всё сбросит), но очень удобно для экспериментов.
Двойной клик на значение свойства → меняй и нажимай Enter.
Иконка телефона 📱 в левом верхнем углу DevTools включает Device Mode — режим имитации мобильных устройств.
Можно выбрать:
Это главный способ проверить как сайт выглядит на телефоне, не имея телефона под рукой.
Как быстро открыть DevTools в Chrome?
Ты хочешь проверить как сайт выглядит на iPhone. Что использовать в DevTools?
Кликни на вкладку чтобы узнать подробнее