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

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

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

Что такое исходный код страницы

Исходный код страницы – это разметка и набор подключенных ресурсов, которые браузер получает от сайта и использует для формирования веб-страницы.

Основу большинства страниц составляют три технологии:

• HTML задает структуру: заголовки, тексты, ссылки, изображения, списки, таблицы и формы;
• CSS отвечает за внешний вид элементов: цвета, размеры, шрифты, отступы и расположение блоков;
• JavaScript управляет интерактивными функциями и может изменять содержимое после загрузки страницы.

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

Можно ли увидеть весь код сайта

Через браузер доступен только тот код и те данные, которые были переданы на устройство пользователя:

• HTML-разметка;
• адреса CSS- и JavaScript-файлов;
• ссылки на изображения и другие ресурсы;
• открытые данные, встроенные в HTML или скрипты;
• структура страницы после выполнения JavaScript.

Получить таким способом закрытую серверную часть нельзя. В исходном коде страницы не отображаются:

• содержимое базы данных;
• пароли и закрытые ключи;
• конфигурация сервера;
• исходные PHP-файлы;
• внутренняя логика серверного приложения;
• административная панель и ее закрытые данные.

Браузер получает не серверный код, а результат его выполнения.

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

Посмотреть исходный код можно несколькими способами. Выбор зависит от браузера и задачи.

С помощью горячих клавиш

Откройте нужную страницу и нажмите:

• Ctrl + U – в Windows и Linux;
• Command + Option + U – в macOS.

Исходный HTML обычно откроется в отдельной вкладке.

Через контекстное меню

Нажмите правой кнопкой мыши по свободной области страницы. В меню найдите один из пунктов:

• «Просмотр кода страницы»;
• «Посмотреть код страницы»;
• «Исходный код страницы»;
• «Исходный текст страницы»;
• View Page Source;
• View Source.

Название команды зависит от браузера, его версии и языка интерфейса.

Через команду view-source

Перед адресом страницы в браузере можно добавить:

view-source:https://example.com/page/

После перехода браузер попробует открыть исходный HTML указанного URL.

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

Исходный код и DevTools – не одно и то же

Одна из самых распространенных ошибок – считать, что исходный код страницы и содержимое вкладки Elements показывают одинаковые данные.

Это не совсем так.

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

Команда Ctrl + U обычно показывает HTML, который сервер первоначально вернул браузеру.

В нем может еще не быть элементов, которые:

• добавляются через JavaScript;
• загружаются отдельными запросами;
• появляются после прокрутки;
• создаются после нажатия на кнопку;
• получают данные через API.

Вкладка Elements в DevTools

Вкладка Elements показывает текущую структуру DOM после того, как браузер обработал HTML, CSS и JavaScript.

На странице к этому моменту могли появиться:

• товары;
• цены;
• фильтры;
• всплывающие окна;
• отзывы;
• блоки FAQ;
• дополнительные ссылки;
• динамически измененные заголовки и тексты.

Поэтому один и тот же элемент может отсутствовать в исходном коде, но присутствовать в Elements.

Какой инструмент выбрать

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

Google Chrome

Чтобы открыть исходный код страницы в Chrome:

1. Перейдите на нужную страницу.
2. Нажмите Ctrl + U.
3. Для поиска по коду используйте Ctrl + F.

На Mac используется сочетание Command + Option + U.

Также можно нажать правой кнопкой мыши по свободной области страницы и выбрать «Просмотр кода страницы».

Для открытия инструментов разработчика используйте:

• F12;
• Ctrl + Shift + I;
• Command + Option + I на Mac;
• пункт «Просмотреть код» в контекстном меню.

Яндекс Браузер

В Яндекс Браузере действуют практически те же способы:

• Ctrl + U – открыть исходный HTML;
• Ctrl + Shift + I – открыть инструменты разработчика;
• правая кнопка мыши – выбрать просмотр исходного кода или проверку элемента.

Яндекс Браузер построен на Chromium, поэтому его DevTools по возможностям и интерфейсу во многом похожи на инструменты Chrome.

