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

Обновлено: 02.07.2024

В окне Firefox Информация о странице приведена информация о странице, на которой вы находитесь, а также в нём можно изменять разрешения для этого веб-сайта. Чтобы открыть окно Информация о странице, используйте один из следующих методов:

Если Панель меню включена, На панели меню щёлкните Инструменты и выберите в выпадающем меню Информация о странице .

Щёлкните правой кнопкой мыши Удерживая клавишу Control , щёлкните мышью в пустой области веб-страницы и выберите Информация о странице из контекстного меню.

Используйте сочетание клавиш Ctrl + I command + I .

Вы также можете открыть окно Информация о странице, выполнив следующие шаги:

Открывшееся окно Информация о странице выполнено в виде набора панелей. Каждая панель описана ниже.

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

Адрес: URL указанного элемента.
Тип: Тип файла указанного элемента.
Размер: Размер в килобайтах (и байтах) указанного элемента.
Размеры: Размер элемента на экране в пикселях.
Связанный текст: Для изображений это "альтернативный" текст, который отображается, если изображение не загружено.

Вы можете сохранить на свой жесткий диск любой элемент, щёлкнув по кнопке Сохранить как… .

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

Доступ к устройствам виртуальной реальности

Знать ваше местоположение

Определяет, разрешено ли Firefox сообщать указанному домену, где вы находитесь, используя функцию Геолокации.

Автоматическое воспроизведение

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

Установка расширений

Определяет, может ли указанный домен запускать диалоговое окно установки расширения или темы. Разрешения на установку для веб-сайтов могут быть добавлены или удалены на панели Приватность и Защита Настроек Firefox Настроек Firefox , ниже раздела Разрешения.

Открывать всплывающие окна

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

Переопределить сочетания клавиш

Отправлять уведомления

Определяет, разрешено ли указанному домену отправлять Push-уведомления.

Устанавливать куки

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

Делиться экраном

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

Хранить данные в постоянном хранилище

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

Перейти на эту вкладку

Определяет, разрешено ли указанному домену изменять фокус на его собственную вкладку. Вы можете установить этот параметр как Всегда спрашивать или Разрешить.

Использовать камеру

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

Использовать микрофон

Определяет, разрешено ли указанному домену использовать ваш микрофон. Это применимо к сайтам, у которых есть возможность записывать аудио, например, сайты голосовых конференций. Вы можете выбрать между вариантами Всегда спрашивать, Разрешить или Блокировать.

Подлинность веб-сайта

Владелец: Отображает владельца сайта, если подлинность страницы может быть подтверждена.
Подтверждено: Отображает агентство, выдавшее сертификат безопасности, который использует сайт, если таковой имеется. Чтобы увидеть сертификат веб-сайта, щёлкните по кнопке Просмотреть сертификат .

Приватность и История

Посещал ли я этот веб-сайт до сегодняшнего дня?: Отображает, посещали ли вы сайт до сегодняшнего дня, и если да, то сколько раз.

Хранит ли этот веб-сайт информацию на моём компьютере?: Показывает, хранит ли сайт куки или другие данные сайта. Щёлкните по кнопке Удалить куки и данные сайта , чтобы просмотреть или удалить сохранённые данные в случае их наличия.
Сохранял ли я для этого веб-сайта какие-либо пароли?: Отображает, сохраняли ли вы регистрационную информацию для этого сайта. Щёлкните по кнопке Просмотреть сохранённые пароли для просмотра паролей, которые вы сохранили для этого сайта.

Технические детали

Раздел Технические детали отображает, зашифровано ли соединение по причинам обеспечения приватности, и если да, то какой тип или степень шифрования были использованы.

Эти прекрасные люди помогли написать эту статью:

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

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

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

Зачем мне нужен исходный код сайта?

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

SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.

Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.

Как узнать код сайта

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

Как видите, здесь все логично и понятно.

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

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

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

Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.

Что такое HTML и CSS

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

