Improved Cake PHP debug log messages CSS style

As much as I like the CakePHP DebugKit component it sometimes appears to cause PHP fatal errors to not be shown, leaving me scratching my head at a white screen. At which point I need to remove the component inclusion code to see what I have done wrong.

In search of a lighter weight solution I went to Google and found a nice CSS style for the class cake-sql-log that automatically hid the SQL log table thereby removing much of the CakePHP debug mode output.

However the problem with the style is that when working with a lot of queries it is too easy for the SQL log to fill up the whole screen and make it very difficult to view the queries. Therefore I have included my modified version below that creates a zoom effect on cells that makes readable only the cell that you are hovering over. The CSS styling code required are:

.cake-sql-log { font-family:monospace; position:fixed; top:99%; z-index:100000; width:100%; background:#000; color:#FFF; border-collapse:collapse; }
.cake-sql-log caption { background:#900; color:#FFF; }
.cake-sql-log:hover { top:auto; bottom:0; }
.cake-sql-log td { font-size:3px; padding:1px; border:1px solid #999; background:#FFF; color:#000; }
.cake-sql-log td:hover { font-size:10px; background:#FFA; }

When the style is applied the default view of the SQL log will just show a minimal red bar at the bottom of the window:

And when you hover over the red bar the full log will be shown as with only the hovered cell readable:


mark_story said...

What errors get trapped by DebugKit, I'm not aware of it capturing any notice/warning type errors.

Paul Chiu said...

Thanks for the correction Mark. It's definitely more of a server issue than a DebugKit issue. I have updated the post to be more reflective of my experience instead of placing blame on DebugKit. I will do some experiments with it soon and see if I can reproduce the problem.

Piotr Musialek said...

Nice and smart idea, but I noticed when I had over 40 queries I couldn't scroll and see some queries.

Post a Comment