Microsoft Edge

В Edge можно использовать:

• Ctrl + U – просмотр исходного кода;
• F12 – панель разработчика;
• Ctrl + Shift + I – DevTools;
• View source – через контекстное меню.

Для поиска по открытому HTML нажмите Ctrl + F.

Mozilla Firefox

В Firefox доступны стандартные комбинации:

• Ctrl + U – исходный код страницы;
• F12 или Ctrl + Shift + I – инструменты разработчика;
• «Исходный код страницы» – через контекстное меню;
• «Исследовать» – просмотр выбранного элемента.

Opera

В Opera обычно работают:

• Ctrl + U;
• Ctrl + Shift + I;
• пункт «Исходный текст страницы»;
• команда «Проверить код элемента».

Названия пунктов могут немного отличаться в зависимости от версии браузера.

Safari

В Safari может потребоваться предварительно включить функции для разработчиков:

1. Откройте настройки Safari.
2. Перейдите в раздел дополнительных параметров.
3. Включите функции для веб-разработчиков.
4. Откройте появившееся меню «Разработка».
5. Выберите просмотр исходного кода или Web Inspector.

Для открытия Web Inspector можно использовать Command + Option + I.

В панели доступны HTML, CSS, JavaScript, консоль, сетевые запросы и другие инструменты анализа страницы.

Как найти нужный фрагмент в исходном коде

Просматривать весь HTML вручную не нужно. Даже у относительно небольшой страницы код может занимать тысячи строк.

Откройте исходный код и нажмите:

• Ctrl + F – в Windows и Linux;
• Command + F – в macOS.

После этого введите текст, название атрибута, класс элемента или фрагмент тега.

Например:

• application/ld+json
• nofollow
• data-src
• googletagmanager
• display:none
• iframe

Например, если нужно найти блок с микроразметкой, достаточно искать:

• application/ld+json

Если требуется проверить определенную ссылку, можно искать часть ее URL или анкорный текст.

Как посмотреть код конкретного элемента

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

Порядок действий:

1. Наведите курсор на нужный элемент.
2. Нажмите правой кнопкой мыши.
3. Выберите «Просмотреть код», «Исследовать» или Inspect.
4. В панели разработчика откроется соответствующий участок DOM.
5. Рядом будут показаны примененные CSS-стили.

В Chrome, Edge и других Chromium-браузерах в левом верхнем углу DevTools есть инструмент выбора элемента. Нажмите на значок стрелки, а затем выберите нужный блок непосредственно на странице.

Через инспектор можно проверить:

• какой HTML-тег используется;
• классы и идентификаторы;
• адрес ссылки;
• источник изображения;
• атрибут alt;
• размеры элемента;
• CSS-стили;
• скрывающие свойства;
• вложенность блоков;
• динамические изменения.

Например, визуально элемент может выглядеть как ссылка, но технически быть кнопкой или обычным <div> с JavaScript-обработчиком. Через инспектор это сразу видно.

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

В мобильных браузерах нет полноценного аналога десктопных DevTools. Поэтому просмотр и анализ кода на смартфоне ограничен.

Android

Сначала можно попробовать добавить перед URL команду:

view-source:https://example.com/

В некоторых браузерах откроется исходный HTML. В других команда может не поддерживаться или восприниматься как поисковый запрос.

Если способ не работает, можно:

• открыть страницу в приложении для просмотра HTML;
• отправить ссылку на компьютер;
• подключить смартфон к компьютеру и использовать удаленную отладку Chrome.

Для удаленной отладки на Android нужно включить параметры разработчика и USB-отладку. После подключения устройства на компьютере можно открыть DevTools для страницы, которая фактически загружена на смартфоне.

Это особенно полезно, если ошибка возникает только в мобильной версии или на конкретном устройстве.

iPhone и iPad

В мобильном Safari нет обычной команды Ctrl + U. Конструкция view-source: также работает не во всех случаях.

Для полноценной проверки удобнее использовать Web Inspector:

1. В настройках Safari на iPhone или iPad включите Web Inspector.
2. Подключите устройство к Mac.
3. Откройте Safari на компьютере.
4. Перейдите в меню Develop.
5. Выберите подключенное устройство и нужную страницу.

После этого можно анализировать DOM, стили, скрипты, консоль и сетевые запросы мобильной страницы.

Стоит ли анализировать код прямо на телефоне

Для единичной проверки можно попробовать view-source: или специальное приложение. Но для регулярной SEO- и технической работы удобнее использовать компьютер.

Удаленная отладка нужна, когда необходимо проверить:

• ошибку, возникающую только на смартфоне;
• мобильное меню;
• адаптивный блок;
• загрузку контента при прокрутке;
• работу формы на реальном устройстве;
• особенности Safari на iPhone;
• мобильные сетевые запросы и JavaScript.

Когда SEO-специалисту действительно нужен исходный код

Метатеги, canonical, robots и заголовки быстрее посмотреть через браузерный SEO-плагин. Исходный код становится полезен, когда нужно не просто увидеть значение, а разобраться в реализации страницы.

Сравнить серверный HTML и отрендеренный DOM

Это одна из основных задач.

Если важный контент есть во вкладке Elements, но отсутствует в исходном коде через Ctrl + U , значит, он добавляется после загрузки страницы.

В таком случае стоит проверить:

• доступен ли контент поисковым роботам;
• не появляется ли он только после действия пользователя;
• не требуется ли прокрутка;
• успешно ли выполняется API-запрос;
• не возникает ли ошибка JavaScript;
• совпадает ли серверная и клиентская версия страницы.

Отсутствие текста в первоначальном HTML не всегда является проблемой. Но такую реализацию нельзя оценивать только визуально – требуется дополнительная проверка рендеринга.

Найти дублирующиеся элементы

В коде могут находиться:

• несколько тегов <title>;
• несколько Description;
• два или более canonical;
• повторяющаяся микроразметка;
• старые данные из предыдущего шаблона;
• серверная и JavaScript-версия одного элемента;
• дублирующиеся заголовки и текстовые блоки.

Проверить доступность основного контента

В коде можно посмотреть, присутствуют ли в первоначальной версии страницы:

• основной текст;
• названия товаров;
• цены;
• характеристики;
• ссылки пагинации;
• хлебные крошки;
• блоки перелинковки;
• отзывы;
• вопросы и ответы;
• карточки товаров и услуг.

Это особенно важно для сайтов, где контент активно формируется JavaScript.

Например, пользователь может видеть список товаров, но в первоначальном HTML будет только пустой контейнер. Сами карточки появятся позже после запроса к API. Такой вариант требует более внимательной проверки индексации и рендеринга.

Проверить реализацию ссылок

Не каждый кликабельный элемент является обычной HTML-ссылкой.

Переход может быть реализован через:

• кнопку;
• JavaScript-обработчик;
• элемент <div>;
• атрибут onclick;
• ссылку без корректного href;
• динамическую подстановку URL;
• открытие страницы только после дополнительного действия.

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

Через код можно проверить:

• есть ли тег <a>;
• заполнен ли атрибут href;
• не используется ли нежелательный nofollow;
• не скрыта ли ссылка;
• появляется ли она в серверном HTML;
• не ведет ли URL на редирект или ошибочную страницу.

Проанализировать изображения

В исходном коде и DevTools можно проверить:

• реальный адрес изображения;
• атрибут alt;
• наличие width и height;
• использование srcset;
• ленивую загрузку;
• подстановку файла через data-src;
• загрузку разных изображений для мобильных и десктопных устройств;
• формат и размеры файла.

При ленивой загрузке в атрибуте src может находиться заглушка, а реальный адрес – в data-src, data-lazy-src или другом пользовательском атрибуте.

Проверить микроразметку

JSON-LD обычно можно найти по строке:

• application/ld+json

Пример блока:

<script type="application/ld+json">

{

  "@context": "https://schema.org",

  "@type": "Article"

}

</script>

Исходный код помогает понять:

• где и как добавлена разметка;
• не дублируется ли один блок;
• соответствует ли она текущей странице;
• не остались ли данные другого товара или статьи;
• не добавляется ли часть разметки через JavaScript;
• нет ли конфликтующих сущностей.

Проверить подключение скриптов

В HTML можно найти код подключения:

• систем аналитики;
• менеджеров тегов;
• коллтрекинга;
• онлайн-чатов;
• рекламных пикселей;
• виджетов;
• внешних сервисов.

Для поиска можно использовать характерные фрагменты:

• googletagmanager
• gtag
• metrika
• analytics

При этом наличие скрипта в HTML еще не означает, что он работает.

Скрипт может:

• не загрузиться;
• вернуть ошибку;
• быть заблокирован;
• запускаться несколько раз;
• срабатывать только после согласия на cookie;
• конфликтовать с другим кодом.

Фактическую загрузку нужно проверять во вкладках Network и Console.

Найти скрытые и шаблонные блоки

В коде могут оставаться элементы, которые пользователь не замечает:

• скрытые заголовки;
• дубли текстов;
• две версии меню;
• мобильный и десктопный вариант одного блока;
• старые формы;
• шаблонные ссылки;
• блоки со стилем display: none;
• контент другого региона;
• незаполненные элементы шаблона.

Такие элементы могут создавать дубли, нарушать структуру страницы или мешать корректному анализу контента.

Как посмотреть содержимое CSS- и JavaScript-файлов

В исходном HTML подключенные файлы обычно выглядят так:

• <link rel="stylesheet" href="/css/style.css">
• <script src="/js/main.js"></script>

Чтобы открыть файл, можно перейти по его адресу или найти его во вкладке Sources в DevTools.

CSS позволяет понять:

• какие стили применяются к элементу;
• почему блок скрыт;
• как устроена адаптивная версия;
• какие размеры и отступы используются;
• какое правило перекрывает другое.

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

В DevTools обычно доступна функция форматирования – кнопка с фигурными скобками {}. Она добавляет переносы и отступы, но не восстанавливает исходные названия и структуру проекта.

Можно ли изменить исходный код страницы

Через DevTools можно временно изменить:

• текст;
• HTML-разметку;
• CSS-стили;
• ссылки;
• изображения;
• размеры элементов;
• классы;
• атрибуты;
• видимость блоков.

Например, можно дважды нажать на текст во вкладке Elements и заменить его. Также можно отключить отдельное CSS-свойство или добавить новое.

Но такие изменения:

• видны только в текущем браузере;
• не изменяют сайт на сервере;
• недоступны другим пользователям;
• исчезают после обновления страницы.

Этот способ полезен для предварительной визуализации правок.

Например, можно заранее посмотреть:

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

Чтобы внести изменения постоянно, нужен доступ к CMS, шаблонам, репозиторию или файлам сайта.

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

Чтобы сохранить HTML:

1. Откройте исходный код через Ctrl + U.
2. Нажмите Ctrl + S.
3. Выберите папку и формат сохранения.

Также можно нажать Ctrl + S непосредственно на открытой странице. В зависимости от браузера будут доступны варианты:

• сохранить только HTML;
• сохранить страницу полностью;
• сохранить веб-архив;
• сохранить HTML вместе с папкой ресурсов.

Важно различать сохранение одной страницы и скачивание всего сайта.

Команда браузера не переносит:

• базу данных;
• серверную логику;
• административную панель;
• внутренние API;
• конфигурацию;
• закрытые файлы;
• систему управления сайтом.

Даже полностью сохраненная страница может работать иначе без подключения к серверу.

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

Почему исходный код не открывается

В контекстном меню нет нужного пункта

Попробуйте:

• нажать Ctrl + U;
• использовать команду view-source:;
• нажать правой кнопкой по свободной области;
• открыть страницу в другом браузере;
• проверить, не ограничены ли DevTools корпоративной политикой.

После Ctrl + U ничего не происходит

Возможные причины:

• курсор находится в текстовом поле;
• комбинация перехватывается расширением;
• используется встроенный браузер приложения;
• браузер не поддерживает команду;
• нажато другое сочетание из-за раскладки клавиатуры.

