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

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

Вводная информация

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

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

Пользователи Microsoft Edge

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

1. Нажмите Ctrl + U или F12 на клавиатуре вашего компьютера.
2. Выберите вкладку Элементы в верхней части правого окна.

Или

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

Или

1. Откройте Microsoft Edge и перейдите на веб-страницу по вашему выбору.
2. Нажмите Подробнее значок в правом верхнем углу экрана.
3. Выберите Developer Tools из выпадающего меню, которое появляется.
4. Выберите вкладку Элементы в верхней части правого окна.

Чаевые

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

Пользователи Microsoft Internet Explorer

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

1. Нажмите Ctrl + U или F12 на клавиатуре вашего компьютера.
2. Перейдите на вкладку «Отладчик» в верхней части нового меню.

Или

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

Или

1. Откройте Internet Explorer и перейдите на веб-страницу по вашему выбору.
2. Нажмите клавишу Alt, чтобы открыть строку меню браузера.
3. Выберите View, а затем Source в раскрывающемся меню.
4. Перейдите на вкладку «Отладчик» в верхней части нового меню.

Чаевые

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

Пользователи Mozilla Firefox и Netscape

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

1. Нажмите Ctrl + U на клавиатуре вашего компьютера.

Или

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

Или

1. Откройте Mozilla Firefox и перейдите на веб-страницу по вашему выбору.
2. Нажмите клавишу Alt, чтобы открыть строку меню браузера.
3. Выберите Инструменты, Веб-разработчик, а затем Источник страницы.

Чаевые

В последних версиях Firefox нажатие клавиши F12 или Ctrl + Shift + I вызывает интерактивный инструмент разработчика. Этот инструмент обеспечивает гораздо большее взаимодействие с исходным кодом и настройками CSS, позволяя пользователям видеть, как изменения в коде немедленно влияют на веб-страницу.

Просмотр раздела исходного кода страницы

1. Выделите часть веб-страницы, для которой вы хотите просмотреть исходный код.
2. Щелкните правой кнопкой мыши по выделенному разделу и выберите «Просмотреть источник выделения».

Чаевые

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

Пользователи Google Chrome

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

1. Нажмите Ctrl + U на клавиатуре вашего компьютера.

Или

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

Или

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

Чаевые

В последних версиях Chrome нажатие клавиши F12 или Ctrl + Shift + I также вызывает интерактивный инструмент разработчика. Этот инструмент обеспечивает гораздо большее взаимодействие с исходным кодом и настройками CSS, позволяя пользователям видеть, как изменения в коде немедленно влияют на веб-страницу.

Пользователи Apple Safari

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

1. Нажмите Ctrl + Option + U на клавиатуре.

Или

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

Или

1. Откройте браузер Safari и перейдите на веб-страницу по вашему выбору.
2. Выберите меню «Разработка».
3. Выберите опцию Показать источник страницы.

Пользователи Opera

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

1. Нажмите Ctrl + U на клавиатуре.

Или

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

Или

1. Откройте Opera и перейдите на веб-страницу по вашему выбору.
2. Нажмите кнопку меню в верхнем левом углу окна браузера.
3. В подменю Разработчик выберите Источник страницы.

Чаевые

Если вы не видите подменю «Разработчик», выберите «Другие инструменты» → «Показать меню разработчика». Затем нажмите кнопку меню опять таки. Теперь вы должны увидеть подменю Developer в списке.

Чаевые

В последних версиях Opera нажатие комбинации клавиш Ctrl + Shift + I вызывает интерактивный инструмент разработчика. Этот инструмент обеспечивает гораздо большее взаимодействие с исходным кодом и настройками CSS, позволяя пользователям видеть, как изменения в коде немедленно влияют на веб-страницу.

Android-телефон работает под управлением Chrome

1. Откройте интернет-браузер Google Chrome на своем телефоне.
2. Откройте веб-страницу, исходный код которой вы хотите просмотреть.
3. Нажмите один раз в адресной строке, а затем переместите курсор в начало URL-адреса.
4. Введите view-source: и нажмите Enter или Go.

Чаевые

Например, чтобы просмотреть код нашей домашней страницы, вы должны набрать view-source: https: //www.computerhope.com

Как закрыть исходную кодовую страницу или инструмент

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

• Если вы использовали метод Ctrl + U (кроме Edge) или метод правой кнопки мыши, закройте новую вкладку, которая открылась в верхней части окна браузера.
• Если вы использовали метод разработчика (нажав F12 или Ctrl + Shift + I), нажмите в правом верхнем углу окна инструментов.