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

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

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

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

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

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

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

Или же

Или же

  1. Откройте Microsoft Edge и перейдите на веб-страницу по вашему выбору.
  2. Нажмите Подробнее

    значок в правом верхнем углу экрана.
  3. Выберите Developer Tools из выпадающего меню, которое появляется.
  4. Выберите вкладку Элементы в верхней части правого окна.

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

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

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

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

Или же

Или же

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

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

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

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

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

Или же

Или же

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

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

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

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

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

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

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

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

Или же

Или же

  1. Откройте Chrome и перейдите на веб-страницу по вашему выбору.
  2. Нажмите на Настроить и контролировать Google Chrome

    значок в правом верхнем углу окна браузера.
  3. В раскрывающемся меню выберите Дополнительные инструменты, а затем Инструменты разработчика .
  4. Перейдите на вкладку « Элементы » в верхней части нового раздела.

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

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

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

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

Или же

Или же

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

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

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

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

Или же

Или же

  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: //www.computerhope.com

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

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

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

    в правом верхнем углу окна инструментов .