Как проверять страницу в DevTools
Находим элемент, проверяем примененные стили, размеры, загрузку файлов и разные ширины окна.
also in web design and web development basics
On this page
DevTools – инструменты разработчика, встроенные в браузер. С их помощью можно посмотреть, какую разметку браузер разобрал, какие стили применил и почему страница выглядит именно так.
Найдите нужный элемент
- Откройте вашу страницу в браузере.
- Нажмите правой кнопкой на элемент и выберите Исследовать, Просмотреть код или Inspect: название зависит от браузера.
- Откроется панель Elements в Chrome и Edge или Inspector в Firefox. В ней будет выбран соответствующий HTML-элемент.
В панели показана структура, которую браузер построил из HTML, а не точная копия исходного файла. Например, если вложить div в p, браузер исправит недопустимую вложенность. Если структура кажется неожиданной, сначала проверьте исходный HTML.
Почему стиль не применился
В панели Styles найдите свойство. Справа от правила обычно указан файл и номер строки.
| Что видно | Что проверить |
|---|---|
| Нужного правила вообще нет | Подключен ли файл CSS, совпадает ли селектор с элементом |
| Объявление перечеркнуто | Какое другое правило его переопределило |
| Предупреждение возле значения | Правильно ли записаны свойство, значение и единица |
| Свойство пришло от родителя | Нет ли своего значения у выбранного элемента |
Например, .notice задает синий текст, а более специфичный .notice.warning – красный. В Styles можно увидеть оба правила и понять, какой color победил. В Computed показаны итоговые вычисленные значения: там удобно проверить реальный цвет, размер шрифта и размеры.
Попробуйте выключить объявление флажком или временно изменить значение. Страница обновится сразу. Это удобно для поиска причины, но обычные изменения в DevTools не сохраняются в ваш HTML или CSS. После проверки перенесите правильное решение в файл редактора.
Из чего сложился размер
У выбранного элемента найдите схему блочной модели: Box model. Она показывает содержимое, padding, border и margin с числовыми значениями.
Если вы ожидали ширину 200px, а элемент шире, проверьте box-sizing, внутренние отступы и границу. Затем проверьте размеры родителя и содержимое. Одно свойство редко объясняет весь результат.
Файл не загрузился
Если картинка или стили отсутствуют, откройте панель Network и обновите страницу. Найдите запрос к нужному файлу.
404означает, что ресурс по этому адресу не найден. Проверьте путь, имя файла и регистр букв.- Посмотрите полный адрес запроса: браузер может искать файл в другой папке, чем вы ожидали.
- Панель Console показывает сообщения и ошибки. При изучении JavaScript здесь же увидите результаты
console.log.
Проверьте разные размеры
Включите режим устройств кнопкой с телефоном и планшетом в DevTools. Изменяйте ширину плавно, а не только между готовыми моделями телефонов. Проверьте момент, когда меню, заголовок или карточки перестают помещаться.
Попробуйте длинный заголовок, увеличенный масштаб браузера и управление клавишей Tab. Эмуляция устройства помогает, но не полностью заменяет проверку на настоящем телефоне: там могут отличаться клавиатура, шрифты и доступная высота.
Справочники: проверка CSS в Chrome DevTools, режим устройств и инструменты Firefox.