Как посмотреть исходный код веб страницы?
Мы регулярно сталкиваемся с необходимостью заглянуть в исходный код страницы по тем или иным причинам. В этой статье мы разберем как смотреть исходный код веб-страниц на примере популярных браузеров: Google Chrome, Mozilla FireFox, Internet Explorer, Opera, Safari.
Просмотр исходного кода веб страницы любого сайта доступен каждому. И для этого не нужно скачивать какие-либо приложения или устанавливать программы. Это легко можно сделать через браузер, так сказать «в режиме онлайн».
Во всех популярных браузерах есть как минимум 2 или 3 способа просмотра исходного кода страниц сайта:
- Через контекстное меню правой кнопки мыши;
- Через комбинацию клавиш;
- Через пункт в меню браузера.
Также, если открытие кода в браузере вам по каким-то причинам на подходит, вы всегда можете сохранить страницу сайта себе на компьютер и открыть HTML файл с помощью текстового редактора, например «Блокнот».
Как посмотреть исходный код страницы в Сhrome
Способ 1. Контекстное меню ПКМ —> Просмотр исходного кода.
Способ 2. Горячие клавиши: Ctrl + U.
Как посмотреть исходный код веб страницы в Firefox
Способ 1. Контекстное меню ПКМ —> Исходный код страницы.
Способ 2. Горячие клавиши: Ctrl + U.
Способ 3. Меню браузера: Инструменты —> Веб-разработка —> Исходный код страницы. Если вы не видите меню, попробуйте нажать ALT на клавиатуре.
Как посмотреть исходный код страницы в Internet Explorer
Способ 1. Контекстное меню ПКМ —> Просмотр HTML-кода.
Способ 2. Горячие клавиши: Ctrl + U.
Способ 3. Меню браузера: Вид —> Просмотреть HTML-код. Если вы не видите меню, попробуйте нажать ALT на клавиатуре.
Просмотр исходного кода страницы сайта в Opera
Способ 1. Контекстное меню ПКМ —> Исходный текст страницы.
Способ 2. Горячие клавиши: Ctrl + U.
Способ 3. Меню: Разработка —> Исходный текст страницы.
Просмотр HTML кода страницы в Safari
Способ 1. Контекстное меню ПКМ —> Посмотреть источник.
Способ 2. Горячие клавиши: Ctrl + Alt + U.
Способ 3. Меню браузера: Вид —> Просмотреть HTML-код. Если вы не видите меню, попробуйте нажать ALT на клавиатуре.
Как открыть исходный код страницы сайта в любом браузере
Веб-страница, которую вы читаете, состоит, среди прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и преобразует в то, что вы сейчас читаете.
Большинство веб-браузеров предоставляют возможность просматривать исходный код веб-страницы без дополнительного программного обеспечения, независимо от того, на каком устройстве вы находитесь. Некоторые даже предлагают расширенные функциональные возможности и структуру, облегчая просмотр HTML и другого программного кода на странице.
Зачем нужен исходный код
Есть несколько причин, по которым вы можете захотеть увидеть исходный код страницы. Если вы веб-разработчик, возможно, вы захотите увидеть конкретный стиль или реализацию другого программиста. Может быть, вы занимаетесь обслуживанием сайта и пытаетесь выяснить, почему определенная часть веб-страницы отображается или ведет себя не так, как должна.
Вы также можете быть новичком, пытаетесь научиться кодировать свои собственные страницы и ищите примеры из реальной жизни. Конечно, возможно, что вы не попадаете ни в одну из этих категорий и просто хотите просмотреть исходный код из чистого любопытства.
Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.
Исходный код страницы в Google Chrome
Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующей комбинации клавиш быстрого доступа: CTRL + U ( COMMAND + OPTION + U в macOS).
При нажатии этой комбинации вы откроете новую вкладку браузера с HTML и другим кодом активной страницы. Этот источник имеет цветовую кодировку и структурирован таким образом, чтобы упростить выделение и поиск того, что вы ищете. Вы также можете получить это, введя следующий текст в адресную строку Chrome, добавив выделенную часть слева от URL-адреса веб-страницы, и нажав клавишу Enter : view-source: (например, view-source:https://webznam.ru).
Третий метод заключается в использовании инструментов разработчика 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, непосредственно слева от URL-адреса страницы, на текущей вкладке будет отображён исходный код: view-source: (например, view-source:https://webznam.ru).
Ещё один способ получить доступ к исходному коду страницы – воспользоваться инструментами разработчика 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 долл. США.
После установки этого стороннего приложения вернитесь в браузер Safari и нажмите кнопку «Поделиться», расположенную в нижней части экрана и представленную квадратом и стрелкой вверх. Теперь должен быть виден общий лист iOS, перекрывающий нижнюю половину окна Safari. Прокрутите вправо и нажмите кнопку «Просмотр источника».
Теперь должно отображаться структурированное представление с цветовой кодировкой исходного кода активной страницы вместе с другими вкладками, которые позволяют просматривать ресурсы страницы, сценарии и многое другое.
На 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 или через опцию средств разработчика в меню.
Сочетания клавиш
Управление мышью Opera — это функция, которая позволяет управлять браузером с помощью быстрых и простых перемещений мыши.
Чтобы включить или выключить управление с помощью жестов мышью, выполните следующие действия.
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Shortcuts (Клавиши и жесты) установите флажок Enable mouse gestures (Включить жесты мышью).
Примечание. Если использовать жесты мышью при работе с Magic Mouse или трекпадом, браузер может работать некорректно.
Функция «жесты мышью» работает так: удерживая нажатой правую кнопку, переместите мышь в нужном направлении, затем отпустите кнопку. После некоторой практики навигация с помощью мыши станет быстрой и удобной.
Навигация с помощью жестов мышью
Следующие жесты мышью действуют при нажатии на пустом месте на страницах.
| Действие | Жест |
|---|---|
| Назад на одну страницу | Движение влево |
| Вперед на одну страницу | Движение вправо |
| Открыть новую вкладку | Движение вниз |
| Перезагрузить страницу | Движение вверх, потом вниз |
| Закрыть текущую вкладку | Движение вниз, потом вправо |
Переход по ссылкам с помощью жестов мышью
Следующие жесты мышью действуют при нажатии ссылок на странице.
| Действие | Жест | |
|---|---|---|
| Открыть ссылку в фоновой вкладке | Движение вниз, потом вверх | |
| Открыть ссылку в новой вкладке | Движение вниз | |
| Открыть ссылку в новом окне | Shift ⇧ + | Движение вниз при нажатой клавише Shift |
Переход вперед и назад по истории вкладки с помощью кнопочных жестов
Благодаря кнопочным жестам вы можете переходить вперед и назад по сайтам, нажимая пальцами по кнопкам мыши. Нажмите одну кнопку мыши, затем, удерживая ее, нажмите вторую, отпустите первую кнопку, а потом отпустите вторую. Потренируйтесь – и вы быстро освоите эту функцию.
Чтобы включить или выключить кнопочные жесты, выполните следующие действия.
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Shortcuts (Клавиши и жесты) установите флажок Enable rocker gestures (Включить сочетания кнопок мыши).
Используйте кнопочный жест справа налево для перехода назад по сайту и слева направо для перехода вперед.
Примечание. Если использовать кнопочные жесты при работе с Magic Mouse или трекпадом, браузер может работать некорректно.
Быстрая навигация с помощью сочетаний клавиш
С помощью клавиш навигация может быть значительно быстрее. В Opera вы можете назначить действиям навигации собственные сочетания клавиш. Чтобы настроить собственные сочетания клавиш, выполните следующие действия.
- Перейдите в Settings (Настройки) (Preferences (Настройки) на Mac).
- Нажмите Browser (Браузер) на боковой панели.
- В разделе Shortcuts (Клавиши и жесты) нажмите Configure shortcuts (Настроить сочетания клавиш).
Ниже приведен обзор сочетаний клавиш, предусмотренных в Opera по умолчанию.
Управление браузером
| Действие | Mac | Windows/Linux |
|---|---|---|
| Открыть страницу загрузок | ⌘ + J | Ctrl + J |
| Открыть страницу расширений | ⌘ + Shift ⇧ + E | Ctrl + Shift ⇧ + E |
| Открыть историю | ⌘ + Shift ⇧ + H | Ctrl + H |
| Открыть локальный файл | ⌘ + O | Ctrl + O |
| Открыть адрес | ⌘ + L | Ctrl + L |
| Открыть страницу настроек | ⌘ + , | Alt + P |
| Напечатать текущую страницу | ⌘ + P | Ctrl + P |
| Завершить работу в Opera | ⌘ + Q | Ctrl + Shift ⇧ + X |
| Сохранить страницу на диске | ⌘ + S | Ctrl + S |
| Открыть справку | F1 |
Поиск текста на странице
| Действие | Mac | Windows/Linux |
|---|---|---|
| Найти на странице | ⌘ + F | Ctrl + F |
| Найти следующее | ⌘ + G | Ctrl + G |
| Найти предыдущее | ⌘ + Shift ⇧ + G | Ctrl + Shift ⇧ + G |
Навигация по страницам
| Действие | Mac | Windows/Linux |
|---|---|---|
| Циклическое движение вперед по элементам страницы | Tab ⇥ | Tab ⇥ |
| Циклическое движение назад по элементам страницы | Shift ⇧ + Tab ⇥ | Shift ⇧ + Tab ⇥ |
| Вперед на одну страницу | ⌘ + → | Alt + → |
| Назад на одну страницу | ⌘ + ← | Alt + ← |
| В нижнюю часть страницы | ⌘ + ↓ | End |
| В верхнюю часть страницы | ⌘ + ↑ | Home |
| Страница вниз | Пробел | Пробел |
| Страница вверх | Shift ⇧ + Пробел | Shift ⇧ + Пробел |
| Перезагрузить текущую страницу | ⌘ + R | Ctrl + R |
| Показать программный код текущей страницы | ⌘ + U | Ctrl + U |
Управление вкладками и окнами
| Действие | Mac | Windows/Linux |
|---|---|---|
| Активировать меню вкладок | Ctrl + M | Ctrl + M |
| Закрыть текущую вкладку | ⌘ + W | Ctrl + W |
| Закрыть текущее окно | Alt + F4 | |
| Циклическое движение вперед по открытым вкладкам | Ctrl + Tab ⇥ | Ctrl + Tab ⇥ |
| Циклическое движение назад по открытым вкладкам | Shift ⇧ + Ctrl + Tab ⇥ | Shift ⇧ + Ctrl + Tab ⇥ |
| Циклический просмотр открытых окон | ⌘ + ` | Alt + Tab ⇥ |
| Свернуть окно | ⌘ + M | Windows + M |
| Открыть новую вкладку | ⌘ + T | Ctrl + T |
| Открыть новое окно | ⌘ + N | Ctrl + N |
| Открыть новое приватное окно | ⌘ + Shift ⇧ + N | Ctrl + Shift ⇧ + N |
| Открыть последнюю закрытую вкладку | ⌘ + Shift ⇧ + T | Ctrl + Shift ⇧ + T |
| Переключить меню вкладок | Ctrl + M | Ctrl + M |
| Показать предыдущую активную вкладку | Ctrl + ` | Ctrl + ` |
Манипуляции с текстом
| Действие | Mac | Windows/Linux |
|---|---|---|
| Копировать | ⌘ + C | Ctrl + C |
| Вырезать | ⌘ + X | Ctrl + X |
| Вставить | ⌘ + V | Ctrl + V |
| Выбрать все | ⌘ + A | Ctrl + A |
| Отменить | ⌘ + Z | Ctrl + Z |
| Вернуть | ⌘ + Shift ⇧ + Z | Ctrl + Shift ⇧ + Z |
Увеличение и уменьшение масштаба
| Действие | Mac | Windows/Linux |
|---|---|---|
| Перейти в полноэкранный режим | Ctrl+⌘+F | F11 |
| Увеличить | ⌘ + + | Ctrl + + |
| Уменьшить | ⌘ + — | Ctrl + — |
| Установить масштаб 100% | ⌘ + 0 | Ctrl + 0 |
Использование и настройка дополнительных сочетаний клавиш
Вы можете использовать дополнительные сочетания клавиш, в том числе действия одной клавишей. Для этого выполните следующие действия.
- Как работать с браузером Opera ?
- Начало работы
- Простая настройка
- Настройка оформления
- Повседневные функции
- Настройки боковой панели
- Обмен данными
- Основы
- Боковая панель
- Вкладки
- Перемещение по вкладкам
- Контекстное меню
- Изменение масштаба
- Полноэкранный режим и режим презентации
- Поиск текста на странице
- Загрузка и управление файлами
- Объединенная строка поискаи адресная строка
- Поисковая система по умолчанию
- Всплывающее окно поиска
- Простая настройка
- Импорт закладок и настроек
- Браузер по умолчанию
- Поле поиска
- Экспресс-панель
- Блокировка рекламы
- VPN
- Конвертер валют
- Конвертер единиц
- Конвертер часовых поясов
- Поиск выделенного текста
- Экономия заряда батареи
- Всплывающие окна с видео
- Закладки
- Синхронизация
- Просмотр открытых вкладок
- Интегрированные мессенджеры
- Персонализированные новости
- Новости на начальной странице
- Снимок
- Мой Flow
- Поиск по вкладкам
- Crypto Wallet
- Пространства
- Улучшенная адресная строка (BABE)
- Темы оформления
- Фоновые рисунки
- Расширения
- Настройки при запуске браузера
- Боковая панель
- Блокировка рекламы
- VPN
- Приватное окно
- Очистка истории посещений
- Значки безопасности
- Небезопасный контент
- Сертификаты безопасности
- Отслеживание действий
- Автозаполнение
- Управление доступом к камере
- Управление файлами cookie
- Обработка ссылок
- Управление изображениями
- Управление JavaScript
- Управление данными о местонахождении
- Управление доступом к устройствам MIDI
- Управление уведомлениями
- Управление доступом к микрофону
- Управление сохраненными паролями
- Управление всплывающими окнами на страницах
- Управление браузером с помощью мыши
- Быстрая навигация с помощью сочетаний клавиш
- Дополнительные сочетаний клавиш
- Дополнительные настройки
- Инструменты разработчика
- Настройка прокси
- Экспериментальные функции
- Резервное копирование файлов Opera
- Проблема с браузером
- Сообщение о проблеме
Как редактировать HTML код страницы браузером Opera? как.
HTML правим любым текстовым редактором, блокнот как пример. Ну ни как не браузером.
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
- Начало работы