How to customize fusebox 5.5 debugging output
posted under category: Fusebox on November 21, 2007 by Nathan
Recently, I made my first contribution to the Fusebox core files (Previous contributions were in the form of lexicons, which are valuable add-ons but not core files). My change was just an update to the HTML rendered from the Fusebox 5.5 debugging trace output.
The older debugging output had hard-coded styles on the tags, and no identifying overall element. If you wanted to change or fix a style, or even the entire block, there was really no good, reliable way to do it, short of modifying the Fusebox core files. With ColdFusion debugging output, you can use the .cfdebug selector to change the server debugging, but no such luck for Fusebox.
It's a superficial, mild annoyance, at best, but still a spot for improvement, so, I made the change and submitted it in an issue to the Fusebox Trac site.
For this change, I created a small style sheet, removed the inline styles, made some default styles and added an identifiable container for the block.
Now, how can you change the display?
The style sheet I made has a handful of styles that all start with .fuseboxdebug. With CSS, if you make a more specific selector, you can override options in the less specific selectors. A selector and style such as .fuseboxdebug h3 {color:green; background:blue;} will be overwritten by div.fuseboxdebug h3 {color:red}. The resulting h3 style from these examples will have red text on a blue background.
So, if you want to do something like hide the debugging output using CSS (Sean Corfield says you can do it in Fusebox with myFusebox.showDebug = false), the code would be:div.fuseboxdebug {display:none;}
Some added benefits include the download size of the debugging output, cut in half, and it should stay a little more consistent across different site designs all while being customizable. See, CSS is good all around.
PS - Fusebox 5.5 is due out December 1st, and it's been perfectly stable with my 4.x and 5.x apps.