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

Иван Корнев·18 августа 2026·⏱3 мин

Чтобы просмотреть исходный код страницы и инструменты разработчика в браузере, нажмите F12 или Ctrl + U (Windows), либо Cmd + Option + I (macOS). Это откроет панель DevTools или вкладку с HTML-кодом для анализа.

Оглавление

Способы просмотра исходного кода

Этот режим показывает «сырой» HTML-код страницы без возможности интерактивного редактирования или отладки скриптов.

  • Контекстное меню: Нажмите правой кнопкой мыши в любом месте страницы и выберите пункт «Просмотреть код страницы», «Исходный код страницы» или аналогичный.
  • Горячие клавиши (Windows/Linux): Используйте сочетание Ctrl + U для открытия исходного кода в новой вкладке.
  • Горячие клавиши (macOS): Нажмите Cmd + Option + U (или Alt + Cmd + U).

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

Инструменты разработчика (DevTools) — это расширенная панель, позволяющая не только смотреть код, но и изменять стили на лету, отлаживать JavaScript, анализировать сеть и производительность.

  • Универсальная клавиша: В большинстве браузеров (Chrome, Firefox, Opera, Edge) инструменты открываются по нажатию F12.
  • Альтернативные сочетания (Windows/Linux): Ctrl + Shift + I открывает панель разработчика или инспектор элементов.
  • Альтернативные сочетания (macOS): Используйте Cmd + Option + I.
  • Через меню браузера: В Google Chrome перейдите по пути: три точки → «Дополнительные инструменты» → «Инструменты разработчика».
  • Инспектор элемента: Кликните правой кнопкой мыши по конкретному элементу на странице и выберите «Просмотреть код» (Inspect), чтобы сразу перейти к нему во вкладке Elements.

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

Основные вкладки DevTools

ВкладкаНазначение
Elements (Элементы)Изучение и редактирование DOM-дерева и CSS-стилей
Console (Консоль)Выполнение JavaScript-команд и просмотр логов ошибок
Network (Сеть)Анализ загружаемых ресурсов и запросов
Sources (Источники)Отладка скриптов и просмотр файлов сайта

Частые ошибки

  • Попытка сохранить изменения в «Просмотре кода страницы»: Эта вкладка предназначена только для чтения. Для интерактивного редактирования используйте вкладку Elements в DevTools.
  • Неверные горячие клавиши на macOS: Использование Ctrl вместо Cmd не сработает. Убедитесь, что нажимаете Cmd + Option + I или Cmd + Option + U.
  • Ожидание сохранения изменений в DevTools: Правки в браузере не меняют реальный сайт, они видны только вам до обновления страницы.

FAQ

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

Почему код в DevTools отличается от «Просмотра кода страницы»?
«Просмотр кода» показывает исходный HTML, полученный с сервера. DevTools (вкладка Elements) показывает текущее DOM-дерево, которое могло быть изменено JavaScript после загрузки страницы.

Работают ли эти способы в мобильных браузерах?
На мобильных устройствах встроенные инструменты разработчика обычно отсутствуют. Для анализа потребуется подключить телефон к компьютеру и использовать удалённую отладку.