На Windows всё просто: нажмите F12 и готово. Никакого меню, никакого второго устройства, никаких кабелей. Chrome, Edge и Firefox открывают инструменты разработчика одной и той же клавишей, и в отличие от Mac или iPhone здесь ничто не встаёт на пути.

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

Откройте инструменты

Chrome и Edge, которые одни и те же инструменты, потому что Edge построен на Chromium:

  • F12 или Ctrl+Shift+I открывают последнюю панель, которую вы смотрели.
  • Ctrl+Shift+J открывают Консоль прямо.
  • Ctrl+Shift+C открывают Элементы и одновременно включают инструмент выбора элемента.

Firefox отличается в одном пункте:

  • F12 открывает инструменты.
  • Ctrl+Shift+K открывают Веб-консоль.
  • Ctrl+Shift+C открывают Инспектор с включённым инструментом выбора, как в Chrome.

Если щёлкнуть правой кнопкой по элементу на странице и выбрать Посмотреть код, результат будет такой же, как Ctrl+Shift+C, но при этом выделится элемент, на котором вы щёлкивали. Если на ноутбуке верхний ряд клавиш настроен на мультимедийные функции, для F12 может потребоваться Fn+F12. Комбинации Ctrl+Shift этот вопрос не ставят.

Деталь, которая отнимает больше всего времени

Перечитайте первую комбинацию: F12 открывает последнюю панель, которую вы смотрели. В документации самой Microsoft об этом написано, и Chrome ведёт себя так же.

Значит, самая известная клавиша на самом деле не показывает, куда вы попадёте. Если кто-то в последний раз смотрел вкладку Сеть, нажимает F12 и видит стену запросов, а потом заключает, что консоль пуста. Но консоль не пуста. Просто вы её не видите.

Вот почему Ctrl+Shift+J полезнее, чем F12. Это комбинация, которая означает “то, что мой коллега на самом деле попросил”.

Какая панель ответит на вопрос

Два запроса, которые звучат одинаково, но ими не являются:

“Посмотри код элемента” означает панель Элементы. Вопрос за этим: что на странице, почему кнопка не того цвета, почему текст обрезан, как называется этот div. Вы смотрите на живой HTML и CSS, применённый к нему.

“Открой консоль и скажи, что она показывает” означает панель Консоль. Вопрос за этим: что пошло не так, пока страница работала. Красные строки здесь это ошибки JavaScript, и очень часто одна из них объясняет, почему кнопка ничего не сделала.

Это разные вопросы и разные ответы, поэтому скриншот панели Элементы не поможет тому, кто спрашивал про консоль.

Третий запрос, который задают реже, но который отвечает на более сложный вопрос:

“Пришли мне вкладку сети” означает панель Сеть, и она про то, что запросила страница и что вернулось. Как её открыть и что означает XHR это отдельное руководство, потому что там есть подвох: вкладка записывает только то, что открыта.

Слабо
"Я открыл инструменты и ничего плохого не вижу."
Лучше
"Консоль, две красные строки: Uncaught TypeError: Cannot read properties of null (reading 'value') at checkout.js:214. Происходит, когда я нажимаю Pay, остальное на странице не меняется."

Что копировать, а что нет

Когда вы нашли красную строку, полезен сам текст, а не его фотография.

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

Два момента, которые стоит добавить, но которые часто пропускают:

  • Разверните ошибку перед копированием. Свёрнутая ошибка это одна строка. Стрелка рядом с ней открывает стек вызовов, и стек показывает, где ошибка произошла.
  • Скажите, что вы делали. Ошибка в консоли без контекста это факт без причины. “Появляется, когда я нажимаю Pay” превращает это в воспроизводимую проблему.

Session Replay

Бесплатное расширение Chrome. Один клик на страницу, которая работает неправильно, записывает скриншот, консоль и логи сети, и выдаёт вам ссылку для вставки в отчёт об ошибке.

Установить расширение

Две особенности Windows, которые стоит знать

Полная перезагрузка это Ctrl+F5 или Ctrl+Shift+R. Когда кто-то говорит “у меня работает”, стары кэшированный файл это одна из частых причин, и полная перезагрузка это тридцать секунд, чтобы исключить это перед тем, как искать в коде.

Ctrl+Shift+P открывает меню команд, которое это поисковая строка по всем функциям инструментов. Если вы знаете, что вам нужно, но не помните, где это, ввести это здесь быстрее, чем искать по панелям, и это самый быстрый выход, когда вкладок уже больше трёх.

Что вынести из этого

На Windows открыть инструменты никогда не было сложно. Сложно знать, какие из них просили.

Ctrl+Shift+J для консоли, Ctrl+Shift+C для элемента, и F12 только когда вы уже знаете, где вы остановились. Потом копируйте текст, а не фотографируйте его, разверните ошибку перед копированием и скажите, что вы делали, когда она появилась. Это превратит “я посмотрел и кажется всё в порядке” в отчёт, на который можно ответить без второго разговора.