Как запустить код в консоли браузера

Что проверяют

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

Как отвечать

Консоль открывается через инструменты разработчика (F12, либо Cmd + Option + J в macOS), код вводится и выполняется по Enter, а многострочный ввод делается через Shift + Enter.

Полезно назвать то, что реально экономит время:

• $0 это выбранный в инспекторе элемент, $1 предыдущий. Удобно проверять стили и обработчики конкретного узла;
• $ и $$ работают как сокращения для поиска элементов, а $x для выражений XPath;
• copy(obj) кладёт значение в буфер обмена, console.table(arr) показывает массив объектов таблицей;
• monitorEvents(el, "click") печатает события элемента, getEventListeners(el) показывает обработчики;
• сниппеты во вкладке источников хранят скрипты, которые нужно запускать регулярно;
• живые выражения закрепляют значение и обновляют его без повторного ввода;
• await работает прямо в консоли, поэтому асинхронный код пишется без обёрток.

Отдельно про ограничения: на страницах со строгой политикой безопасности часть возможностей ограничена, доступ идёт в контексте выбранного фрейма (его меняют в выпадающем списке), а переменные, объявленные через let, живут до перезагрузки и мешают повторному объявлению.

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

Где спотыкаются

Не знают про $0 и ищут элемент запросами вручную.

Пытаются отладить страницу во фрейме, не переключив контекст.

Считают консоль игрушкой и не пользуются ей для проверки гипотез при разборе дефекта.