Средства консоли Chrome, которыми вы, возможно, никогда не пользовались

[SepiS]

monitor не поддерживает отслеживание по ссылкам на функцию, только по именам
То есть, например, он не будет работать для анонимных функций:

Пример из консоли

foo = (a) => { return 1 + a }
monitor(foo)
foo(123)
124

// для обычной функции все работает
function moo (a) { return a + 123 }
monitor(moo)
moo(333)
function moo called with arguments: 333

Еще полезная штука, о которой узнал недавно — если сделать Inspect element, то он будет доступен в консоли в переменной $0

[Perlovich]

monitor не поддерживает отслеживание по ссылкам на функцию, только по именам

Неправда.

function first() { return 1; }
second = first;
monitor(second);
first();
> function first called

[SepiS]

Хорошо, значит отслеживает только для именованных функций.

[MorskoyZmey]

Вот так отслеживает:

var foo = function(a){ return a*2; };
monitor(foo);
foo(1);
> function foo called with arguments: 1
> 2

[Lain_13]

Следовательно, monitor не работает с arrow-функциями.

[sanReal]

Еще полезная функция: $0 содержит ссылку на элемент, выбранный на вкладке Elements

[deamondz]

есть ещё $1, $2,… для предыдущих выбранных элементов

[p1h]

А $1 — предыдущий выбранный. И так далее.

[inoyakaigor]

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

[Dron007]

А также можно инспектировать исчезающие DOM-элементы.

[namikiri]

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

[sanReal]

Бывает, что нужно посмотреть стили элемента, которые видно только при наведении, и флаг :hov не помогает.
Можно в консоли выполнить функцию

setTimeout(()=>{
    debugger;
}, 3000)

Навести курсор на нужный элемент и подождать, когда сработает debugger.
Доступ к Inspect element будет, но JS код не будет выполняться

[yakimchuk-ry]

Есть еще один вариант, нажать F8 когда открыты инструменты разработчика.

[sanReal]

Для большинства случаев да. Но у меня был кейс, когда нужно было поймать состояние, которое сбрасывается по событию blur на window. Ваш вариант, к сожалению, не сработает (

[Jabher]

сработает — если именно f8 нажать, а не тащить мышь к дебаггеру, все ок

[serginho]

Можно на вкладке Elements кликнуть правой клавишей мыши по елементу и выбрать Force state -> :hover

[noodles]

часто непонятно на чём именно нужно установить ховер (когда большая вложенность из тегов)

[da411d]

Круто!
Ожидал что-то юанальное типа редко используемых функций console.table и $(...), но эти фишки реально интересные и полезные.

[Andrey_Dolg]

Спасибо. Консоль использую часто, но почти всё в новинку и очень полезно. =)

[xState_level80]

Многие недооценивают возможности и кейсы комманды copy(). Недавно был случай когда потребовалось часто копировать из консоли огромный json объект без выделения. Рецепт оказалася прост.
1) Правый клик по объекту — нажимаем Strore as global variable (выдаст переменную temp1, в которой сохранился сам объект)
2) copy(temp1) и вуаля готово

[Finesse]

Вопрос только, почему в контекстном меню объекта сразу нет кнопки Copy

[ArVaganov]

Еще одна интересная фича, про которую почему-то мало знают:

document.designMode = 'on'

Включит режим редактирования текста прямо в разметке на странице.
off, соответственно – выключит.

Можно проверять макеты на различный текст/или создавать скриншоты веб-фейков не залезая в document. ¯\_(ツ)_/¯.

[kunix]

Второй аргумент для monitorEvents(...):

mouse:  "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key: "keydown", "keyup", "keypress", "textInput"
touch:  "touchstart", "touchmove", "touchend", "touchcancel"
control:  "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"
no argument: all of the above + "load", "unload", "abort", "error", "select", "change", "submit", "reset", "focus", "blur", "resize", "scroll", "search", "devicemotion", "deviceorientation"

[Vasek18]

В примерах используется переменная button. Разве не надо её как-то объявить/получить перед использованием?
И разве функция "$" не повторяет функционал аналога в jQuery?

[victor-homyakov]

Идентификатор DOM-элемента становится глобальной переменной. Для разметки из примера <button id="button">...</button> браузер создаст глобальную переменную window.button со ссылкой на DOM-элемент кнопки. Аналогичный вопрос с ответами есть на StackOverflow: https://stackoverflow.com/q/6381425/1235394