Один из ключевых аспектов веб-разработки – это структура HTML-документа. Но иногда трудно визуализировать, как именно выглядит документ на основе его кода. В этом случае может помочь инструмент для визуализации HTML-дерева.
Просто вставьте свой HTML-код в поле слева, и вы увидите древовидное представление вашей разметки. Это позволяет легко оценить иерархию элементов и их вложенность. Исходный код проекта доступен на GitHub.
Проверка БЭМ-нотации. Если вы используете методологию БЭМ (Блок-Элемент-Модификатор) при разработке интерфейсов, то инструмент поможет проверить соответствие классов этой нотации.
Иерархия заголовков. Иногда важно оценить структуру заголовков на странице. В этом инструменте вы сможете быстро увидеть, как они организованы, и прокликать по ним для наглядного представления.