Как просмотреть HTML-код в Chrome

Ссылки на устройства

• Андроид
• айфон
• Хромбук
• Мак
• Окна
• Отсутствует устройство?

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

В этом руководстве мы покажем вам, как просмотреть HTML-код веб-страницы в Chrome.

Просмотр HTML-кода в Chrome

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

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

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

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

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

Как просмотреть HTML-код веб-страницы в Chrome на ПК с Windows

Операционная система Windows является одной из наиболее совместимых систем Chrome. Chrome построен на основе проекта Chromium с открытым исходным кодом, основным участником которого является Microsoft. Эта совместимость распространяется на область HTML, где популярный браузер позволяет пользователям просматривать HTML-код любого веб-сайта.

Вы можете просмотреть HTML-код двумя способами.

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

Этот метод прост:

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

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

Использование инструментов разработчика

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

1. Откройте Google Chrome и перейдите на веб-страницу, которую хотите проверить.
   
2. Нажмите Ctrl + Shift + I на клавиатуре. Панель инструментов разработчика откроется в доке рядом с просматриваемой веб-страницей.
   
3. Нажмите на вкладку «Элементы» в верхней части панели. Это отобразит исходный код HTML для веб-страницы.
   
4. Теперь вы можете просмотреть исходный код страницы. Чтобы свернуть элемент, щелкните треугольник рядом с именем его тега. Чтобы просмотреть дополнительную информацию о компоненте, щелкните его правой кнопкой мыши и выберите «Проверить».
   

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

Как просмотреть HTML-код веб-страницы в Chrome на Mac

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

1. Откройте Chrome и перейдите на веб-страницу, на которой вы хотите просмотреть HTML-код.
   
2. Щелкните правой кнопкой мыши страницу и выберите «Проверить».
   
3. В нижней части экрана откроется новая панель с HTML-кодом.
   
4. Вы также можете щелкнуть определенные элементы в HTML-коде, чтобы увидеть, как они оформлены на странице. Например, вы можете увидеть, какие стили CSS применяются к элементу, выбрав его, а затем щелкнув вкладку «Стили» на открывшейся панели.
   
5. Чтобы закрыть панель, нажмите «X» в правом верхнем углу.
   

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

1. Откройте Google Chrome и перейдите на веб-страницу, которую вы хотите проверить.
   
2. Щелкните значок меню (три точки) в правом верхнем углу браузера и выберите «Дополнительные инструменты» и «Инструменты разработчика» в раскрывающемся меню.
   
3. Панель инструментов разработчика откроется в нижней части экрана. Выберите «Элементы» в верхней части панели.
   
4. Теперь вы увидите HTML-код текущей страницы, отображаемый на панели «Элементы». Вы можете использовать различные параметры на панели для проверки и отладки кода по мере необходимости.
   

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

Как просмотреть HTML-код веб-страницы в Chrome в приложении для iPhone

Если вы используете iPhone, вы можете просмотреть HTML-код любой страницы в Chrome двумя способами:

Настройка URL-адреса

Вы можете легко просмотреть HTML-код любой страницы, внеся небольшие изменения в URL-адрес:

1. Откройте Chrome и перейдите на веб-страницу, HTML-код которой вы хотите просмотреть.
   
2. Нажмите один раз в адресной строке, чтобы активировать режим редактирования.
   
3. Переместите курсор в начало URL-адреса.
   
4. Введите «Просмотр источника», а затем нажмите кнопку «Перейти». HTML-код веб-страницы будет отображаться в Chrome.
   

Использование инструментов разработчика

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

1. Нажмите на три точки в правом верхнем углу экрана и выберите «Настройки».
2. Прокрутите вниз и нажмите «Дополнительно», затем включите переключатель рядом с «Инструменты разработчика».
3. Нажмите и удерживайте пустую область страницы, затем выберите «Проверить элемент». Откроется боковая панель с HTML-кодом этой страницы.

Как просмотреть HTML-код веб-страницы в Chrome в приложении для Android

При использовании приложения Chrome на телефоне Android может потребоваться просмотреть HTML-код веб-страницы. Это может быть полезно, если вы пытаетесь устранить проблему со страницей или хотите посмотреть, как она структурирована. Чтобы просмотреть HTML-код веб-страницы в Chrome на телефоне Android, выполните следующие действия:

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

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

Как просмотреть HTML-код веб-страницы в Chrome на iPad

Приложение Chrome для iPad упрощает просмотр HTML-кода любой веб-страницы. Просто выполните следующие действия:

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

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

Исходный код — это клей, скрепляющий страницы

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

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

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

Пробовали ли вы просматривать HTML-код любой веб-страницы любым из методов, обсуждаемых в этом руководстве? Как прошло?

Дайте нам знать в разделе комментариев.