Как открыть код страницы и что в нём можно найти

Веб-сайт — это не только то, что мы видим в браузере: текст, изображения и видео. У каждой страницы есть исходный код — он описывает её структуру, расположение элементов и логику их работы. Этот код можно открыть в любом браузере, чтобы разобраться, как устроен сайт, или даже воспроизвести его структуру — разумеется, в учебных целях :)

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

Содержание

• Что такое код страницы
• Кому пригодится анализ веб-страниц
• Как посмотреть код на компьютере или ноутбуке
• Просмотр кода на телефоне
• Как читать код страницы

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

В разработке программного обеспечения исходный код — это набор инструкций, на основе которых создаётся программа. Обычно его пишут на языках программирования вроде Python или Java, используя библиотеки и фреймворки.

В веб-разработке под кодом страницы понимают другое. Это совокупность файлов и команд, которые отвечают за загрузку страницы, её структуру, внешний вид и поведение в браузере. Основу этого кода составляют три технологии: HTML, CSS и JavaScript. Каждая из них выполняет свою роль.

HTML (HyperText Markup Language, язык гипертекстовой разметки) описывает структуру веб-страницы и определяет, какие элементы на ней присутствуют: текст, изображения, таблицы, видео и другие компоненты. Это не полноценный язык программирования, а язык разметки — набор правил, по которым браузер «читает» страницу и отображает её содержимое.

Читайте также:

Язык HTML: что это такое и как он работает

CSS (Cascading Style Sheets, каскадные таблицы стилей) отвечает за внешний вид страницы: цвета, шрифты, отступы, размеры и расположение элементов. С его помощью также настраивают адаптивность сайта — то есть корректное отображение на устройствах с разными размерами экранов и разрешениями, будь то смартфон, планшет или ноутбук.

Читайте также:

Учимся верстать: что такое CSS

JavaScript — язык программирования, используемый для реализации интерактивных элементов веб-страницы. Он обрабатывает действия пользователя, управляет формами, всплывающими окнами и анимациями. И ещё может менять элементы на странице после её загрузки, например перекрашивать кнопку в другой цвет после нажатия.

Читайте также:

Что такое JavaScript и зачем он нужен

Кому пригодится анализ кода страницы

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

Веб-разработчики обращаются к коду страниц для решения разных задач. Например, при изучении фронтенда — HTML, CSS и JavaScript — можно открыть любой сайт и посмотреть, как эти языки применяются на практике. Бэкенд-программисты изучают код страниц для анализа AJAX— и JSON-запросов, отслеживания работы API и отладки.

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

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

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

Как посмотреть код на компьютере

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

Просмотр исходного кода в браузерах

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

Чтобы открыть исходный код страницы в браузерах на Windows и Linux (Google Chrome, Microsoft Edge, Firefox, Opera, «Яндекс Браузер» и других), кликните правой кнопкой мыши в любом месте страницы и выберите соответствующий пункт в контекстном меню.

В зависимости от программы, его название может различаться: например, в Google Chrome это Просмотр кода страницы, в Microsoft Edge — Просмотреть исходный код, в Firefox — Исходный код страницы.

Также открыть код страницы в браузере можно, используя горячие клавиши:

• Ctrl + U в Windows;
• Ctrl + Option + U в Linux;
• Cmd + Option + U в macOS.

Отдельно стоит сказать о Safari — встроенном браузере на macOS. Просмотр кода страницы в нём изначально отключён и недоступен пользователям. Чтобы его активировать, перейдите в меню браузера в левом верхнем углу на главной панели и выберите пункт Настройки. В открывшемся окне нажмите кнопку Дополнения и включите Показывать функции для веб-разработчиков.

После этого в главном меню Safari появится раздел Разработка. Можно будет либо вручную выбрать в нём Посмотреть программный код страницы, либо использовать комбинацию клавиш Cmd + Option + U.

Режим разработчика (DevTools)

Режим разработчика (DevTools) — это расширенный инструмент для анализа и отладки веб-страниц, встроенный в браузер. В отличие от обычного просмотра исходного кода, он отображает фактическое содержимое страницы с учётом выполнения кода JavaScript, который может менять HTML-структуру и стили CSS.

Режим разработчика полезен в тех случаях, когда требуется:

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

Открыть режим разработчика в Windows и Linux можно с помощью клавиши F12 или сочетания Ctrl + Shift + I, а на macOS — Cmd + Option + I. После этого в браузере появится окно с вкладками, содержащими весь контент страницы, включая скрипты.

Читайте также:

