Как я могу увидеть структуру встроенной веб-страницы?

Question

Как я могу увидеть структуру веб-страницы "встроенной" с визуальным представлением реальной страницы, все сразу?

Я пытаюсь лучше понять HTML-разметку, но мне трудно это почувствовать, даже если исходный код открыт на отдельном мониторе, потому что в нем так много разного и разного кода. Я полагаю, что я мог бы просеять его, очистить и настроить некоторый тип настраиваемой складной древовидной системы, но это заняло бы слишком много времени для количества страниц, которые я хотел бы получить, чтобы быстро просмотреть макет / структуру.

Для справки, я использую Firefox для работы в Интернете.

Answer 1

Я верю, что знаю, что вы пытаетесь сделать.

Находясь на веб-сайте Firefox, перейдите на вкладку « tools » в верхней части браузера.

Перейдите в подменю « Web Developer и нажмите « Inspector .

В Инспекторе вы можете навести курсор мыши на элемент, для которого вы хотите увидеть код, и наблюдать его здесь.

Это прекрасно работает для меня, так как я постоянно редактирую HTML-код моего сайта.

Я надеюсь, что это работает для вас (если это так, пожалуйста, подтвердите мой ответ). Спасибо.

Answer 2

Как уже упоминали другие, инструменты веб-разработчика хороши для этого типа работы / обучения. Все современные браузеры имеют это встроенное. Поскольку вы используете Firefox, вы можете просто щелкнуть правой кнопкой мыши по интересующей вас части и выбрать "Осмотреть элемент". Это загрузит отдельную панель с источником, прокручиваемым до интересующего элемента.

Другой альтернативой является дополнение Firebx для Firefox, где большинство этих инструментов для разработчиков получили свое вдохновение. Многое совпадает со встроенными инструментами разработчика в Firefox, и, в основном, это вопрос личных предпочтений, которые вы используете. Я склонен использовать Firebug, так как я использовал его с самого начала, и это то, с чем я больше всего знаком.

Самое приятное в этих инструментах состоит в том, что они обычно выделяют область веб-страницы, которая является результатом HTML, показывают вычисленный CSS, а также то, что другие CSS могли соответствовать, но не применялись, визуализировать DOM. для вас и т. д. и т. д.

Answer 3

Установите дополнение Firebug для Firefox и используйте элемент inspect, чтобы увидеть, что происходит на веб-странице.