Use Debug CSS in CakePHP

The default layout that comes with CakePHP has some nice styling, especially for the debug table that appears at the bottom. But once you've created your own default layout, you'd have to come up with your own debug styles or copy over the ones from the Cake default.

I've done something in between the two. I've created a new stylesheet called debug.css and include it whenever debug mode is on. I add it to my layout like so:


I've copied over the debug table styles into this and prepended all of them to style only the #cakeSqlLog table.

Another thing I've done is used position:fixed to lock the debug table to the bottom of the page.

body {

table#cakeSqlLog {

#cakeSqlLog tbody {

One of the things to note here is the use of overflow on the tbody. Doing so limits the size of the debug table. Too many queries would make the table too long and interfere with what is underneath. So, I just keep it to a minimal height and allow it to scroll.

The other thing I've done is add extra margin to the bottom of the body so that long pages give me enough scroll bar to see the bottom of the page that would otherwise be covered by the debug table.

Debug Delight

If you felt really ambitious, you could even hook up some JavaScript and a button to show or hide the debug table.

Also, don't limit yourself to just styling the debug table. You could also add other styles that you'd use just for debugging like outlines on page elements or background grids. Then, if you inadvertently forgot to remove a style before going live, it wouldn't be an issue.

Published October 29, 2006
Categorized as CakePHP
Short URL:


6 Comments · RSS feed
Felix Geisend├â┬Ârfer said on October 29, 2006

Yeah, customizing the way debugging information is displayed within CakePHP is a good thing to do ; ).

Anyway, I see you are using the short tags syntax (<?= "text" ?>) for <?php echo "text" ?> in your example. That's fine as long as you deploy in enviornments that allow the usage of short tags, but when publishing / distributing code I'd recommend you to use the full syntax for portability reasons.

Hm, now I feel like one of those people who only comment on things to complain ... : /.

justin said on October 29, 2006

Boy, that's hard to read.
<?= DEBUG ? $html->css('debug') : ''; ?>

I feel better already ;)

Jonathan Snook said on October 29, 2006

Heh, sorry about that. :) I tend to be terse in my coding.

Jonathan Snook said on October 30, 2006

Felix: I've heard mention of that and while I haven't bothered with releasing anything on such a grand scale, what is the percentage of hosts that don't have short tags enabled? I much prefer it as it just seems a little too verbose.

Travis Cline said on September 03, 2007

Just a heads-up for 1.2 users -- the debug table doesn't have a predictable id -- the class is set to cakeSqlLog though (since r4915).

A little s/#cakeSqlLog/.cakeSqlLog/ action will get you in order though.

mzee.richo said on October 24, 2008

Nice stuff . Nice site . Nice ideas

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.