Как посмотреть исходный код страницы

Мануалы
6Нравится
Комментарии
Поделиться
Как посмотреть исходный код страницы

Если вам нужно проанализировать содержимое страницы в формате HTML, самый простой способ — это открыть её исходный код. С его помощью можно посмотреть метатеги, скопировать часть кода для парсинга, изучить стили оформления страницы, узнать о наличии подключённых счётчиков аналитики, dofollow и nofollow ссылках. Коды страниц доступны для просмотра любому пользователю. Из этого поста вы узнаете, как открыть исходный код в разных браузерах.

1. Что такое исходный код страницы, и как его посмотреть

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

1.1. Как открыть код страницы

Перейдите на страницу, которую нужно проанализировать. Для отображения кода используйте сочетание клавиш Ctrl+U. Откроется подробное описание страницы в формате HTML-разметки, тегов и скриптов.

Как открыть код страницы

Код страницы включает:

  • названия title, description;
  • данные микроразметки Schema.org, Open Graph или других словарей;
  • данные JavaScript;
  • язык отображения контента на странице;
  • подключенные счётчиков аналитики, генераторов заявок и других сервисов;
  • исходящие ссылки на другие страницы и сайты;
  • расположение картинок, заголовков и текстовых блоков;
  • размеры и тип шрифтов, цвета элементов.

Для детального анализа откройте код страницы вместе с инструментами разработчика. Это можно сделать в любом браузере через настройки или сочетание клавиш Ctrl+Shift+I. Например, в Яндекс.Браузере нужно открыть меню параметров, выбрать дополнительные инструменты и пункт «Инструменты разработчика».

Как открыть пункт «Инструменты разработчика» в Яндекс.Браузере

Инструменты для вебмастеров появляются в том же окне рядом с открытой страницей.

Как открыть инструменты для вебмастеров в браузере

При наведении курсора мыши на участке HTML в тексте слева подсветится элемент, который описан этим участком. Для более подробного анализа данных выберите один из разделов в верхней правой части окна:

  • Elements → описывает все элементы страницы.
  • Console → выявляет возможные и критические ошибки кода.
  • Sources → показывает содержимое файлов на странице.
  • Network → указывает код ответа сервера, время загрузки страницы и ее размер.
  • Security → отображает информацию о сертификате SSL.
  • Audits → позволяет провести технический аудит мобильной или десктопной версии страницы.

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

1.2. Как посмотреть исходный код страницы в браузере Google Chrome

В меню настроек в правой верхней части экрана выберите «Дополнительные инструменты», затем пункт «Инструменты разработчика».

Как посмотреть исходный код страницы в браузере Google Chrome

Выбрать соответствующий пункт можно также в контекстном меню правой кнопки мыши.

1.3. Как посмотреть исходный код веб-страницы в Mozilla Firefox

Зайдите в «Инструменты» → «Веб-разработка» → «Исходный код страницы».

Как посмотреть исходный код веб-страницы в Mozilla Firefox

1.4. Как посмотреть исходный код страницы в браузере Opera

Нажмите в верхней панели «Меню» → «Разработка» → «Исходный код страницы».

Как посмотреть исходный код страницы в браузере Opera

1.5. Как посмотреть исходный код страницы в Safari

Откройте раздел «Разработка» в верхнем меню браузера.

Как посмотреть исходный код страницы в Safari

Safari, кстати, ещё отображает коды веб-страниц через смартфон. Зайдите в параметры мобильного браузера и выберите «View Source».

Как посмотреть исходный код страницы в Safari через смартфон

1.6. Как посмотреть исходный код страницы в Microsoft Edge

В Microsoft Edge источник страницы открывается через параметры (три точки) → «Дополнительные средства» → «Средства разработчика».

Как посмотреть исходный код страницы в Microsoft Edge

В каждом браузере также доступен просмотр кода элемента: логотипа, картинки, заголовка. Для анализа HTML-разметки отдельного объекта необходимо навести курсор и выбрать в контекстном меню правой кнопки мыши пункт «Исследовать код элемента».

1.7. Как посмотреть исходный код страницы с помощью Netpeak Spider

  1. Если вам нужно посмотреть код уже проскариванного краулером URL, выделите его и воспользуйтесь комбинацией клавиш Ctrl+U либо откройте контекстное меню и выберите пункт «Исходный код и HTTP-заголовки».

    Как посмотреть исходный код страницы с помощью Netpeak Spider

  2. Затем откроется окно инструмента, где вы можете детально изучить исходный код.

    Инструмент «Анализ исходного кода и HTTP-заголовков» в Netpeak Spider

  3. Чтобы посмотреть код страницы, которая не была просканирована Netpeak Spider, откройте инструмент через меню «Запустить».

    Как открыть окно инструмента «Анализ исходного кода и HTTP-заголовков» в Netpeak Spider

  4. Вставьте нужный URL и нажмите «Старт» для начала анализа.

    Как проанализировать URL в инструменте «Анализ исходного кода и HTTP-заголовков» в Netpeak Spider

У Netpeak Spider есть бесплатная версия без ограничений по времени, в которой у вас будет возможность проанализировать исходный код и HTTP-заголовки URL. Также в Freemium-версии доступно много других базовых функций.

Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! 😉

Зарегистрироваться и установить бесплатную версию

Ознакомиться со всеми особенностями инструмента «Анализ исходного кода и HTTP-заголовков» вы можете в посте на нашем блоге.

Подводим итоги

Исходный код страницы открывается в разных браузерах и доступен для просмотра всем пользователям. Чтобы открыть код в отдельном окне, используйте сочетание клавиш Ctrl+U или выберите соответствующий пункт в параметрах браузера. Код страницы состоит из элементов HTML, описаний стилей CSS и JavaScript. По этим данным можно изучить разметку страницы, и узнать множество других сведений о странице и её содержании

А для чего вы просматриваете исходный код страницы? Делитесь в комментариях :)