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

Исходный код страницы — это собрание HTML-разметки, CSS видов и скриптов JavaScript. Можно провести аналогию с заданиями, которые даёт учитель школьникам. Ученики должны выполнить ряд заданий (функций), чтобы достигнуть результата. В нашем случае, учитель – это браузер, а выполняемые задания – обсуждаемый код.

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

Что такое код страницы

Стандартные составляющие исходного кода страницы:

  • HTML-разлиновка;
  • Стилевая комбинация или же ссылка на CSS;
  • Файлы/ссылки/программы, созданные с помощью JavaSkript.

Каждое из них «обследуется» браузером для получения необходимых данных. Благодаря набору информации мы получаем весь контент, находящийся на странице. В коде всё содержится в немного иной вариации, изображений там нет. Есть скрипт, ссылки, знаки и другие элементы кода.

Отображение исходного кода в Хроме
Пример отображения исходного кода страницы в браузере Гугл Хром

Простыми словами, вся информация с сайта собрана в небольшой структурированный текст, в котором все данные указаны особым языком.

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

Для чего нужно просматривать код

Проанализировав или же просмотрев код, зная, что к чему и какие данные за что отвечают, можно выполнить работу браузера. То есть, мы можем решить какие-либо проблемы, связанные с перенаправлением на сайт. Это главная задача клиента, с которой он может справится изучив код, но легко возможно получить и прочие параметры.

Изучив код можно:

  • Просмотреть теги для анализирования определённого сайта;
  • Узнать, есть ли на странице тот или иной элемент. Например, легко проверить наличие некоторых скриптов, счётчиков, определённых кодов и множество других частей;
  • Определить параметры частей. Например, их шрифт или цвет;
  • Пробраться к вложениям и прочим элементам, содержащимся на странице;
  • Просмотреть все ссылки, которые содержатся на сайте;
  • Обозначить неполадки с кодом, которые мешают перейти на сайт или выполнить определённые действия, находясь на нём.

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

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

Порядок действий

Чтобы посмотреть код страницы в Гугл Хром:

  • Переходим на интересующую нас страницу и кликаем в любом ее месте правой кнопкой мышки, чтобы открыть контекстное меню.
  • В перечне находим «Просмотр кода страницы» и щелкаем на него.
Исходный код в Гугл Хром
Функция просмотра исходного кода страницы в Гугл Хроме

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

Ознакомимся с этими способами подробнее.

С помощью горячих клавиш

Простой и быстрый вариант, достаточно одновременно нажать две кнопки на панели клавиатуры.

Чтобы открыть код нажимаем Ctrl + U. В новом окошке открывается абсолютно весь код страницы.

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

С помощью инструментов разработчика

Чтобы открыть исходный код страницы через инструменты разработчика:

  • В правом верхнем углу браузера, нажимаем на три точки.
  • В открывшемся меню выбираем «Дополнительные инструменты» – «Инструменты разработчика».
  • В открывшемся окне инструментов выбираем вкладку Elements.
Инструменты разработчика в Хроме
Инструменты разработчика в Гугл Хром

Быстрая комбинация для доступа к инструментам разработчика Ctrl + Shift + I

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

Например, в социальных сетях можно поменять цвет аватара из синего в оранжевый. Сменить количество друзей, подписчиков, лайков, но всё это будет недействительно на сайте, лишь на Вашем устройстве.

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

Так каким же образом можно поменять код?

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

Как показать код страницы в Гугл Хром разобрались, но каким образом его изменить?

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

Следуем нижеуказанному плану:

  • Открываем необходимую страницу.
  • Нажимаем клавишу «F12» (она находится на верхней панели клавиатуры).
  • Откроется код, который можно переделать.
  • В нижней части веб-страницы мы просматриваем полученные данные, ищем то, что нужно поменять. Это может быть конкретный кусок или большая часть имеющихся данных.
  • Нажимаем на требуемую часть просматриваемого кода правой кнопкой мыши и в появившемся перечне возможных команд выбираем «Edit As HTML».
  • Необходимый кусочек кода будет открыт в новой вкладке, там можно отредактировать информацию.
  • После проделанной работы нужно сохранить изменённые данные. Чтобы это сделать снова обращаемся к кнопке «F12» и закрываем итоговое окно.

Наблюдаем за изменениями! Страница изменена путём смены информации в коде, причём без имения определённых знаний из области программирования. Если по какой-либо причине контент не поменялся, обновите веб-платформу.

Надеемся, данная статья была для вас полезна, и вы узнали, что такое код веб-страницы, для чего он создаётся и что в себе содержит, как и для чего его нужно менять.

Mike Lombardi/ автор статьи

QA инженер, руководитель отдела автоматизированного тестирования программного обеспечения. Владение Java, C/C++, JSP, HTML, XML, JavaScript, SQL и Oracle PL/SQL. Журналист и обозреватель сферы IT. Создатель и администратор сайта.

OldVersions.INFO