6

Working through some event routing right now and there's a lot of debugging steps.

I know about using "debugger" in the javascript and putting that after a conditional, and that is useful. I also know about right clicking a break point to add a test expression which is even better. However... I have no idea where this thing is going to take me and I am starting to wear out my function keys. Is there any way to add a breakpoint to a watch expression?

Basically the idea is this, within the enclosure scope, I want to check for a variable called "this.id". If this.id is the value I want, I enter the debugger.

Any ideas?

Thanks

Wanted to add that Didier's answer below solved my problem as they outlined in the article for decorating "Function". This will most likely be the path of least resistance for searching all functions for the value I want.

Function.prototype.debug = function(){   
   var fn = this; 
   return function(){     
       if (debugme) debugger; 
       return fn.apply(this, arguments);     
   }; 
};
Shane
  • 4,921
  • 5
  • 37
  • 53
  • 1
    Hi. This article explains how to begin debugger in firebug programmatically: [http://stackoverflow.com/questions/5271465/programmatically-control-breakpoints-in-javascript](http://stackoverflow.com/questions/5271465/programmatically-control-breakpoints-in-javascript) – Didier Ghys Nov 10 '11 at 09:35
  • very interesting... Can you state that as an "answer", that's directly relevant to what I'm trying to do. This gives me some tools for monitoring a "mutable enclosure" in the second part of the question where they talk about delegates. – Shane Nov 29 '11 at 13:59

3 Answers3

4

If you are referring to "conditional breakpoints", that is to say a breakpoint that only pauses execution when a statement is true, you can do this by right-clicking on a line of script, and selecting "Edit Breakpoint Condition...", then adding the statement you want to trigger the breakpoint, e.g., this.id === "foo";

d60402
  • 3,190
  • 2
  • 23
  • 28
  • 1
    Conditional breakpoints are a great tool and they have helped. Unfortunately my problem is I'm trying to map which components are getting routed through which functions. I was hoping for a way to monitor the call stack to see if this.id == "someValue" anywhere in the code. Probably not possible, but here's hoping. – Shane Nov 29 '11 at 14:13
4

To programmatically break on javascript code, you can use the following statement:

debugger;

This works in Firebug, Chrome's console and IE.

So following your question, you could do something like:

if (this.id === "myId")
    debugger;

The following article is pretty useful.

Community
  • 1
  • 1
Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
1

I'm not 100% clear on how what you need is different from a conditional breakpoint. e.g. adding

 var watchVar = this.id

then setting a condition for the breakpoint of 

watchVar == someInt

should work, no?

If not, you can break on property change by placing a normal breakpoint somewhere in the closure. When you hit it, look for this.id in the watch pane, right click it and choose 'break on property change'. At the moment, that's about as far as you can go, but it doesn't allow you to specify some id values and not others.

Matt Gibson
  • 14,616
  • 7
  • 47
  • 79
  • What I'm trying to do is break any time in the enclosure where this.id="someValue"; I've taken over a project and the problem is I'm not sure which functions are doing what yet. There's a lot of event routing, etc and probably some inefficiency as "step into" can take 200+ steps to get through an entire cycle. I was hoping to let the debugger identify when it's working with a particular module anywhere in the code. Is that what you are saying? I tried adding a watch expression of this.id="someValue"; and the debugger wasn't triggered but I might be missing something if that should work. – Shane Nov 29 '11 at 14:11
  • 1
    Yeah, that sounds like exactly what conditional breakpoints are supposed to do. You may have some difficulty with using the 'this' keyword as it can do odd things. Alternatively, you may be using closures/nested closures (e.g. jQuery), which may mangle FireBug's ability to debug the code due to scope issues. Also worth considering is whether your code is being overridden by other code. Try making more basic conditional breakpoints in other parts of the code, or with other variables and see if you can identify what conditions are failing to trigger the breakpoints. – Matt Gibson Nov 29 '11 at 14:26
  • Very useful info, thanks Matt. I think I'm going to see if I can get anywhere decorating the function object first, maybe even try to redefined "call" and "apply". I've seen threads on doing that before and even if it doesn't work (no idea if it will), it's a pretty interesting idea. – Shane Nov 29 '11 at 14:32