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

gchrome Google Chrome

Необходимость посмотреть код страницы в Гугл Хром появляется не только у технических специалистов, но и у рядовых пользователей интернета. Он позволяет увидеть прямые ссылки на файлы на странице, например, загружать защищённый от копирования контент, используемые для оформления стили, внедрённые скрипты и многое другое. Рассмотрим способы увидеть исходники страницы на компьютере и телефоне.

Способы открыть и посмотреть код страницы в браузере Chrome

В Хроме, как и в других веб-обозревателях, полно методов решения проблемы.

Комбинация клавиш

Самый простой и шустрый способ вывести на дисплей исходный код страницы – горячие клавиши Ctrl + U. Информация откроется в новой вкладке.

Исходный код Google Chrome

Комбинация применима к любому интернет-обозревателю для платформы Windows.

Контекстное меню

Через правый клик по пустому месту вызовите команду Просмотр кода….

Правый клик Google Chrome

Открыть код страницы в Google Chrome можно, добавив специальную приставку перед адресом. Допишите view-source: (обязательно с двоеточием без пробелов) перед http:// либо https://, например, view-source:https://social-i.ru.

Пример с адресом Google Chrome

В старых версиях обозревателя в пункте главного меню Дополнительные инструменты присутствовала команда вывода исходников страницы на дисплей.

Просмотр кода элемента

Иногда требуется увидеть ссылку, вложения либо стили определённого элемента страницы. Щёлкните правой клавишей, выберите Просмотреть исходный….

Код элемента Google Chrome

Увидите массу сведений об элементе.

Код картинки Google Chrome

  1. Ссылка на картинку.
  2. Применяемые каскадные таблицы стилей.
  3. Свойства элемента.

Как скачивать защищённый контент из сайтов

Исходный код браузера Google Chrome позволяет «воровать» защищённый от копирования контент из сайтов, например, где не работает функция Ctrl + C, отключено контекстное меню (вызывается правой клавишей мыши).

  1. Зажмите горячие клавиши Ctrl + Shift + I либоF12.

Выбор элемента Google Chrome

  1. Нажмите Ctrl + Shift + С или кликните по иконке для выбора интересующего элемента.
  2. Щёлкните по объекту для просмотра его кода.

Здесь масса сведений о компоненте (картинка, видео) либо контейнере, в который помещён контент, в том числе применённые стили, прямая ссылка.

Ссылка на контент Google Chrome

Как вариант, сделайте скриншот текста и распознайте его, например, через утилиту, ABBYY Screenshot Reader.

На мобильных устройствах

На смартфонах и планшетах на платформах iOS, Android и иных добавьте view-source: перед адресом сайта.

Телефон Google Chrome

Как отредактировать

Также доступна функция редактирования содержимого страницы – сможете сохранить себе отредактированный вариант даже защищённой от копирования странички.

  1. Нажмите F12 для вызова инструментов разработчика.
  2. Укажите элемент с помощью Ctrl + Shift + С либо показанной иконки.

Выбор объекта Google Chrome

  1. В окне с HTML щёлкните правой клавишей, выберите Edit as HTML.

Редактирование объекта Google Chrome

  1. Внесите изменения, например, правки в текст, удалите ненужные блоки и т. д.

Из прочих функций доступны: копирование кода компонента, применённые стили, внедрённые скрипты.

Изменение текста Google Chrome

Доступно изменение структуры страницы: добавление и удаление элементов, их скрытие.

  1. Нажмите F12 либо закройте окно кнопкой Close.

Закрытие окна Google Chrome

Зажмите Ctrl + S либо вызовите команду сохранения через пункт главного меню Дополнительные инструменты.

Сохранение Google Chrome

  1. Укажите путь хранения, название файла и жмите Сохранить.

Название Google Chrome

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

Команда проекта

Мы команда профессиональных специалистов. Если у вас есть вопросы или замечания к инструкции, напишите нам.

Оцените автора
Social-i