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

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

Время чтения статьи ~1 минута
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Как тестировать вёрстку в отладчике Chrome главное изображение

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

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

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

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

Аватар пользователя Виталий Бородулин
Виталий Бородулин 01 октября 2021
5
Похожие статьи
Рекомендуемые программы
профессия
от 25 000 ₸ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 26 декабря
профессия
от 25 000 ₸ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 26 декабря
профессия
от 14 960 ₸ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 26 декабря
профессия
от 25 000 ₸ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 26 декабря
профессия
от 24 542 ₸ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 26 декабря
профессия
от 25 000 ₸ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 26 декабря
профессия
от 28 908 ₸ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 26 декабря
профессия
от 39 525 ₸ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 26 декабря
профессия
от 25 000 ₸ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 26 декабря
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
Старт 26 декабря