Например, часто используется такая конструкция: <h1> Это мой первый сайт! </h1>, где h1 – тег, обозначающий заголовок первого уровня, внутри которого находится текст, отображаемый на странице.

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

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

Рассмотрим на небольшом примере, как работают стили:

Допустим, у нас есть HTML-тег <body> с текстом «Привет! Это мой первый сайт»:
Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:

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

Как я могу использовать код

Выше мы рассмотрели лишь основные моменты, связанные с кодом сайта – научились просматривать его и узнали, что такое HTML и CSS. Теперь давайте применим полученные знания на практике – посмотрим, как всем этим пользоваться.

Вариант 1: Редактирование контента

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

Например, доступна возможность изменять содержимое текста – для этого достаточно выбрать нужный текст, кликнуть по нему правой кнопкой мыши и перейти в «Посмотреть код». После этого перед нами отобразится инспектор с выделенным текстом.

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

Чтобы отменить внесенные изменения, достаточно воспользоваться клавишей «F5» – страница будет обновлена, а весь контент станет исходным.

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

Вариант 2: Скачивание картинок

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

Выбираем картинку, которую нужно скачать, кликаем по ней правой кнопкой мыши и переходим в «Посмотреть код». После это перед нами откроется инспектор браузера с выделенным тегом – в нем нас интересует значение «src». Там содержится ссылка на картинку, которую нужно скопировать и вставить в браузер.
Мы попадаем в окно с необходимым изображением в полном размере. Чтобы его скачать, достаточно кликнуть правой кнопкой мыши и выбрать «Сохранить картинку как…».

Аналогичным образом мы можем выгрузить и фоновое изображение, но его стоит искать через CSS-стили в атрибуте background.

Вариант 3: Просмотр SEO-элементов

С помощью кода можно посмотреть основные SEO-теги. Сделать это можно следующим образом:

Открываем страницу, которую нужно проанализировать, и кликаем по пустой области правой кнопкой мыши. Затем выбираем «Просмотр кода страницы».
Далее нас перенаправляет на страницу с кодом – здесь мы можем найти такие элементы, как H1, Description, Title и другие. Для удобства рекомендую использовать поиск по странице, который запускается с помощью комбинации клавиш «CTRL+F».

Подобные элементы можно посмотреть и через инспектор кода.

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

Если нужны расширенные возможности для устройства на Android, то можно поискать специальные приложения, например, VT View Source.

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

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

Зачем нужен исходный код

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

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

Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.

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

Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующей комбинации клавиш быстрого доступа: CTRL + U ( COMMAND + OPTION + U в macOS).

Третий метод заключается в использовании инструментов разработчика Chrome, которые позволяют вам глубже погрузиться в код страницы, а также настроить её на лету для целей тестирования и разработки. Интерфейс инструментов разработчика можно открывать и закрывать с помощью сочетания клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Вы также можете запустить их по следующему пути:

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

Google Chrome на Android

Просмотр источника веб-страницы в Chrome для Android также просто: добавьте следующий текст перед адресом (или URL) – view-source:. HTML и другой код рассматриваемой страницы будет немедленно отображаться в активном окне.

Google Chrome на iOS

Хотя нет собственных методов просмотра исходного кода с помощью Chrome на iPad, iPhone или iPod touch, наиболее простым и эффективным является использование стороннего решения, такого как приложение View Source.

Доступное за $0,99 в App Store, View Source предлагает вам ввести URL-адрес страницы (или скопировать/вставить его из адресной строки Chrome), и всё. Помимо отображения HTML и другого исходного кода, в приложении также есть вкладки, на которых отображаются отдельные ресурсы страницы, объектная модель документа (DOM), а также размер страницы, файлы cookie и другие интересные сведения.

Исходный код страницы в Microsoft Edge

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

Чтобы получить доступ к этому удобному набору инструментов, вы можете использовать одно из этих сочетаний клавиш: F12 или CTRL + U . Если вы предпочитаете мышь, вместо этого нажмите кнопку меню Edge (три точки в верхнем правом углу) и выберите в списке пункт «Средства разработчика F12».

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

