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

Содержание

горячие клавиши и инструкция — Топвизор

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

Как посмотреть код сайта с компьютера

Google Chrome

Яндекс.Браузер

Apple Safari

Microsoft Edge

Mozilla Firefox

Opera

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

Android

iOS

Как найти любой элемент в коде

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

В нём можно посмотреть некоторую полезную информацию для SEO. Например, как прописаны теги и метатеги, вроде title, description и Last-Modified, установлены ли счётчики аналитики и многое другое. Посмотреть код можно и с компьютера, и с телефона.

Покажем, как вызвать код страницы и как найти любой элемент в коде.

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

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

HTML-код сайта выглядит так:

Пример кода страницы сайта

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

Как посмотреть код сайта с компьютера

Покажем на примере самых популярных браузеров: Google Chrome, Яндекс.Браузер, Apple Safari, Microsoft Edge, Mozilla Firefox, Opera. Но принцип одинаковый во всех браузерах.

Google Chrome

Чтобы открыть код страницы в браузере, достаточно нажать комбинацию клавиш:

на Windows — Ctrl + U;
на Mac — Cmd (⌘) + Option (⌥) + U.

Если не любите горячие клавиши, то можно кликнуть правой кнопкой мыши на странице и в открывшемся меню выбрать пункт «Просмотр кода страницы»:

Просмотр кода страницы в Google Chrome

Откроется новая вкладка с кодом.

Можно и по-другому — через меню браузера. Для этого нужно кликнуть на три вертикальные точки в правом верхнем углу окна и перейти в «Дополнительные инструменты» → «Инструменты разработчика

».

Как открыть «Инструменты разработчика» в Google Chrome

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

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

Более быстрые способы сделать то же самое:

с помощью горячих клавиш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac;
правой кнопки мыши, кликнув «Просмотреть код».

Яндекс.Браузер

Первый способ посмотреть код страницы в Яндекс.Браузере — с помощью правой кнопки мыши. В меню нужно выбрать пункт «Посмотреть код страницы».

Просмотр кода в Яндекс.Браузере

Второй — через меню браузера. Для этого необходимо кликнуть на три горизонтальные полоски в верхнем правом углу, затем «Дополнительно» → «Дополнительные инструменты» → «Посмотреть код страницы».

Просмотр кода через меню Яндекс.Браузера

В обоих случаях код откроется в отдельной вкладке. Также код можно посмотреть с помощью горячих клавиш Ctrl + U.

Чтобы открыть код в той же вкладке, что и просматриваемая страница, вместо «Посмотреть код страницы» нужно выбрать пункт «Инструменты разработчика» или нажать Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac, как и в Chrome.

Apple Safari

Для просмотра кода в Safari необходимо сначала войти в «Настройки» браузера, кликнув по надписи Safari в верхнем левом углу экрана.

Где находятся настройки браузера в Safari

Затем в открывшемся окне выбрать раздел «Дополнительно» и поставить галочку напротив «Показывать меню «Разработка» в строке меню» в нижней части окна:

Включение меню разработчика в Safari

После этого в верхнем меню окна появится вкладка «Разработка», в которой для просмотра кода страницы необходимо кликнуть на пункт «Показать программный код страницы»:

Как открыть код страницы в браузере Safari

Код откроется в нижней части страницы:

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

Microsoft Edge

Просмотреть код в Microsoft Edge можно с помощью правой кнопки мыши → команда «Просмотреть исходный код»:

Просмотр кода страницы в Microsoft Edge

Код откроется в новой вкладке. Можно и с помощью горячих клавиш Ctrl + U.

Также его можно посмотреть через меню браузера. Для этого нужно в правом верхнем углу кликнуть на три горизонтальные точки и выбрать команду «Другие инструменты» → «Средства разработчика»:

Инструменты разработчика в Microsoft Edge

Панель откроется снизу или справа на просматриваемой странице. Чтобы увидеть код, нужно выбрать вкладку «Элементы»:

