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