Today at work I found myself thinking there might be some possible way to toggle cfdebug output and came across this post:

http://www.raymondcamden.com/index.cfm/2009/11/10/jQueryCFDebugging-One-Liner

It offers what I had in mind with the following code:

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

As noted within the post, that is more for the concept rather than usable code. I played with it and updated it to something very much like the following:

$(document).on("click","#cfdebugtoggle",function() {
    $("table.cfdebug:first").toggle();
    return false;
}); 

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

The “.before()” is for placing this before all of the debugging. By appending it, as shown in the original, that drops the toggle link all the way to the bottom of the debugging output once it shown. The “.on()” function is because I tried .live() for the first time, which worked just fine, but documentation said it’s deprecated and “on()” should be used instead. The idea behind using it was because other links were doing toggling, and this binds that specific click event to that specific selector.