How to ignore certain script files / lines when de

Question

I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).

Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.

What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?

Answer 1

In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.

This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.

Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.

Answer 2

Looks like you're looking for Visual Event.

Answer 3

If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events. This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:

var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) { 
    var h = v.handler; 
    v.handler = function() {
      // or use 'alert' or something here if no Dev Tools
      console.log('calling event: '+ i);
      console.log('event handler src: '+ h.toString()); 
      h.apply(h, arguments); 
    };
})

Then try calling the event type directly through jQuery to rule out that type:

$('#your_div').click()

Answer 4

You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.

In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.

Answer 5

You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)

You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.

Answer 6

If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop. Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.