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

Бывает так, что нужно проанализировать содержимое страницы в формате HTML, проще всего это сделать с помощью исходного кода страницы.

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

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

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

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

Вы должны находиться на странице, которую вы планируете проанализировать. Чтобы увидеть его код, нажмите одновременно CTRL+U (стандартный набор клавиш в браузере). Тогда должна открыться страница с исходным кодом в формате HTML разметки, тегов и скриптов.

Что можно увидеть с помощью исходного кода?

• Полные названия title, description, h1 и другие мета данные
• Данные всех возможных микроразметок Schema.org, Open Graph или другие
• Исходные данные JavaScript
• Язык поддержки и отображения контента на сайте
• Подключены ли счетчики аналитики, форм для заявок и другое
• Внутренние и внешние ссылки на страницы, сайты
• Какая структура сайта: как расположены картинки, заголовки, блоки
• Файлы стилей, которые отвечают за размеры, тип шрифтов, цветовая гамма.

Если вам не хватает полученных данных, тогда можно сделать более детальный анализ кода страниц с помощью инструментов разработчика. В любом браузере он открывается используя комбинацию клавиш Ctrl+Shift+I . Также в Яндекс.Браузере можно попасть в этот раздел используя меню параметров, после дополнительные инструменты и выбрать инструменты разработчика.

Специальные инструменты для вебмастеров (SEOшников) также есть рядом с открытой страницей на панели.

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

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

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

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

Сделать это можно с помощью верхнего правого меню, там вызвать «Дополнительные инструменты», после перейти в «Инструменты разработчика». Аналогично как и в Яндекс.Браузере, так как он создан на основе платформы Cromeum.

Кроме этого вы можете вызвать дополнительные инструменты разработчика правой кнопкой мыши в любой точке страницы.

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

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

Больше никаких хитрых действий не нужно выполнять, все крайне просто.

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

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

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

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

Главное отличие данного браузера от всех, вы можете посмотреть веб страницы и их код даже через смартфон. Нужно просто зайти с мобильного браузера и выбрать пункт «View Source», что крайне удобно.

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

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

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

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