Ссылки на устройства
Вам интересно, из чего состоит веб-страница? Хотите знать, как изменить размер или цвет шрифта на вашем сайте? Просматривая HTML-код веб-страницы, вы можете делать все это и многое другое.

В этом руководстве мы покажем вам, как просмотреть HTML-код веб-страницы в Chrome.
Просмотр HTML-кода в Chrome
При написании на HTML исходный код представляет собой ряд тегов и атрибутов, используемых для определения структуры и содержимого веб-страницы.
Исходный код читается веб-браузерами и преобразуется в графическую веб-страницу, которую вы видите на экране. Помимо определения внешнего вида веб-страницы, исходный код также можно использовать для добавления интерактивности, такой как всплывающие окна, формы и раскрывающиеся меню.
Хотя обычному пользователю Интернета может никогда не понадобиться просматривать исходный HTML-код веб-страницы, есть несколько причин, по которым некоторые могут захотеть это сделать.
Для разработчиков просмотр исходного кода может быть полезным способом понять, как устроена страница, и определить, какие элементы стилей и сценариев используются. Дизайнерам может быть полезно посмотреть, как другие дизайнеры использовали HTML для создания эффективных макетов.
В некоторых случаях пользователи также могут захотеть просмотреть исходный код, чтобы устранить ошибки или узнать больше о том, как работает конкретный веб-сайт или веб-приложение. Какова бы ни была причина, просмотр исходного кода HTML — относительно простой процесс в Chrome.
Как просмотреть HTML-код веб-страницы в Chrome на ПК с Windows
Операционная система Windows является одной из наиболее совместимых систем Chrome. Chrome построен на основе проекта Chromium с открытым исходным кодом, основным участником которого является Microsoft. Эта совместимость распространяется на область HTML, где популярный браузер позволяет пользователям просматривать HTML-код любого веб-сайта.
Вы можете просмотреть HTML-код двумя способами.
Использование просмотра исходного кода страницы
Этот метод прост:
- Откройте Chrome и перейдите на страницу, где вы хотите просмотреть исходный код HTML.

- Щелкните правой кнопкой мыши страницу и выберите «Просмотреть исходный код страницы» или нажмите Ctrl + U на клавиатуре, чтобы открыть исходный код в новой вкладке.

Исходный код появится на новой вкладке, и вы сможете прокрутить его, чтобы просмотреть HTML-разметку для этой страницы.
Использование инструментов разработчика
Чтобы проверить исходный код веб-страницы с помощью инструментов разработчика в Google Chrome, выполните следующие действия.
- Откройте Google Chrome и перейдите на веб-страницу, которую хотите проверить.

- Нажмите Ctrl + Shift + I на клавиатуре. Панель инструментов разработчика откроется в доке рядом с просматриваемой веб-страницей.

- Нажмите на вкладку «Элементы» в верхней части панели. Это отобразит исходный код HTML для веб-страницы.

- Теперь вы можете просмотреть исходный код страницы. Чтобы свернуть элемент, щелкните треугольник рядом с именем его тега. Чтобы просмотреть дополнительную информацию о компоненте, щелкните его правой кнопкой мыши и выберите «Проверить».

Имейте в виду, что этот метод лучше всего подходит для HTML-страниц; можно просмотреть исходный код других типов веб-страниц, но форматирование может быть более сложным для чтения.
Как просмотреть HTML-код веб-страницы в Chrome на Mac
Если вы веб-разработчик, важно иметь возможность просматривать HTML-код веб-страницы. Это позволяет вам увидеть, как структурирована страница, и решить любые проблемы, которые могут возникнуть. К счастью, это легко сделать в Chrome на Mac. Просто выполните следующие действия:
- Откройте Chrome и перейдите на веб-страницу, на которой вы хотите просмотреть HTML-код.

- Щелкните правой кнопкой мыши страницу и выберите «Проверить».

- В нижней части экрана откроется новая панель с HTML-кодом.

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

- Чтобы закрыть панель, нажмите «X» в правом верхнем углу.

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

- Щелкните значок меню (три точки) в правом верхнем углу браузера и выберите «Дополнительные инструменты» и «Инструменты разработчика» в раскрывающемся меню.

