Как открыть HTML-код в браузере

Как открыть HTML-код в браузереПросмотр HTML-кода страницы в браузере

Просмотр кода страницы сайта может понадобиться по разным причинам: например, для получения расширенных сведений о том, из чего состоит страница, копирования или редактирования какой-то информации, в обучающих целях для начинающих веб-разработчиков. Разберем основные способы решения поставленной задачи.

Способ 1: Горячая клавиша

Браузером намного удобнее управлять, если выучить и применять на практике различные горячие клавиши. Так, для быстрого открытия исходного кода достаточно нажать сочетание Ctrl + U. Оно работает во всех веб-обозревателях, поэтому даже при использовании разных программ комбинация не утратит актуальности.

Способ 2: Контекстное меню

Для тех, кому комфортнее пользоваться мышкой, предназначен альтернативный вариант, и для всех браузеров он практически одинаков.

    • Google Chrome: нажмите правой кнопкой мыши по пустому пространству и выберите пункт «Просмотр кода страницы».

Переход в просмотр HTML-кода страницы через контекстное меню в браузере Google Chrome

    • Яндекс.Браузер: ПКМ по пустому пространству > «Просмотреть код страницы».

Переход в просмотр HTML-кода страницы через контекстное меню в Яндекс.Браузере

    • Opera: вызовите контекстное меню и кликните по варианту «Исходный текст страницы».

Переход в просмотр HTML-кода страницы через контекстное меню в Opera

    • Mozilla Firefox: правым кликом мышью по свободному месту на странице разверните контекстное меню и щелкните по позиции «Исходный код страницы».

Переход в просмотр HTML-кода страницы через контекстное меню в Mozilla Firefox

В результате этих действий будет открыта новая вкладка с интересующим вас содержимым. Она будет одинаковой независимо от браузера.

Просмотр HTML-кода страницы в любом браузере

Способ 3: Инструменты разработчика

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

Читайте также: Открытие консоли разработчика в браузере

    • Google Chrome: жмите правой кнопкой мыши по странице или объекту и выбирайте «Просмотреть код».

Просмотр кода страницы через инструменты разработчика в Google Chrome

    • Яндекс.Браузер: щелкните правой кнопкой мыши по странице или интересующей области и выберите «Исследовать элемент».

Просмотр кода страницы через инструменты разработчика в Яндекс.Браузере

    • Opera: кликните ПКМ по нужной области страницы, а затем по варианту «Просмотреть код элемента».

Просмотр кода страницы через инструменты разработчика в Opera

    • Mozilla Firefox: ПКМ по любой области страницы или конкретной части — «Исследовать элемент».

Просмотр кода страницы через инструменты разработчика в Mozilla Firefox

По умолчанию откроется вкладка «Elements» (в Firefox — «Инспектор»), где вы сможете просматривать HTML и CSS код всей страницы или конкретного объекта. Чтобы узнавать больше о конкретном элементе страницы, нажмите на кнопку со стрелкой и наводите на интересующий объект. Во всплывающем окне будет отображаться вся сопутствующая информация, а в инструментах разработчика автоматически развернется та область кода, которая отвечает за выбранный элемент.

Просмотр HTML-кода отдельного элемента страницы через инструменты разработчика в любом браузере

С остальными возможностями этой вкладки юзер сможет разобраться самостоятельно, а также внести изменения при необходимости.

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

Источник: lumpics.ru

Оцените статью
Вопросы и Ответы
Добавить комментарий