How to ignore certain script files / lines when debugging?

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?

Do you have to use IE? Is it the only browser (surprise, surprise) exhibiting problematic behavior? — outis, Jun 02 '11 at 10:45
Yes unfortunately, it's the only browser with the problem - and some of the users still use it. :( — Michael, Jun 02 '11 at 10:52
Then that kills my idea. Chrome's debugger is oh-so-nice in this regard, as it lets you break on specific DOM events. You mention jQuery; does ["How to debug Javascript/jQuery event bindings with FireBug (or similar tool)"](http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool) help in finding the event listener(s)? — outis, Jun 02 '11 at 11:05
@outis. Yes, that is helpful. I'd still like to be able to skip pasts lines / files on a break on next etc. — Michael, Jun 03 '11 at 08:33
Reason you can't use another browser to see what is called and apply what you learned in that browser to debugging in IE? — epascarello, Jun 06 '11 at 20:46
Because slightly different style and script is executed, dependent on which browser the site is running in - to fix bugs and style issues etc. I've inherited it, and there's too much to rewrite at this stage. — Michael, Jun 07 '11 at 01:16

score 16 · Accepted Answer · answered Sep 26 '13 at 15:17

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.

score 5 · Answer 2 · answered Jun 04 '11 at 17:01

5

Looks like you're looking for Visual Event.

answered Jun 04 '11 at 17:01

pawlik

2,385
19
18

score 5 · Answer 3 · answered Jun 09 '11 at 09:00

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.

score 2 · Answer 4 · answered Jun 04 '11 at 16:56

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()

score 1 · Answer 5 · answered Jun 07 '11 at 12:45

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.

score 0 · Answer 6 · answered Jun 02 '11 at 11:21

0

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.

answered Jun 02 '11 at 11:21

AjayR

4,169
4
44
78

2

The problem is I don't know (even remotely) where I need the breakpoint. The site uses several script files and each can contain hundreds of lines of code. – Michael Jun 02 '11 at 11:38

How to ignore certain script files / lines when debugging?

6 Answers6

Linked