Как открыть DevTools в любом браузере: горячие клавиши, меню и телефон

Чтобы открыть DevTools, нажмите F12 или Ctrl+Shift+I на Windows и Linux, а на Mac нажмите Cmd+Option+I. Сочетание работает в Chrome, Edge, Яндекс Браузере и Firefox.

Второй способ без клавиатуры: щёлкните правой кнопкой по любому месту страницы и выберите «Просмотреть код». Панель откроется сразу на вкладке «Элементы» с выделенным блоком, по которому вы щёлкнули, то есть на DOM-дереве страницы.

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

CheckroiПодборка курсов по Chrome DevTools35 курсов • 11 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Горячие клавиши DevTools во всех браузерах

Сочетания взяты из справки каждого браузера, ссылки собраны под таблицей. В Chrome, Edge и Яндекс Браузере они совпадают, потому что все три построены на одном движке Chromium.

Источники: справка Chrome, документация Edge, горячие клавиши Яндекс Браузера, сочетания Firefox, сочетания веб-инспектора Safari.

Сразу на нужную вкладку

Если нужна только консоль или только код элемента, не обязательно открывать панель и потом искать вкладку. Консоль браузера открывается своим сочетанием:

• Chrome, Edge, Яндекс Браузер: Ctrl+Shift+J, на Mac Cmd+Option+J.
• Firefox: Ctrl+Shift+K, на Mac Cmd+Opt+K.
• Safari: Cmd+Option+C открывает консоль ошибок.

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

Режим выбора элемента, когда наводите курсор на кнопку или картинку и видите её код, включает Ctrl+Shift+C (на Mac Cmd+Option+C) в Chrome, Edge и Firefox. В Safari для этого служит Shift+Cmd+C. Так проще всего найти блок, который прыгает при загрузке страницы, подробнее об этом в разборе сдвигов макета (CLS).

У Яндекс Браузера есть особенность: по его справке клавиша F12 открывает панель сразу на вкладке Elements с включённым выбором элемента. На последнюю открытую вкладку ведёт Ctrl+Shift+I.

Как открыть панель разработчика через меню

Меню пригодится, когда клавиши заняты другой программой или клавиатура ноутбука отдаёт F12 под яркость и громкость.

Google Chrome

1. Нажмите три точки справа от адресной строки.
2. Выберите «Дополнительные инструменты».
3. Нажмите «Инструменты разработчика».

На Mac есть ещё строка меню вверху экрана: «Просмотр» → «Разработчикам» → «Инструменты разработчика». В том же подменю лежат «Консоль JavaScript» и «Исходный код страницы».

Microsoft Edge

Путь в документации Microsoft: «Настройки и прочее» (три точки) → More tools → Developer tools. В русском Edge эти пункты переведены, порядок тот же. Если F12 в Edge ничего не делает, загляните в edge://settings/system: там есть переключатель, который отключает эту клавишу для DevTools.

Mozilla Firefox

В справке Mozilla путь такой: Tools → Web Developer → Web Developer Tools, в русской сборке пункты переведены. Firefox называет свою панель Toolbox, а вкладки внутри нее Inspector, Web Console, Debugger и Network.

Opera

Сочетаний клавиш справка Opera не приводит, зато даёт меню:

• Windows и Linux: меню O → Developer → Developer Tools.
• Mac: сначала включите меню разработчика через View → Show Developer Menu, потом выберите Developer → Developer Tools.

Opera тоже работает на Chromium, поэтому внутри та же панель, что в Chrome.

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

В Safari на Mac меню «Разработка» по умолчанию спрятано. Пока его не включить, Cmd+Option+I ничего не делает.

1. Откройте Safari → «Настройки».
2. Перейдите на вкладку «Дополнения».
3. Поставьте галочку «Показывать функции для веб‑разработчиков».
4. В строке меню появится «Разработка». Веб-инспектор теперь открывается сочетанием Cmd+Option+I или пунктом в этом меню.

Путь описан в справке Apple. В старых версиях Safari галочка называлась иначе и прямо упоминала меню «Разработка» в строке меню.

