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

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


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

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

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

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

Google Chrome

Открыть исходный код страницы в Google Chrome можно с помощью дополнительного меню, которое вызывается нажатием правой кнопки мыши – «Просмотр кода страницы».

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

Здесь же мы видим, что просмотр доступен по сочетанию горячих клавиш «CTRL+U». В случае с MacOs: «COMMAND + OPTION + 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:».

Просмотр исходного кода страницы сайта с телефона
Просмотр исходного кода страницы сайта с телефона

Чтобы получить расширенные возможности работы с исходным кодом на Андроиде, необходимо установить приложение 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