Обсудим ваш проект?
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

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

Дарья Иванова,
редактор
Наталья Штанюк,
руководитель отдела SEO-продвижения
Поделиться
Просмотров:
7660
Время на прочтение:
Статья обновлена:
9 октября 2020
Информация о статье
Просмотров: 7660
Время на прочтение:
Статья обновлена: 09.10.2020
Дарья Иванова, редактор
Наталья Штанюк, руководитель отдела SEO-продвижения
Поделиться

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

Директ Лайн
Кто мы
Крупнейшее агентство
интернет-маркетинга за МКАДом:
1200+ проектов
70 специалистов
15 лет на рынке
ТОП-10
лучших компаний интернет-продвижения России 2020
Коммерческое предложение

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

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

Google Chrome

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

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

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

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

Для удобства поиска определенных значений нажмите клавиши 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" выбираем месторасположение панели либо открываем ее в отдельном окне.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии
ДОБАВИТЬ КОММЕНТАРИЙ
Увеличим ваши продажи через интернет!
Разрабатываем и поддерживаем сайты. Приводим на сайт целевой трафик с помощью SEO и рекламы. Увеличиваем конверсию сайтов. Имеем успешные кейсы увеличения продаж интернет-магазинов, медицинских центров, производителей, застройщиков, автоцентров, интернет-сервисов и пр. В команде 33 специалиста.

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»

19 место
В топ-100 perfomance-агентств России

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

1 место
Рейтинг агентств контекстной рекламы Новосибирска

Золотая сотня
Российского Digital

Сертифицированное агентство Яндекс 2020

Работающие инструменты SEO, интернет–рекламы, UX от
60 профессионалов
Директ Лайн — агентство интернет–маркетинга с 15-летним опытом, 1200+ клиентами и 50+ специалистами. Мы сами ведем этот блог. Раз в месяц пришлём самые интересные и полезные материалы.
  • #SEO
  • #интернет-реклама
  • #email-рассылки
  • #юзабилити сайта
  • #веб–разработка на bitrix
  • #кейсы
60 профессионалов
Раз в месяц
Без спама и СМС