Ironing code, geek t-shirts and even presentations!


The "Man in the Middle" Debugging Technique

When debugging web applications, every once in a while you find yourself wondering why an input field value is not what it's supposed to be. And the bigger the application, the harder to find the problematic piece of code responsible... Do not despair! in the web, like in the web, there's always a workaround... I call this debugging technique - the Man in the Middle technique.

So what's the problem, anyway?

Here's a sample code that reproduces the problem. You can also find it on jsfiddle:

The Solution

To find out who's moved your cheese, or changed your value for that matter, we're gonna take advantage of JavaScript's free spirit - the spirit that allows us to do whatever we want - delete defined objects, redefine them, and generally enjoy some dangerous fun when we want it.
For what we need we're going to redefine the input field's value property so we can set a breakpoint or write to console every time the value is changing. This is the entire trick... 
The main piece of code that enables our solution is this:
Object.defineProperty($("#foo").get(0),"value", { 
  set: function(val) { debugger; }

And this is the complete solution on jsfiddle:

And this is, dear readers, the Man in the Middle debugging technique.

All the best,

Comments (1) -

Jakub Gutkowski

basically, this can be applied to anything. i.e. testing for hyperlink clicks handler that does not work:

Event.prototype.preventDefault = function () { debugger; };

or, with chrome to break on function call:



Add comment