Как просмотреть события, срабатывающие на элементе в Chrome DevTools?

Чтобы установить точки останова на события в браузере, выполните следующие шаги:

1. Нажмите F12, чтобы открыть Инструменты разработчика.
2. Перейдите на вкладку "Sources" (Источники).
3. С правой стороны прокрутите вниз до раздела "Event Listener Breakpoints" (Точки останова для обработчиков событий) и разверните дерево.
4. Щелкните по событиям, которые хотите отслеживать.
5. Взаимодействуйте с целевым элементом; если события сработают, вы получите точку останова в отладчике.

Аналогично, вы можете щелкнуть правой кнопкой мыши на целевом элементе и выбрать "Inspect Element" (Проверить элемент). Прокрутите вниз на правой панели инструментов разработчика, внизу будет раздел 'event listeners' (обработчики событий). Разверните дерево, чтобы увидеть, какие события привязаны к элементу. Обратите внимание, что не уверен, сработает ли это для событий, обрабатываемых через всплытие (предполагаю, что нет).

Эта информация не будет отображать пользовательские события, такие как те, которые может создавать ваш скрипт, если это плагин jQuery. Например:

jQuery(function($){
 var ThingName = "Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
   $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Сработало пользовательское событие: 1", Event);
 });

});

В панели событий в разделе "Скрипты" инструментов разработчика Chrome не будет отображаться "Something:custom-event-one".

Чтобы вывести все обработчики событий на объекте window в Chrome, вы можете ввести команду window.getEventListeners(window). Если вам нужно посмотреть обработчики событий для конкретного элемента, например, для document.body, введите window.getEventListeners(document.body).

Несмотря на множество ответов (которые не совсем точные), правильный ответ на этот вопрос заключается в том, что вы не можете.

Невозможно заранее отслеживать все события.

Насколько мне известно, это также относится и к инструментам разработчика в браузере (по крайней мере, в Chrome).

Тем не менее, вы можете получить список стандартных имен событий с помощью следующего кода, однако это будет работать только при условии, что (1) имена событий всегда совпадают со старыми атрибутами событий и (2) имя события совпадает с именем атрибута (с префиксом "on"):

function getStandardEventNames(element) {
  const eventNames = [];
  for (const prop in element) {
    if (!prop.startsWith("on")) {
      continue;
    }

    const eventName = prop.slice(2); 
    try {
      new Event(eventName);
      eventNames.push(eventName);
    } catch {
      // если возникает ошибка, это недопустимое имя события
    }
  }

  return eventNames;
}

getStandardEventNames(document.body); // или window, или конкретный элемент

Затем вы можете использовать эту функцию с monitorEvents() (как упомянуто в другом ответе), но это, конечно, не будет работать для пользовательских событий.

Для пользовательских событий следующий код — это хитроумный способ решения этой задачи:

const originalEventDispatcher = Element.prototype.dispatchEvent;
Element.prototype.dispatchEvent = function(event) {
  console.log(`Dispatching ${event.type} event:`, event);
  return originalEventDispatcher.call(this, event);
};

Это работает на предпосылке, что пользовательские события и пользовательский код будут вызывать element.dispatchEvent — это не сработает для событий, вызванных браузером, например.