Исследование кода отдельных элементов в Microsoft Edge

Горячие клавиши здесь тоже работают: Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

Mozilla Firefox

Код открывается в отдельной вкладке с помощью правой кнопкой мыши по команде «Исходный код страницы»:

Просмотр кода в Mozilla Firefox

Также открыть исходный код в отдельной вкладке можно через меню браузера. Для этого в правом верхнем углу кликните на три горизонтальные черты и в открывшемся меню выберите команду «Другие инструменты» → «Исходный код страницы»:

Исходный код в меню Mozilla Firefox

А можно и просто нажать горячие клавиши Ctrl + U — это работает во всех браузерах.

Инструменты разработчика здесь тоже можно открыть горячими клавишами Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac или кликнув правой кнопкой мыши и выбрав пункт «Исследовать»:

Как открыть инструменты разработчика в Mozilla Firefox

Панель откроется снизу или справа на странице.

Opera

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

Чтобы открыть код, кликните правой кнопкой мыши в любой части страницы и выберите команду «Исходный текст страницы»:

Просмотр кода страницы в браузере Opera

То же самое можно сделать сочетанием клавиш Ctrl + U.

Чтобы открыть инструменты разработчика, в этом же меню можно выбрать «Проверить код элемента» или нажать комбинацию горячих клавиш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

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

Способы отличаются в зависимости от операционной системы телефона.

Android

Открыть код элемента на телефоне можно с помощью команды view-source

, которую необходимо добавить перед URL в адресную строку:

view-source:https://site.ru/page-1

Во вкладке откроется исходный код страницы:

Просмотр кода страницы с мобильного на Android

Открыть инструменты разработчика подобным способом не получится. Если это необходимо, установите специальные приложения. Например, VT View Source.

iOS

На iPhone ни в Safari, ни в Google Chrome по команде «view-source:» код не откроется. Необходимо установить специальные приложения для просмотра кода. Например, HTML Viewer Q или iSource Browser.

iSource Browser — полноценный браузер для iOS, с помощью которого можно просматривать HTML-код страниц:

Посмотреть код элемента страницы в айфоне

Как найти любой элемент в коде

Чтобы найти что угодно в открытом исходном коде, откройте поиск по странице. Обычно это можно сделать сочетанием клавиш Ctrl + F или через меню браузера и команду «Найти…» или «Найти на странице…»:

Поиск элементов в коде страницы

В открывшемся окошке введите начало фразы или тег, который хотите найти.

Например, viewport:

Как выглядят найденные элементы

Найденный элемент браузер выделит цветом.

Продолжение: На какие элементы в исходном коде обращать внимание SEO-специлисту

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

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

Что такое исходный код страницы и кому он нужен

Исходный код страницы — это вид страницы на языке кода. Он выглядит как список пронумерованных строк, где каждая содержит информацию о конкретном объекте на сайте. Код страницы состоит из трех элементов:

HTML — гипертекстовая разметка, которая отвечает за всю структуру страницы. С помощью нее делают текст, блоки, основные элементы сайта.
CSS — работает в связке с HTML через теги и отвечает за визуализацию: размер, стиль, шрифты, форму, фон.
JavaScript — логический язык программирования, который отвечает за более сложные элементы.
Например, анимацию, аналитику или интерактив.

Как выглядит исходный код страницы сайта

Исходный код позволяет посмотреть, как написана страница сайта в интернете и какие элементы в ней «спрятаны» за внешней оболочкой. Чаще всего исходный код смотрят SEO-специалисты, чтобы узнать:

Как собран текст страницы и какие ссылки используются.
Какие метатеги и ключевые слова использованы.
Какое описание (description) и название (title) страницы.
Подключены ли страницы к «Яндекс.Метрике», Google Analytics, скрипты, счетчики, плагины, пиксели.

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

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

Читайте также: 76 ссылок, которые помогут сделать концепцию дизайна эффективнее и быстрее

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