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

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

• Android
• iPhone
• Chromebook
• Mac
• Windows
• Устройство отсутствует?

Вам интересно, из чего состоит веб-страница? Хотите знать, как изменить размер или цвет шрифта на вашем сайте? Просматривая 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 применяются к элементу, выбрав его и нажав кнопку “Стили” на открывшейся панели.


4. Чтобы закрыть панель, нажмите на значок “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. Введите “View-source” а затем нажмите “Go” кнопка. HTML-код веб-страницы будет отображаться в Chrome.
   

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

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

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

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

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

1. Откройте Chrome на Android.
   
2. Введите “просмотр-источник:” за которым следует 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. Нажмите кнопку “Go”
   

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

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

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

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

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

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

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