Исходный код страницы в Mozilla Firefox

Чтобы просмотреть исходный код страницы в настольной версии Firefox, вы можете нажать CTRL + U ( COMMAND + U на macOS) на клавиатуре, чтобы открыть новую вкладку, содержащую HTML и другой код для активной веб-страницы.

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

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

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

Mozilla Firefox на Android

Просмотр исходного кода в Android версии Firefox достижим через использование view-source: в URL-адресе.

Mozilla Firefox на iOS

Рекомендуемый метод просмотра исходного кода веб-страницы на вашем iPad, iPhone или iPod touch – через приложение View Source, доступное в App Store за $0,99. Хотя оно не интегрировано напрямую с Firefox, вы можете легко скопировать и вставить URL-адрес из браузера в приложение, чтобы раскрыть HTML-код и другой код, связанный с рассматриваемой страницей.

Исходный код страницы в Apple Safari

Хотя Safari для iOS по умолчанию не включает возможность просмотра источника страницы, браузер довольно легко интегрируется с приложением View Source, доступным в App Store за 0,99 долл. США.

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

На MacOS

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

Выберите Safari в меню браузера, расположенного в верхней части экрана.
Когда появится раскрывающееся меню, выберите параметр Настройки.
Настройки Safari теперь должны быть видны. Нажмите на значок «Дополнительно», расположенный в правой части верхнего ряда.
Внизу раздела «Дополнительно» находится опция «Показать меню разработки» в строке меню, сопровождаемая пустым флажком. Установите этот флажок и закройте окно настроек, щелкнув по красному значку «х» в верхнем левом углу.
Откройте меню «Разработка», расположенное в верхней части экрана.
Когда появится раскрывающееся меню, выберите «Показать источник страницы». Кроме того, можно использовать следующую комбинацию клавиш: COMMAND + OPTION + U .

Исходный код страницы в браузере Opera

Чтобы просмотреть исходный код активной веб-страницы в браузере Opera, используйте следующую комбинацию клавиш: CTRL + U ( COMMAND + OPTION + U в macOS). Если вы предпочитаете загружать источник в текущей вкладке, введите следующий текст слева от URL-адреса страницы в адресной строке и нажмите Enter : view-source:

Настольная версия Opera также позволяет просматривать исходный код HTML, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию будет отображаться в правой части главного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Исходный код в браузере Vivaldi

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

Вы также можете добавить следующий текст в начало URL-адреса страницы, который отображает исходный код на текущей вкладке: view-source:

Другой метод – через интегрированные инструменты разработчика браузера, доступные по сочетанию клавиш CTRL + SHIFT + I или через опцию средств разработчика в меню.

Веб-обозреватель от Google поддерживает тонкое конфигурирование, посредством которого его можно подогнать под разные задачи и нужды юзера. Один из наших авторов подробно описал метод получения доступа к параметрам Chrome.

Mozilla Firefox

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

Вариант 1: Обычные настройки

Основные параметры браузера Файрфокс открываются следующим образом. Запустите приложение и вызовите его главное меню, выберите в нём пункт «Настройки».

Будет открыта вкладка с параметрами браузера.

Вариант 2: Продвинутые параметры

В последних выпусках Firefox разработчики компании Mozilla переместили часть потенциально опасных опций в отдельный раздел. Получить к нему доступ можно следующим образом:

Enter

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

Решение от компании Яндекс также обладает большим набором разнообразных настроек. Доступ к ним и обзор наиболее полезных описаны в статье далее.

Opera

Просмотрщик веб-страниц Опера, как и другие подобные приложения, позволяет изменять некоторые из своих параметров. Методов доступа к ним существует несколько, самые удобные из них уже осмотрел один из наших авторов.

Microsoft Edge

Открыть настройки современного системного браузера в Windows тоже довольно просто.

Internet Explorer

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

«Сервис»

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

Мы рады, что смогли помочь Вам в решении проблемы.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Читайте также: