Debugging javascript events

Question

Is there any way to have some kind of a call stack of events that occur on a web page?

After i added a select2 widget on a web page, I started experiencing lots of "too much recursion" errors but from what i can see in the code, there is no obvious event bubble issues (checked jQuery too much recursion)

The errors occur after clicking basically anywhere on the page (after a certain delay)

I tried preventing event bubble manually with event.stopPropagation but that doesn't seem to be doing any good.

I even wrote a bunch of console.log in every possible culprit but everything looks normal in the output.

So it would be really nice to have a quick way to track down what events are being called (on which nodes and if possible, what handlers are invoked).

Any ideas? Thanks.

Details:

Firebug error:

too much recursion

...s?3:4&s?2:0),e}},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!=...

Select 2 jQuery code:

$("#my-input").select2({
        width: 200,
        placeholder: "Enter a name",
        minimumInputLength: 0,
        ajax: {
            url: "/ajax/search",
            dataType: 'json',
            type: 'POST',
            data: function(term, page) {
                return {
                    q: term
                }
            },
            results: function(bond, page){
                return {
                    results: bond, 
                    more: false
                }
            }
        },
        formatResult: function(bond) {
            return '' + bond.name + ''
        },
        formatSelection: function(bond) {
            return bond.name
        },
        initSelection: function(elem, cb) {
            return elem
        }
    });

Stack trace in Chrome dev tools:

enter image description here

@elclanrs umm im not sure which one you are referring to but if it's the one in Chrome, yes i did, and the last 3 calls were to x.fn.extend.find, x.fn.x.init, x (updated question with a screenshot) — Dany Khalife
double check those lines and they point to the same snippet that firebug displayed. — Dany Khalife
You can try to skip through your code by adding debugger; before your select2-call... — yckart

Paul Sweatte Paul Sweatte · Accepted Answer · 2014-08-13T21:23:28

There are browser extensions which provide this functionality:

Debugging javascript events

1 Answers