11

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?

7
  • Do you have to use IE? Is it the only browser (surprise, surprise) exhibiting problematic behavior? Commented Jun 2, 2011 at 10:45
  • Yes unfortunately, it's the only browser with the problem - and some of the users still use it. :( Commented Jun 2, 2011 at 10:52
  • 2
    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)" help in finding the event listener(s)? Commented Jun 2, 2011 at 11:05
  • 1
    @outis. Yes, that is helpful. I'd still like to be able to skip pasts lines / files on a break on next etc. Commented Jun 3, 2011 at 8:33
  • 2
    Reason you can't use another browser to see what is called and apply what you learned in that browser to debugging in IE? Commented Jun 6, 2011 at 20:46

6 Answers 6

15

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.

Sign up to request clarification or add additional context in comments.

Comments

5
+50

Looks like you're looking for Visual Event.

Comments

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.

Comments

2

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

Comments

1

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.

Comments

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.

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.