jQuery/CFDebugging One-Liner

Ok, so this is more proof of concept than actual usable code, but I thought it might be fun to write up during lunch. Have you ever encountered ColdFusion debugging code that 'leaked' into a pure CSS site? Most of us have. That was one of the main reasons behind the genesis of ColdFire. I was curious, though, to see if there was a jQuery way to manipulate the debug output. I opened up the debug template and found that the HTML started off with: (well, ignoring the CSS above it)

<table class="cfdebug" bgcolor="white">

So with that in mind, I whipped up the following jQuery one-liner. Now - if you have heard me present on jQuery, you know that I don't actually like seeing code like this. I find it hard to read and overly confusing to people knew to jQuery. Please do not consider this something I'm promoting. As I said, it was more a test than anything else.

$(document).ready(function() { $("table.cfdebug:first").hide().parent().append("<a href='' id='cfdebugtoggle'>[Toggle Debug]</a>").click(function() {$("table.cfdebug:first").toggle();return false}) })

Ok, technically that is more than one line, but I'm not counting the document.ready block. What this code does, in steps, is:

  • Find the first instance of a table with the class debug. (I had to find the first since internal tables also used the class.)
  • Hide it.
  • Go up to the parent and append some HTML.
  • For the HTML I just added, a link, add this new click handler.
  • And in the click handler, toggle the visibility of the debug table and return false.

Now when you load a page with ColdFusion debugging in it, you just get the link. Clicking it will open and close the debugging information. And to be clear - I didn't actually test this on a nice CSS-based web page because - well - I can't write nice CSS-based web pages. Not yet anyway.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.