Все статьи | Дневник студента

Как тестировать вёрстку в отладчике Chrome

Как тестировать вёрстку в отладчике Chrome главное изображение

Браузер Chrome, как и другие браузеры, содержат удобные инструменты для тестирования вёрстки. Чтобы попасть в этот инструмент, нужно нажать F12.

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

  • Схлопывание контента. Перемещаясь по дереву документа можно скрывать отдельные элементы, нажимая H (hide), чтобы проверить, не схлопывается ли что-то.
  • Применение стилей. Можно применять и отключать стили, написав правила прямо руками или тыкая галочки на включенных стилях.
  • Интерактивность взаимодействия. Также важно включать правила типа :hover и смотреть, как сайт реагирует на интерактивность
  • Ну и последнее — переполнение вёрстки. Можно добавить контент и прямо в редакторе дерева, но я делаю удобнее - в консоли набираю document.body.contentEditable = true и появляется возможность редактировать контент прямо на страничке

Это конечно не все инструменты, которые помогают верстальщику при создании вёрстки, но точно они входят в необходимый минимум, который каждый верстальщик должен знать, чтобы эффективно создавать и тестировать свои странички.

Аватар пользователя Виталий Бородулин
Виталий Бородулин 01 октября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
30 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
30 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
30 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
30 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
30 июня 5 месяцев