Javascript Eval and Debugger

So you might be familiar with the javascript command: 'eval'. This lets you declare a string and 'eval' it to make it's contents "real" in terms of the JS DOM. It's kind of a way to create dynamic code. So for example, you can do this:

var styleToApply = 'fontColor = "blue"';
var evalString = 'document.all.SomeDiv.style.' + styleToApply;
eval(evalString);

Here you can see that I am affecting a DIV in the DOM. You can also do stuff like javascript this way as well.

var jsFunction = 'function Test() { alert("Hello"); }
eval(jsFunction);
Test();

Ok so that's cool. You might also have known that you can debug javascript in Visual Studio. Simply set a breakpoint, and fire up the debugger.

So now here's the cool thing I discovered this week. Did you know that if you were to breakpoint on the 2nd javascript example above, and "Step Into" the "Test()" method, it will actually step into that code? I new tab window opens called "Eval Code" which shows the javascript that you eval'ed previously, and you can step through that dynamic code just like you can with static javascript.

How cool is that! This becomes very useful in debugging ajax callbacks. In fact, this is how I discovered it in the first place. I had an ajax post that returned some HTML and some javascript. IE is notorious for bugs around returning styles and javascript in ajax that don't get applied to the DOM. So you have to work around it by 'eval'ing your returned javascript function to get it into the DOM.

Oh, did I mention that this was in VS2005 already?

Technorati Tags: VS2005, Javascript, eval, debuging