Как посмотреть код css в браузере

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

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

Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200+ проектов
90 специалистов
15 лет на рынке

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

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

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

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

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

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

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

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

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

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

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

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

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи

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

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

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

Код страницы

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

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

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

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

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

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

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

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

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

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

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

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

Просмотр html-документа в браузере

По ходу изучения теоретического материала по языку HTML у некоторых пользователей возникает вопрос: как вставить html файл в web-обозреватель? Как, уже написанный html-код, просмотреть в браузере . Увидеть , так сказать, результат проделанной работы.

Как мы уже договорились пишем наш html-код в программе «Блокнот» (но никто не запрещает пользоваться и другими редакторами, «Notepad++» например, который даже более удобен).

И так, открываем программу «Блокнот» и пишем в нем какой нибудь html-код. Возьмем html-код из прошлого урока.

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

HTML-документ в браузере

Проверяем результат написания html-кода

Добавляем эти три строчки в наш html-код и получаем код такого вида:

HTML-документ в браузере

Проверяем результат написания html-кода

Сохраняем наш файл: жмем файл → сохранить как

В открывшемся окне выбираем папку в которую мы сохраним файл, прописываем имя файла (например dokument ), меняем расширение файла .txt на .html, и тип файла ставим «Все файлы».

Чтобы открыть наш файл в браузере наводим указатель мыши на файл, кликаем правой кнопкой мыши, в открывшемся окне выбираем «Открыть с помощью» и выбираем браузер которым пользуемся.

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

в 5 задании не могу открыть исходный код страницы горяч клавишами control u, это на mac не работает или я туплю? все исправила как в задании и сохранила 5 раз.

google chrome

2 ответов

На Mac так открывать исходный код веб-страницы в Google Chrome: ⌘ + Option + u В Safari наверное аналогично. Webpage shortcuts для Mac (тут все команды): https://support.google.com/chrome/answer/157179?hl=en

Действие Сочетание клавиш Открыть параметры печати текущей страницы ⌘ + P Открыть параметры сохранения текущей страницы ⌘ + S Открыть диалоговое окно "Параметры страницы" ⌘ + Option + P Обновить текущую страницу без учета кешированного контента ⌘ + Shift + R Остановить загрузку страницы Esc Перейти от одного интерактивного элемента страницы к следующему Tab Перейти от одного интерактивного элемента страницы к предыдущему Shift + Tab Открыть сохраненный на компьютере файл в Google Chrome Нажмите ⌘ + O и выберите файл Просмотреть HTML-код текущей страницы (без возможности редактирования) ⌘ + Option + U Открыть консоль JavaScript ⌘ + Option + J Добавить текущую веб-страницу в закладки ⌘ + D Добавить все открытые вкладки в отдельную папку закладок ⌘ + Shift + D Включить или отключить полноэкранный режим ⌘ + Ctrl + F Увеличить масштаб страницы ⌘ и + Уменьшить масштаб страницы ⌘ и - Восстановить масштаб страницы по умолчанию ⌘ + 0 Прокрутить веб-страницу вниз (одно нажатие – один экран) Пробел Прокрутить веб-страницу вверх (одно нажатие – один экран) Shift + пробел Искать в Интернете ⌘ + Option + F Установить курсор перед предыдущим словом в текстовом поле Option + Стрелка влево Установить курсор в начало следующего слова в текстовом поле Option + Стрелка вправо Удалить предыдущее слово в текстовом поле Option + Delete Открыть домашнюю страницу в текущей вкладке ⌘ + Shift + H Восстановить исходный масштаб страницы Command + 0

спасибо большое!

Sign up or Log in to write an answer

• Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

• Отзывы
• Политика конфидециальности
• Условия использования
• Блог
• Цена и оплата
• Курсы и скринкасты
• Сертификаты
• Партнерская программа
• Комьюнити

Наши курсы и скринкасты

• HTML/CSS Advanced
• Bootstrap 4
• Vue JS
• Linux, GIT and web-hosting
• HTML and CSS
• Modern Javascript
• Javascript/jQuery
• Codeigniter
• Все курсы и скринкасты

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

Добрый день! После заполнения всех тэгов (Заполните title, description и keywords как в видеоуроке html/css), открываю в Chrome клавишами ctr U, открывается почему-то вторая страница вместо программного кода. Тэги заполнил вроде правильно. Что я делаю не так?

5 ответов

В какой операционной системе вы пытаетесь посмотреть исходный код index.html страницы? Если в Windows, тогда исходный код верстки html страницы вы можете открыть так: 1. Откройте страницу index.html (которую создали) в браузере Google Chrome 2. Правой кнопкой нажмите на любую область страницы и выберите Посмотреть исходный код (View page source)

Сделайте скрин этой программой и опубликуйте пожалуйста ссылку. Не пойму как у вас может не быть пункта Исходный код страницы во всех браузерах

Судя по всему, вы нажимаете в Google Chrome пункт меню Inspect, когда нажимаете правой кнопкой мыши по станице в браузере, а нужно выбирать View Page source — это второй пункт снизу.

Доброго времени суток! Операционка Windows 10 Домашняя. Правой кнопкой тоже не открывается, меню — Просмотр кода страницы. Есть еще меню — Просмотреть код, но там открывается программный код совсем в другом виде. Не могу прикрепить Скрин или файл сюда Через другие браузеры тоже не открывается. Пожалуйста, подскажите, что может быть не так?