Chrome DevTools: основные инструменты и полезные функции

Просмотр кода на телефоне

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

Как посмотреть код на устройствах Android

Наберите название сайта в браузере Chrome, добавив специальный префикс «view-source: „, например:

view-source:https://skillbox.ru

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

Анализировать код таким способом неудобно. Лучше всего установить из Google Play Store специальные приложения, предназначенные для просмотра кода страниц. Например, HTML Viewer, HTML Source Code Viewer и Html Viewer: Чтение HTML-кода.

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

Как подключить DevTools на Android через ПК

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

Процесс работы во многом зависит от специфики устройства, но в целом он проходит в несколько этапов:

1. В настройках мобильного устройства перейдите в раздел О телефоне → Сведения о ПО или воспользуйтесь поиском в ОС, введя в него Сведения о ПО. Найдите пункт Номер сборки и нажмите на него семь раз, после чего введите PIN. На экране появится уведомление о включении режима разработчика.
2. В Параметрах разработчика включите пункт Отладка по USB. Соедините устройство с компьютером при помощи USB-кабеля и подтвердите запрос на отладку на экране смартфона или планшета.
3. Запустите браузер Chrome на ПК и перейдите по адресу chrome://inspect/#devices
4. Убедитесь, что включена опция Discover USB devices: в списке должна появиться модель подключённого устройства.
5. Перейдите на анализируемую веб-страницу в браузере Chrome на смартфоне или планшете.
6. На странице устройств в Chrome на ПК под названием устройства появится список открытых вкладок. Нажмите Inspect напротив нужной страницы — откроется Chrome DevTools, подключённый к сайту на мобильном устройстве.

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

В мобильном Safari посмотреть исходный код страницы через view-source: не получится. iOS не поддерживает этот протокол и выведет ошибку. Установка сторонних браузеров не решит проблему, так как они используют стандартные компоненты Apple.

Чтобы посмотреть код страниц на устройствах с iOS или iPadOS, придётся установить специальные приложения из AppStore. Например, HTML Viewer Q или HTML Viewer. Принцип работы у них схож с аналогичным софтом из Play Store: приложение загружает страницу сайта внутри себя и показывает её код.

Для отладки страниц в мобильных браузерах на iPhone и iPad подключите устройство к компьютеру на macOS и откройте десктопный Safari. В его меню Разработка выберите пункт Показать веб-инспектор.

Если у вас нет устройства на macOS, то используйте специальные инструменты для Windows: Playwright, Eruda или iOS WebKit Debug.

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

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

Чтобы посмотреть код конкретного элемента, выделите его на странице, нажмите ПКМ и выберите Просмотреть код, либо откройте инструменты разработчика сочетанием Ctrl + Shift + I на Windows и Linux и Cmd + Option + I на macOS.

Заголовки в тексте. В HTML это теги <h1> — <h6>, которые отображают иерархию содержимого. По ним можно определить, какие темы на странице основные, а какие — второстепенные. Это может пригодиться для анализа SEO-структуры сайта.

Метаданные. В них содержится информация о странице, которая не отображается напрямую, но используется поисковыми системами, самим браузером и другими сервисами. Её можно найти внутри тега <meta> с различными атрибутами: keywords (ключевые слова), description (описание страницы), charset (кодировка сайта) и так далее.

Читайте также:

HTML-тег <​meta​>: что это, зачем он нужен, какие бывают метатеги

Ссылки и их атрибуты. В коде видно не только текст ссылки, но и её фактический адрес — он указан в атрибуте href тега <a>. Там же могут находиться дополнительные параметры, которые учитываются при обработке страницы поисковыми системами.

Читайте также:

Тег <​a​> в HTML: как делать ссылки на страницы, файлы и разделы

Изображения и другие медиафайлы. В тегах <img>, <video>, <audio> хранится информация об их источнике, размере и формате, а также альтернативное описание (alt=), которое отображается, если загрузка невозможна.

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

Формы для сбора и отправки данных. Изучая HTML-теги <form>, можно узнать, какие данные сайт запрашивает у пользователя и куда именно они отправляются. Это важно при анализе форм регистрации, обратной связи и авторизации.

Подобный тег используется не на всех сайтах. Часто интерактивные формы подгружаются динамически с помощью JavaScript или сторонних сервисов внутри контейнеров <div>.

Подключённые внешние сервисы. По тегам <script> можно определить, какие дополнительные ресурсы использует страница: сторонние библиотеки, аналитические сервисы, виджеты и другие подключаемые скрипты.

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