jQuery/CFDebugging One-Liner

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Jose Galdamez posted on 11/10/2009 at 11:58 PM

Nice work!

Between this, classic.cfm, dockable.cfm, and ColdFire it looks we've got a fair range of options for going through debug stats. I really wanted to get into the pop-up window (i.e. dockable) a while ago, but Chrome just wouldn't give it any love. That and it's super annoying when previewing pages in CF Builder.