Live with grace. Write superb software.

Have you ever tried to debug javascript that works on focus/blur events? The moment the breakpoint stops on your onFocus method, suddenly the blur event is thrown because hey, the debugger is now focused, and not your element.

And it's not only that, timer events, and others are really tricky to debug, and you would generally just want to trace expressions, preferrably without changing the underlying code.

How can you then create trace calls, to see various variable states?

Well it's relatively simple, we will add tracer breakpoints:

function log(what) {
    var currentTime = new Date().toString().replace(/.*(\d\d:\d\d:\d\d).*/, "$1");
    console.log(currentTime + " " + what);
    return false;

First we will simple evaluate the previous function in the web console of your favourite browser.

Now we can simply add a conditional breakpoint, with a condition such as:

log("X is: " + node.getX())

Since the breakpoint is evaluated in the context of the current stack, variables such as node will be accessible, if they are present in the code.

Also, since the function always returns false, the debugger won't stop there, thus no blur/focus events will be triggered.

If you also need a conditional breakpoint exactly at the line where the log is you can use as expression something along these lines:

log("X is: " + node.getX()) || !!(actualJsCheck)

Thus the log will take place, and since it's false, it will fallback in evaluating the actual value that you want the debugger to stop.

Pretty awesome.

Have fun debugging.

Disqus Comments

comments powered by Disqus


The one to rule them all. The browsers that is.


SharpKnight is an Android chess game.


MagicGroup is an eclipse plugin.