Включить меню стоит и тем, кто сам не пишет код. Тестировщики проверяют сайты на технике Apple как раз через веб-инспектор Safari: у этого браузера свой движок, и ошибки вёрстки в нём бывают другие.

Ещё одно сочетание Safari, которое пригодится: Shift+Cmd+D переключает инспектор между отдельным окном и прикреплённым к вкладке.

Код элемента и исходный код страницы: в чём разница

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

Сочетания для Chrome указаны в списке быстрых клавиш Chrome. Если текст или кнопку подставляет скрипт, в исходном коде их не будет, а во вкладке «Элементы» будут. По этой разнице удобно понять, отдаёт ли сайт содержимое сразу или дорисовывает его в браузере. Читать исходный HTML первым делом учатся HTML-верстальщики.

Правки во вкладке «Элементы» видите только вы и только до перезагрузки. Поменять так текст на чужом сайте нельзя, файлы на сервере остаются прежними.

Без мыши

Контекстное меню можно открыть с клавиатуры. В документации Edge описан такой путь: клавишей Tab переведите фокус на нужный элемент, нажмите Shift+F10, затем стрелку вверх и Enter. Панель откроется на этом элементе.

Панель открывается сама в каждой вкладке

Если вы весь день отлаживаете один проект, Chrome можно запустить с флагом, который открывает DevTools в каждой новой вкладке. Перед запуском закройте все окна Chrome, иначе флаг не подхватится.

# macOS
open -a "Google Chrome" --args --auto-open-devtools-for-tabs

# Windows
start chrome --auto-open-devtools-for-tabs

# Linux
google-chrome --auto-open-devtools-for-tabs

Команды взяты из справки Chrome. В Edge флаг тот же, но сначала нужно отключить ускорение запуска в edge://settings/system, иначе фоновый процесс браузера помешает.

Как открыть DevTools на телефоне

Мобильные Chrome и Safari встроенной панели DevTools не показывают. Страницу на телефоне отлаживают с компьютера: телефон подключают кабелем, а DevTools открывают на большом экране.

Android и Chrome

1. На телефоне включите параметры разработчика и в них «Отладку по USB».
2. Подключите телефон к компьютеру кабелем и разрешите отладку, если телефон спросит.
3. На компьютере откройте в Chrome адрес chrome://inspect#devices и проверьте, что стоит галочка Discover USB devices.
4. Откройте страницу в Chrome на телефоне. На компьютере она появится в списке, рядом будет кнопка Inspect.

Порядок описан в руководстве по удалённой отладке Android. После нажатия Inspect откроется обычная панель, только она показывает вкладку с телефона.

Адрес не обязательно набирать на маленьком экране. На странице chrome://inspect есть поле Open tab with url: впишите туда ссылку, нажмите Open, и она откроется в Chrome на телефоне. Если телефон в списке не появился, первым делом проверьте кабель: часть кабелей только заряжает и данные не передаёт.

iPhone и iPad

1. На iPhone откройте «Настройки» → «Приложения» → Safari → «Дополнения» и включите «Веб-инспектор».
2. Подключите телефон к Mac кабелем.
3. В Safari на Mac откройте меню «Разработка». Там появится имя телефона, а в нём список открытых страниц.

Шаги взяты из документации Apple для разработчиков. После первого подключения кабелем можно включить отладку по сети: пункт Connect via Network в подменю устройства. Для этого способа нужен Mac с Safari.

Тем, у кого есть Xcode, телефон не обязателен. В симуляторе iPhone веб-инспектор включён всегда, и запущенный симулятор появляется в меню «Разработка» так же, как подключённое устройство.

Если телефона под рукой нет, начните с режима устройства в самой панели DevTools. Он сжимает страницу до размера экрана смартфона и помогает проверить медиа-запросы в CSS. Настоящий телефон он не заменяет, но большую часть ошибок вёрстки покажет.

Что внутри панели и зачем каждая вкладка

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

Чаще всего новичок открывает «Элементы», чтобы понять, почему блок встал не туда. Справа в этой вкладке видны все применённые правила, и это лучший способ проверить, подключился ли CSS к странице.

