6

I've got a pretty big complicated HTML5 app I'm working on (backbone, marionette, jQuery, underscore, handlebars, bootstrap, etc) and deep within the app is a modal popup with a form in it.

When the modal pops open, the first time you click on any form field the form field de-selects itself. After that first click you can use the form as normal. When the app is ultimately loaded into an iFrame in production (don't ask) the first time you click on any form field or hover over any button, the whole page scrolls down until the top of the div element the form is within inside of the modal is at the top of the page, but after it does this once, it doesn't do it again (confused yet? Yeah, it's complex and layered).

I'm at a loss for how to even begin debugging this problem (thousands of lines of code, two handfuls of libraries).

I tried these:

console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events'));
console.dir($('#elmId').data('events'));
console.log('bound events: ', $._data($('body')[0], 'events'));

But that yielded nothing.

Since this is library upon library upon framework upon framework I'm not even sure where to begin trying to find the thing that has obviously bound itself to these fields, or even if it is the fields that are being bound to or something else entirely...

So, any suggestions on good strategies for how to debug a mysteriously bound Javascript event (with multiple JS libraries and frameworks, which can't be just commented out until the problem resolves because they are relied upon to even get the HTML to appear on the page in the first place)?

And, unfortunately I can't do a jsfiddle or something because, as I said, this is deep deep within the app and I'd basically have to re-create the app inside of JSFiddle (impossible) to link to an example (and, it's not in an external facing site, so, I can't just link to it live in production).

I'm stumped.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
cmcculloh
  • 47,596
  • 40
  • 105
  • 130
  • It isn't particularly elegant, but as a quick hack to solve this specific problem could you grep for anything that is specific/unique to the popup? – kwah Mar 02 '13 at 23:51
  • 1
    Relevant: http://stackoverflow.com/questions/1558569/firefox-extension-to-find-out-which-javascript-event-is-bound-to-an-inspected-el – kwah Mar 02 '13 at 23:55

1 Answers1

11

Here's how I do it with Chrome.

  1. Ctrl-Shift-J to open Javascript console.

  2. Click the little magnifying glass in bottom left, it lets you select an element with your mouse.

    Click magnifying glass

  3. Click an element on your page (it will highlight as you go to it.) It will highlight in the DOM at the bottom and show a bunch of properties on the bottom right.

  4. At the bottom right go all the way past the CSS attributes and stuff down to event listeners:

    ???

  5. Pick the event listener you're interested in. It will show you the bound function as well as the exact line of code in what script would be executed. That should tell you what library is doing your crazy stuff.

    Profit!

I find the Chrome debugger to be much more powerful and fast (doesn't lag) compared to FireBug and the IE developer tools. It's highly recommended :)

Andrew Mao
  • 35,740
  • 23
  • 143
  • 224
  • Useful; but [knowing that jquery is listening](http://ad7six.com/dump/events.png) doesn't help much most of the time. – AD7six Mar 03 '13 at 00:24
  • This is great! I always have the css expanded all the way and never noticed there was stuff under it! Thanks! I tried this and set breakpoints in every bound event and never found the event that was causing this unwanted behaviour. I eventually gave up and moved the form out of the modal and the problem ceased, so, I'm moving on... – cmcculloh Mar 03 '13 at 19:22
  • Make sure you check parent containers too...bound all the way up to body, document, etc. – Andrew Mao Mar 03 '13 at 20:34