Что такое просмотр исходного кода страницы?

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

Определение исходного кода страницы просмотра в Chrome

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

Просмотр исходного кода позволяет вам увидеть каждый компонент веб-страницы (HTML), как он обрабатывается (CSS) и кодовые взаимодействия, которые объединяют все это вместе (JavaScript). Этот подробный просмотр бесценен для устранения неполадок. Есть ли проблема с макетом? Проверка исходного кода страницы может выявить отсутствующий тег. Кнопка не отвечает? Раздел JavaScript может содержать ответ.

Вы не можете изменять код, тестировать его или предварительно просматривать любые изменения, как при использовании опции Inspect (DevTools). Однако она предлагает быстрый просмотр, чтобы определить все, что вам нужно, будь то для образовательных, отладочных или исследовательских целей.

Как получить доступ к исходному коду веб-страницы в Chrome

Есть два метода доступа к исходному коду веб-страницы в браузерах Chrome и Chromium. Кроме того, только один метод работает для страниц, защищенных правым щелчком. Давайте начнем.

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

Этот вариант является самым простым способом просмотра исходного кода веб-страницы и подходит для любой онлайн-страницы.

1. Откройте браузер Google Chrome или Chromium, например Edge или Brave.
2. Откройте интересующий вас веб-сайт или веб-страницу.
3. Щелкните правой кнопкой мыши по открытой области, выберите «Просмотреть исходный код страницы» или нажмите Ctrl + U (Windows) или Command + U (Mac).
   
4. Исходный код будет отображен в новой вкладке, напоминающей макет текстового редактора.

Использование опции URL «просмотр источника»

1. Запустите Google Chrome или браузер Chromium, например Edge или Brave.
2. Откройте интересующий вас веб-сайт или веб-страницу.
3. В адресной строке введите view-source:(URL-адрес веб-страницы), например:
   посмотреть источник:
   
4. Исходный код будет отображен в новой вкладке, напоминающей макет текстового редактора.

Более подробную информацию о доступе к этой функции на других устройствах см. в статье «Как просмотреть HTML-код в Chrome».

Не копируйте и не используйте исходный контент страницы напрямую

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

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

Часто задаваемые вопросы

В: Безопасно ли изменять код HTML, CSS и Java в опции «Проверка»?

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

В: Не является ли опция «Просмотр исходного кода» пустой тратой времени?

A: Нет, просмотр исходного кода позволяет разработчикам просматривать существующие инструкции HTML, CSS и Java, чтобы находить простые проблемы или плохое кодирование, а не копаться в инструменте разработки. Это быстрый просмотр, как и функция быстрого предварительного просмотра для файлов ПК, когда она не открывает другие программы. Кроме того, люди могут копировать фрагменты кода и вставлять их в инструмент разработки веб-сайта.