Как посмотреть исходный код страницы в Google Chrome?

Автор: Юрий Белоусов · 19.11.2018

Разработчики браузеров позаботились об удобстве тех, кто создает сайты, открываемые в этих самых браузерах, а именно – о вебмастерах. Они добавили в стандартные функции инструменты разработчика, с помощью которых можно легко открыть и посмотреть исходный код страницы сайта в браузере: HTML, CSS, JavaScript (JS), получить различные полезные данные о структуре сайта, провести его технический анализ. В общем, увидеть много полезного.

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

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

Из этой стать вы узнаете, как в браузере посмотреть исходный код страницы сайта (как открыть HTML, CSS, JavaScript код сайта).

Как открыть исходный код страницы в браузере

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

1. С помощью горячих клавиш;
2. Открыть из контекстного меню.

Ctrl + U – комбинация горячих клавиш для просмотра исходного кода всей страницы сайта в отдельном новом окне. Стандартные для всех браузеров: Google Chrome, Opera, Mozilla Firefox, Яндекс браузера, IE.

Также в инструменты разработчика можно войти следующим образом:

1. Вызвать контекстное меню, кликнув правой кнопкой мыши в любой части страницы сайта, на которой нужно посмотреть HTML, CSS код;
2. Нажать в контекстном меню пункт «Просмотр кода страницы», как это показано на скриншоте ниже. (Скриншот сделан в Google Chrome. В некоторых других браузерах пункт меню будет немного отличаться. Например, в Opera будет «Исходный текст страницы»)

   

   Просмотр кода страницы сайта в браузере

3. Откроется новая страница, в которой можно посмотреть весь исходный код для инспектируемой страницы: HTML, CSS, JS. Код PHP отображаться не будет, ведь браузеры преобразовывают PHP в HTML, поэтому прочитать его не представляется возможным.

   

   Как открыть исходный код страницы сайта

Для того чтобы быстро найти нужный код, слово или текст на странице можно использовать стандартное для всех браузеров сочетание горячих клавиш поиска: Ctrl + G.

Видео-инструкция:

Просмотр кода элемента | исследовать элемент | проинспектировать элемент

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

Как просмотреть код элемента на странице:

1. Открыть нужную страницу сайта;
2. Вызвать контекстное меню правой кнопкой мыши;
3. Затем нажать пункт, соответствующий вашему браузеру. Google Chrome: «Просмотреть код» Opera: «Просмотреть код элемента» Яндекс браузер и Mozilla Firefox: «Исследовать элемент»

   Проинспектировать отдельный элемент

Кроме того, можно использовать комбинации клавиш на клавиатуре для быстрого доступа к инспектированию элемента.

Горячие клавиши (кнопки):

Google Chrome: Ctrl+Shift+I и Ctrl+Shift+C

Opera: Ctrl+Shift+I и Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I и Ctrl+Shift+C

Яндекс браузер: Ctrl+Shift+I и Ctrl+Shift+C

После проделанных действий, в этом же окне браузера откроется исходный код web страницы:

Посмотреть HTML CSS код сайта

Весь HTML код будет в левой большой колонке. А CSS стили – в правой.

Посмотреть css стили в браузере

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

В этой видео-инструкции подробно рассказано и показано, как работать с инструментами разработчика:

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

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

Как посмотреть исходный код на телефоне Android

Еще хотелось бы заметить, что инструменты разработчика доступны не только в десктопной версии браузеров, то есть, на компьютерах и ноутбуках. На телефонах и планшетах (Android, IOS) можно также посмотреть исходный код.

Для этого следует добавить к URL инспектируемой страницы приставку view-source:

Например:

view-source:https://urfix.ru/turbo-rezhim-opera/

Не нашли ответ? Тогда воспользуйтесь формой поиска:

  В браузере возможно просмотреть исходный код веб страницы. Это пригодиться и блогеру, чтобы, например, проверить наличие в блоге невидимых счетчиков, скриптов и другой информации. А также, используя, эту функцию, можно просматривать html-коды страниц с интересным оформлением и, таким образом, изучить еще более полно язык программирования, чтобы в дальнейшем применить на своём сайте. Конечно, просмотр html очень часто используется с целью кражи контекста. Хочу предостеречь вас от этого во избежание проблем,  которые могут возникнуть вследствие этих действий.

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

Google Chrome

1. Выберите строку Щелчок правой клавишей мыши –> Просмотр кода страницы, или Ctrl+U.
2. Меню (три точки вертикально в правом верхнем углу браузера) ->Дополнительные инструменты -> Инструменты разработчика.
3. Узнать html виджета: навести курсор на интересующую деталь -> клик правой кнопкой мыши -> Просмотреть код (или CTRL + SHIFT + I).

Mozilla Firefox

1. 
2. Вы можете также проверить html любого элемента на сайте. Ваши действия: наведите курсор на интересующий виджет — > кликните правой кнопкой мыши -> «проинспектировать элемент».
3. Через меню (три черты): Веб-разработка -> Исходный код страницы или Элементы разработчика.

Яндекс браузер

1. Правая клавиша мышки -> Просмотреть код страницы (CTRL + U).
2. Посмотреть значимую часть сайта: функция «Исследовать элемент» (CTRL + SHIF + I)
3. Через меню: нажмите на три черты в верхнем правом углу экрана монитора -> Дополнительно -> Дополнительные инструменты -> Посмотреть код страницы или инструменты разработчика.

Opera

1. Нажмите на правую кнопку мыши –> Исходный текст страницы или нажмите сочетания клавиш Ctrl+U (одновременно) 3. HTML интересующего элемента узнают при помощи команды «Просмотреть код элемента» или Одновременным нажатием CTRL + SHIFT + C.

Internet Explorer

1. Щелкните правой клавишей мыши –> Просмотр HTML кода (как вариант: CTRL + U).
2. Меню (иконка «Шестерёнка») -> Средства разработчика (F12)
3. Узнать html выбранного участка с помощью действия «Проверить элемент» (F12).

Safari

1. Воспользуйтесь горячими клавишами Cmd+option+U
2. Если просмотр вам не доступен, то в Настройках браузера в разделе «Дополнения» активируйте функцию «Показывать меню «Разработка» в строке меню».

Android

1. В Адресной строке пропишите перед доменом строчку view-source:Пример: view-source:mycrib.ru
2. Используйте приложения VT View Source с Play Market.

Это полезная функция для оптимизации сайта на телефоне. Вариант просмотра кода в мобильной версии можно узнать в Гугл Хроме. Для этого нажмите CTRL + SHIFT + I, а затем выберите иконку мобильного телефона в верхней части тулбара или воспользуйтесь горячими клавишами CTRL + SHIFT + M. Далее можете выбрать отображение страницы для некоторых моделей мобильных телефонов и в различных разрешениях.

Узнайте также, как распечатать страницу из интернета

Главная » Уроки и статьи » Интернет

Используемые источники:

• https://urfix.ru/posmotret-ishodnyy-kod-stranitsy/
• https://mycrib.ru/2018/11/html_29.html
• https://linchakin.com/posts/post/89/