В исходном коде нет текста со страницы

Скорее всего, текст добавляется через JavaScript.

Откройте DevTools → Elements и повторите поиск. Если элемент появился там, но отсутствует в исходном HTML, значит, он был создан или загружен после первоначального ответа сервера.

Код находится в одной длинной строке

HTML, CSS или JavaScript могли быть минифицированы. Минификация уменьшает размер файлов за счет удаления пробелов, переносов и лишних символов.

Для CSS и JavaScript можно использовать функцию форматирования кода в DevTools.

Вместо кода отображается пустая страница

Причиной могут быть:

• необходимость авторизации;
• ошибка загрузки;
• блокировка расширением;
• нестандартная схема URL;
• содержимое внутри приложения;
• полностью клиентский рендеринг;
• ограничения браузера.

В таком случае стоит проверить вкладки Elements, Network и Console.

Типичные ошибки при анализе кода

1. Искать динамический контент только через Ctrl + U

Если элемент создается JavaScript, в первоначальном HTML его не будет. Нужно анализировать отрендеренный DOM.

2. Считать изменение через DevTools изменением сайта

Все локальные правки исчезают после обновления страницы.

3. Делать вывод только по наличию кода подключения

Если скрипт присутствует в HTML, это еще не значит, что он загрузился и отработал. Нужно проверить Network и Console.

4. Проверять только визуальную версию страницы

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

5. Пытаться найти серверную часть

Исходный код страницы не содержит базу данных, закрытую PHP-логику, пароли и конфигурацию сервера.

6. Использовать исходный код вместо специализированных инструментов

Для стандартной проверки метатегов, заголовков, canonical и robots удобнее использовать SEO-плагины и краулеры. Ручной просмотр кода нужен прежде всего для диагностики нестандартных ситуаций.

Чек-лист проверки исходного кода

Если бы я анализировал потенциальную техническую проблему страницы, я бы последовательно проверил:

• присутствует ли основной контент в серверном HTML;
• совпадает ли исходный HTML с отрендеренным DOM;
• нет ли дублирующихся тегов и элементов;
• доступны ли важные ссылки без выполнения JavaScript;
• реализованы ли переходы через обычные теги <a>;
• присутствуют ли ссылки пагинации в HTML;
• корректно ли загружаются изображения;
• не используется ли заглушка вместо основного файла;
• нет ли скрытых заголовков и текстовых дублей;
• не повторяется ли микроразметка;
• соответствует ли разметка текущей странице;
• присутствуют ли нужные скрипты;
• нет ли ошибок в Console;
• успешно ли загружаются ресурсы во вкладке Network;
• не отличается ли мобильная версия страницы;
• не появляется ли важный контент только после действия пользователя.

Часто задаваемые вопросы

Что важно запомнить

Исходный код и инструменты разработчика решают разные задачи:

• Ctrl + U показывает первоначальный HTML страницы;
• Elements показывает DOM после выполнения JavaScript;
• Network помогает анализировать загрузку ресурсов;
• Console показывает ошибки и сообщения скриптов;
• инспектор позволяет проверить конкретный элемент;
• локальные изменения через DevTools не сохраняются на сайте.

Для стандартной SEO-проверки метатегов, заголовков, robots и canonical удобнее использовать плагины, краулеры и специализированные сервисы.

Исходный код нужен, когда возникает более сложный вопрос:

• почему плагин показывает противоречивые данные;
• доступен ли контент без JavaScript;
• откуда появляется дублирующийся элемент;
• как реализована ссылка;
• загружается ли нужный скрипт;
• почему мобильная версия работает иначе;
• чем серверный HTML отличается от текущего DOM.

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

Digital-компания «Скобеев и Партнеры» ведет более 100 клиентских сайтов по SEO и регулярно сталкивается как с отдельными ошибками в коде, так и с системными проблемами шаблонов. Если вам требуется не просто посмотреть исходный код, а определить причины просадки и найти точки роста, можно обратиться за SEO-аудитом, консультацией или разбором стратегии продвижения.