Вкладка «Сеть» нужна, когда форма не отправляется или картинка не грузится. Щёлкните по запросу и посмотрите, какой payload ушёл на сервер и что сервер ответил. Вкладку «Сеть» открывайте до перезагрузки страницы: запросы, сделанные раньше, в списке не появятся.

«Производительность» и Lighthouse отвечают за скорость. На них опираются разборы метрик LCP и INP, по которым Google оценивает скорость страниц.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как закрепить панель и поменять язык

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

• «Закрепить сбоку» выбирает положение: «Перенести в отдельное окно», «Прикрепить внизу», «Прикрепить справа» и слева.
• «Выполнить команду» открывает строку поиска по всем функциям панели. Её же вызывает Ctrl+Shift+P, на Mac Cmd+Shift+P.

Отдельное окно удобно на двух мониторах: страница на одном экране, код на другом. Если панель открылась на английском, а нужен русский, зайдите в её настройки (клавиша F1, когда панель в фокусе), в разделе «Параметры» найдите поле «Язык:» и выберите «Язык интерфейса браузера».

Режим разработчика в расширениях Chrome

Под «режимом разработчика» в Chrome часто имеют в виду переключатель на странице расширений. С DevTools он никак не связан: он разрешает ставить расширения из папки на компьютере, а не из магазина.

1. Откройте адрес chrome://extensions.
2. Включите переключатель «Режим разработчика» в правом верхнем углу.
3. Появится кнопка загрузки распакованного расширения. Подробно процесс описан в учебнике Chrome по расширениям.

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

Почему DevTools не открывается

Ниже случаи, которые встречаются чаще всего. Сначала симптом, потом причина и что сделать.

Рабочий компьютер

В корпоративном Chrome за доступ отвечает политика DeveloperToolsAvailability. По описанию политики в исходниках Chromium, при значении 2 инструменты разработчика недоступны, а заодно отключаются горячие клавиши и пункты меню, которые их открывают. Обходить это не нужно: решение принимает администратор, и с ним стоит договориться.

Защита от вставки кода

Если в новом профиле Chrome вставить код в консоль, панель покажет предупреждение: не вставляйте код, который вы не понимаете или не проверяли. Так браузер защищается от мошенников, которые просят «вставить строчку, чтобы получить бонус», а на деле крадут сессию.

Решение: если код ваш, введите в консоли фразу «разрешить вставку» и нажмите Enter. В английском интерфейсе фраза другая, allow pasting. Механизм объясняется в блоге команды Chrome DevTools.

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

Где освоить DevTools и JavaScript системно

Открыть панель можно за секунду, а пользоваться ей уверенно учатся вместе с вёрсткой и JavaScript. Каталог курсов, где DevTools разбирают на практике, собран на странице курсов по Chrome DevTools. Если цель шире, посмотрите курсы для фронтенд-разработчиков.

Тем, кто выбирает профессию, пригодятся разборы кто такой JavaScript-разработчик и как стать фронтенд-разработчиком.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
Веб-вёрстка Перейти на сайт курса	Skillbox	145 881 ₽	2818 ₽/мес.	3 месяца	Обзор курса
JavaScript Перейти на сайт курса	Skillbox	63 829 ₽	4086 ₽/мес.	3 месяца	Обзор курса
Профессия Инженер по автоматизации тестирования Перейти на сайт курса	GeekBrains	119 574 ₽	3205 ₽/мес.	6 месяцев	Обзор курса
Инженер по тестированию с нуля	Skypro	150 960 ₽	6167 ₽/мес.	12 месяцев	Обзор курса
Автоматизированное тестирование на Python Перейти на сайт курса	Skillbox	118 666 ₽	4108 ₽/мес.	9 месяцев	Обзор курса

• 

  Веб-вёрстка

  Skillbox145 881 ₽2818 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  JavaScript

  Skillbox63 829 ₽4086 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  Профессия Инженер по автоматизации тестирования

  GeekBrains119 574 ₽3205 ₽/мес6 месяцев
  Перейти на сайт курсаОбзор
• 

  Инженер по тестированию с нуля

  Skypro150 960 ₽6167 ₽/мес12 месяцев
  Обзор
• 

  Автоматизированное тестирование на Python

  Skillbox118 666 ₽4108 ₽/мес9 месяцев
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по Chrome DevTools