- Панель инструментов разработчика откроется в нижней части экрана. Выберите «Элементы» в верхней части панели.

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

Всего за несколько кликов вы можете легко просмотреть HTML-код любой веб-страницы в Chrome на Mac. Это может быть полезно, когда вы пытаетесь устранить неполадки веб-разработки или хотите поближе взглянуть на то, как устроен конкретный веб-сайт.
Как просмотреть HTML-код веб-страницы в Chrome в приложении для iPhone
Если вы используете iPhone, вы можете просмотреть HTML-код любой страницы в Chrome двумя способами:
Настройка URL-адреса
Вы можете легко просмотреть HTML-код любой страницы, внеся небольшие изменения в URL-адрес:
- Откройте Chrome и перейдите на веб-страницу, HTML-код которой вы хотите просмотреть.

- Нажмите один раз в адресной строке, чтобы активировать режим редактирования.

- Переместите курсор в начало URL-адреса.

- Введите «Просмотр источника», а затем нажмите кнопку «Перейти». HTML-код веб-страницы будет отображаться в Chrome.

Использование инструментов разработчика
Инструменты разработчика Chrome также доступны на iOS, но для их запуска требуется другой набор шагов по сравнению с ПК.
- Нажмите на три точки в правом верхнем углу экрана и выберите «Настройки».
- Прокрутите вниз и нажмите «Дополнительно», затем включите переключатель рядом с «Инструменты разработчика».
- Нажмите и удерживайте пустую область страницы, затем выберите «Проверить элемент». Откроется боковая панель с HTML-кодом этой страницы.
Как просмотреть HTML-код веб-страницы в Chrome в приложении для Android
При использовании приложения Chrome на телефоне Android может потребоваться просмотреть HTML-код веб-страницы. Это может быть полезно, если вы пытаетесь устранить проблему со страницей или хотите посмотреть, как она структурирована. Чтобы просмотреть HTML-код веб-страницы в Chrome на телефоне Android, выполните следующие действия:
- Откройте Chrome на своем Android.

- Введите «view-source:», а затем URL-адрес страницы, на которой вы хотите просмотреть исходный код. Например, если вы хотите просмотреть исходный код для www.google.com, введите «view-source:www.google.com» в адресную строку Chrome.

Это откроет код HTML для этой страницы во встроенном интерфейсе инструментов разработчика Chrome. Оттуда вы можете просматривать и редактировать код по своему усмотрению. Имейте в виду, что этот метод будет работать только в том случае, если веб-сайт, который вы пытаетесь просмотреть, разрешает доступ к его исходному коду. Если это не так, вы не сможете увидеть ничего, кроме сообщения об ошибке.
Как просмотреть HTML-код веб-страницы в Chrome на iPad
Приложение Chrome для iPad упрощает просмотр HTML-кода любой веб-страницы. Просто выполните следующие действия:
- Откройте Chrome и введите «view-source:», а затем URL-адрес страницы, которую вы хотите просмотреть. Например, если вы хотите просмотреть исходный код для www.alphr.com, вам нужно ввести «view-source:www.alphr.com» в адресную строку Chrome.

- Нажмите кнопку «Перейти».

Это должно загрузить исходный код страницы на новой вкладке в Chrome. Оттуда вы можете сохранить или поделиться кодом по мере необходимости.
Исходный код — это клей, скрепляющий страницы
HTML — это основа любого веб-сайта. Он обеспечивает структуру и контент, которые посетители видят, когда загружают страницу в своем браузере.
В то время как окончательный вид страницы может определяться CSS или другими языками стилей, HTML-код определяет базовую структуру и содержимое страницы. Некоторые изменения потенциально могут сломать страницу. По этой причине важно хорошо разбираться в HTML при просмотре или внесении изменений в исходный код.
Кроме того, имейте в виду, что при просмотре HTML-кода в некоторых случаях может быть полезно, изменения, внесенные в код, не будут отражены на активной веб-странице. Посетителям будут видны только изменения, опубликованные администратором сайта.
Пробовали ли вы просматривать HTML-код любой веб-страницы любым из методов, обсуждаемых в этом руководстве? Как прошло?
Дайте нам знать в разделе комментариев.