Как проверить, какие функции JavaScript были вызваны в Firebug

Оффтоп javascript
1

Нужна помощь с отслеживанием функций JavaScript

Я работаю над сложным веб-сайтом с множеством элементов интерфейса. На странице есть кнопки, ссылки и блоки div, которые реагируют на нажатия пользователей.

Мне нужно узнать, какая JavaScript функция срабатывает при нажатии на конкретный элемент. Как я могу отследить это в инструментах разработчика?

// Пример кода, который может быть на сайте
$('.menu-item').click(function() {
    executeMenuAction();
    refreshNavigation();
});

$('#main-content').on('click', '.product', function() {
    manageProductSelection(this);
});

Какой есть способ в инструментах разработчика увидеть все функции JavaScript, которые вызываются при клике на элемент? Мне нужен простой метод отслеживания выполнения кода.

2

проще всего через Sources в devtools - ставишь breakpoint на нужной строке (кликаешь по номеру слева). когда функция выполнится, браузер остановится и покажет весь стек вызовов справа. или можешь засунуть console.trace() прямо в функцию - выведет полный путь с номерами строк. реально удобно для отслеживания последовательности

3

или просто в Console пиши monitorEvents(document, 'click') - покажет все клики на странице с деталями. unmonitorEvents(document, 'click') чтобы остановить. знаешь селектор? тогда monitorEvents($('.menu-item')[0], 'click'). быстро найдешь что срабатывает

4

в Performance записывай профиль - жмешь record, кликаешь по элементу, стопаешь. в timeline видишь все функции, сколько времени заняли. кликаешь на функцию - переходишь в код. супер полезно при куче async операций или анимаций