Обсудим ваш проект?
Комплексный интернет-маркетинг
15 лет опыта | 90+ специалистов
Отправить заявку

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

Обновлено: 09 октября 2020
Время на прочтение:
Просмотров: 79886
Дарья Иванова
редактор
Наталья Штанюк
технический директор
Редполитика
Мы прилагаем все усилия, чтобы наши обзоры были максимально честными, точными и объективными. Если вы посещаете ссылки в нашем контенте, мы можем получить комиссионное вознаграждение от ваших покупок, однако это не влияет на нашу редакционную политику и мы не станем рекомендовать продукты или сервисы, в которых не уверены.

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

Как открыть исходный код страницы на компьютере

Любой современный браузер «из коробки» обладает функционалом, необходимым для просмотра исходного кода страницы.

Google Chrome

Чтобы открыть исходный код страницы в Google Chrome, нужно нажатием правой кнопки мыши вызвать контекстное меню и в нем кликнуть на «Просмотр кода страницы».

Открываем исходный код страницы в Google Chrome
Открываем исходный код страницы в Google Chrome

Также просмотреть код можно с помощью сочетания клавиш Ctrl + U. Что касается операционной системы MacOS, здесь работает сочетание клавиш

Option + Command + U. В обоих случаях код открывается в отдельной вкладке.

Нет времени разбираться?
Комплексное продвижение в онлайне
Разрабатываем стратегии продвижения бизнеса в онлайне с пошаговым планом действий, и обеспечиваем его реализацию. Проектируем, реализуем, поддерживаем и развиваем сайты, приводим на сайт целевой трафик (реклама, SEO, email-рассылки), расширяем присутствие компании на сторонних площадках, настраиваем аналитику и проводим постклик анализ.
Ваш сайт:

Пример исходного кода
Пример исходного кода

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

Microsoft Edge, Opera и Mozilla Firefox

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

Кроме того, здесь работает та же комбинация клавиш Ctrl + U.

Открываем исходный код в Microsoft Edge
Открываем исходный код в Microsoft Edge

Открываем исходный код в Opera
Открываем исходный код в Opera

Открываем исходный код в Mozilla Firefox
Открываем исходный код в Mozilla Firefox

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

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

Опытные разработчики пользуются специальным инструментом, который доступен во всех перечисленных браузерах. Рассмотрим принцип его работы в Google Chrome.

Чтобы открыть консоль, зажимаем клавиши Ctrl + Shift + I или вызываем контекстное меню и кликаем «Просмотреть код».

Открываем код элемента в Google Chrome
Открываем код элемента в Google Chrome

Панель с кодом в Google Chrome
Панель с кодом в Google Chrome

Как видим, панель открылась справа от страницы. Ее положение можно менять в зависимости от размеров монитора или личных предпочтений. Для этого открываем меню и в разделе «Dock side» выбираем месторасположение панели либо открываем ее в отдельном окне.

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Ваш сайт:

Настраиваем расположение панели в "Dock side"
Настраиваем расположение панели в «Dock side»

Во вкладке «Elements» в основной части консоли открывается код страницы, который ранее мы открывали в отдельной вкладке. Здесь он представлен в более удобном виде: каждый элемент (например,  <div>) можно раскрыть, чтобы посмотреть иерархию. Справа (если панель расположена в нижней части экрана) отображается CSS-код выбранного элемента. К слову, эти параметры можно править. Для этого необходимо выделить их двойным щелчком мыши. Имейте в виду, что это действие повлияет на отображение элементов на странице (до момента перезагрузки). Аналогичным образом правятся значения в коде странице в левом окне.

Код страницы
Код страницы

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

Код отдельного элемента
Код отдельного элемента

Нужный фрагмент кода
Нужный фрагмент кода

Таким образом выводится нужный фрагмент кода, который отвечает за отображение элемента. В окне справа располагается относящийся к нему CSS-код.

Так можно получить код абсолютно любого элемента на странице, чтобы скопировать или исправить (удобно при тонкой настройке CSS-стилей) его.

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

Мобильные версии браузеров имеют достаточно ограниченный функционал. Например, в них нет таких инспекторов кода, как в десктопных версиях. Однако посмотреть код все-таки можно. Для этого необходимо добавить в начало URL параметр «view-source:».

Отображение исходного кода страницы сайта на смартфоне
Отображение исходного кода страницы сайта на смартфоне

Для получения расширенных возможностей в работе с исходным кодом на Android установите приложение VT View Source. При запуске потребуется ввести URL изучаемой страницы.

Приложение доступно только на английском языке. Что касается функционала, он достаточно широк:

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

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

Методология выбора
Кто мы
Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200 +
проектов
90
экспертов
16лет
на рынке
Наша методология
Статьи в блоге Директ Лайн - это всегда оригинальный, проверенный и объективный контент. Все обзоры и рейтинги честно отражают наше мнение и опыт взаимодействия с каждым инструментом.
Содержание
Комментарии

Комплекс услуг для вашего бизнеса

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

Кейсы и статьи

Бесплатный аудит SEO
и рекламного трафика
Покажем точки роста вашего проекта,
если по нему уже ведутся работы