excellent js debug hack

2007-12-06 @ 21:23#

i just found an excellent javascript debugging hack described by Nic Ferrier in his blog post. it makes perfect sense, but i just never thought about doing it. frustrated by the lack of free solid debugging for MSIE, he came up with a simple fix - put a couple textareas and a button on the page and use the javascript eval() method to hack against the current page instance.

sweet!

i added a toggle button so that it is easy to add this as a 'plug-in' when i'm generated pages in test mode and then toggle it on/off when i need it. here's my version of his excellent hack:

<div id="debugger">
  <input type="button" value="toggle" onclick="document.getElementById('inner-debug').style.display = (document.getElementById('inner-debug').style.display=='none'?'block':'none');" />
  <div id="inner-debug">
    <textarea cols="50" rows="5" id="src"></textarea><br/>
    <button type="button" onclick="document.getElementById('output').value = new String(eval(document.getElementById('src').value));">eval</button><br/>
    <textarea cols="50" rows="2" id="output"></textarea>
  </div>
</div>

code