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

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

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

Оглавление

Способы открытия консоли разработчика

Для открытия панели DevTools в большинстве современных браузеров (Chrome, Firefox, Edge, Opera, Safari) существует несколько универсальных способов.

  1. Горячие клавиши (самый быстрый способ):

    • Windows / Linux: Нажмите F12 или комбинацию Ctrl + Shift + I. Также можно использовать Ctrl + Shift + J для мгновенного перехода на вкладку Console.
    • macOS: Используйте сочетание Cmd + Option + I (или ⌘ + ⌥ + I). Для быстрого доступа к консоли подходит Cmd + Option + C.

  2. Через контекстное меню:

    • Нажмите правой кнопкой мыши на любом элементе страницы и выберите пункт «Просмотреть код» (Inspect) или «Инспектировать элемент». Это откроет панель с выделенным конкретным DOM-элементом.

  3. Через меню браузера:

    • В Google Chrome: нажмите на три точки в правом верхнем углу → «Дополнительные инструменты» → «Инструменты разработчика».
    • В Safari: необходимо сначала включить меню разработки в настройках («Настройки» → «Дополнительно» → галочка «Показывать функции для веб-разработчиков»), после чего выбрать «Разработка» → «Инструменты разработчика».

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

Если вам нужно увидеть только HTML-код без интерактивных панелей отладки, используйте один из следующих методов:

  • Горячие клавиши: На Windows нажмите Ctrl + U, на macOS — Cmd + Option + U (или Cmd + U).
  • Адресная строка: Добавьте префикс view-source: перед URL-адресом сайта и нажмите Enter.
  • Контекстное меню: Выберите пункт «Просмотр кода страницы» или «Исходный код страницы».

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

  • Консоль не открывается по F12: На некоторых ноутбуках клавиша F12 по умолчанию управляет системными функциями (громкость, яркость). Используйте комбинацию Ctrl + Shift + I (Windows/Linux) или Cmd + Option + I (macOS).
  • В Safari нет пункта «Разработка»: Меню скрыто по умолчанию. Обязательно поставьте галочку «Показывать функции для веб-разработчиков» в разделе «Настройки» → «Дополнительно».
  • Путаница между консолью и исходным кодом: Комбинация для просмотра кода страницы показывает статический HTML, а DevTools позволяет взаимодействовать с DOM, сетью и выполнять команды в реальном времени.

FAQ

В чем разница между просмотром кода и консолью разработчика?
Просмотр кода страницы отображает статический HTML-документ, полученный от сервера. Консоль разработчика (DevTools) предоставляет интерактивные инструменты для отладки, работы с DOM, сетевыми запросами и выполнения JavaScript.

Как мгновенно перейти на вкладку Console в DevTools?
Используйте специальные сочетания клавиш: Ctrl + Shift + J для Windows / Linux или Cmd + Option + C для macOS.

Что делать, если пункт «Просмотреть код» не выделяет нужный элемент?
Убедитесь, что вы нажали правой кнопкой мыши непосредственно на целевой элемент страницы, а не на пустое пространство вокруг него. Панель откроется с уже выделенным конкретным DOM-элементом.