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

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

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

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

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

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