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:

<?=DEBUG?$html->css('debug'):'';?>

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 {
  margin-bottom:150px;
}

table#cakeSqlLog {
  position:fixed;
  bottom:0;
  margin:0;
}

#cakeSqlLog tbody {
  height:100px;
  overflow:scroll;
}

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.