CakePHP Debug Styles

I just wanted to document this somewhere but whenever I work on a CakePHP project, there's always the debug info that sits at the bottom of the page. It's big and bulky and once I'm off the default CakePHP styles, it's usually pretty ugly.

I've done various stylings but I finally took a moment to implement a really simple idea: Fixed position the table and then use hover styles to toggle the visibility. It's still not a perfect solution but darn close and certainly good enough for my needs right now.


.cake-sql-log {
	position:fixed;
	top:99%;
	z-index:10;
	width:100%;
	background-color:#000;
	color:#FFF;
	border-collapse:collapse;
}

.cake-sql-log caption {
	background-color:#900;
	color:#FFF;	
}

.cake-sql-log:hover {
	top:auto;
	bottom:0;
}

.cake-sql-log td {
	padding:3px;
	border:1px solid #999;
	background-color:#EEE;
	color:#000;
}

You'll see a red sliver at the bottom of your page and as you move your mouse over it, voila, there's your debug info. It'd be nice to actually have a Firebug plugin that could have CakePHP debug info pushed to it automatically. (Maybe one day I'll work on that!)

Published July 10, 2008
Categorized as CakePHP
Short URL: http://snook.ca/s/900

Conversation

18 Comments · RSS feed
Lucian Lature said on July 10, 2008

http://www.firephp.org/ could be a nice solution.

Victor Stanciu said on July 10, 2008

I've been using FirePHP for some time, and i find it very useful for displaying unobtrusive debugging information, especially concerning asynchronous requests.

Victor Stanciu said on July 10, 2008

I've been using FirePHP for some time, and i find it very useful for displaying unobtrusive debugging information, especially concerning asynchronous requests.

Stanton said on July 11, 2008

I just dropped this into the app i'm developing in Cake, as I get fed up of the ugly debugging info at the bottom, this worked like a charm! thanks!

Matt Curry said on July 11, 2008

If you're using multiple DBs this won't work since each set of queries gets displayed in it's own table, so they end up overlapping and you only see one. For most apps this works great and is a cool solution. Thanks.

Peter Butler said on July 11, 2008

Thank you Jonathon, absolutely love it, and will probably drop it into all my projects from now on.

Not heard of firePHP before so will take a look.

Keep up the great work

Andy Stratton said on July 11, 2008

This is great, thanks. I will be using this, or manipulating it often. Definitely makes the debugging far more tolerable!

Rafael Marin said on July 11, 2008

CakePHP is simply amazing. Thanks for the tip, Jonathan!

Dardo Sordi said on July 11, 2008

I'm using a modification of this: http://bin.cakephp.org/view/27213675 to get sql log in Firebug/FirebugLite console. Also it add's some context to the querys.

Here is mine: http://bin.cakephp.org/view/805996533

Basically, I've joined Grigri's and Sharkoon's code in there.

Tarique Sani said on July 12, 2008

Cool style - Thanks

I had to add margin-bottom: 0px to .cake-sql-log - my fault for having a non 0 bottom margin on tables but thought that it might help someone like me

Ray said on July 12, 2008

Good stuff. FYI - works like a charm on FF and Safari but I get a big floating debug block right smack in the middle of the screen with IE.

Mark Story said on July 12, 2008

Neat stuff Jonathan, will put it to good use in my next project.

@Ray: Do you really do debugging/development in IE? I can't think of a reason to do development in IE unless it is your only option. Getting the page design perfect is different, but looking at SQL logs isn't something that needs to work in IE.

primeminister said on July 15, 2008

Great thing! Only it bugs me sometines when I use firebug 'Inspect' it pops-up and hav to move the mouse out of the window to let it dissapear and work with that inspect.
But thnx for sharing!

Garret Bolthouse said on July 30, 2008

You my friend are a genius.

I've actually been thinking about putting together a whole debug platform for CakePHP just like what you're thinking with the css hover, only I want to use some jquery/jquery-ui and make a couple of tabs for some of the variables like $params and $this->data, even possibly the controller dump when Configure::read('debug') > 2. I think people would use it. I haven't really had the time to research how to make it into a plugin you can easily add to your app and disable when in production mode. Anyways, this'll definitely work for now!

Johan de jong said on July 31, 2008

Since I had the same problem - which is the hard coded debug output at the wrong place - I wrote a small modification to fix this. After a while I ended up with a complete controller which can be downloaded at my website: http://johan.notitia.nl/downloads (check CakeBug Component).

It's very simple to use and very easy to modify (which I'm also doing :D)

Smart Pad said on August 04, 2008

You can always turn off debugging mode anyway.

Neon1024 said on October 30, 2008

This lead me here, http://bakery.cakephp.org/articles/view/debugging-with-firephp

Seems like a good thing to learn to work with. I'm always keen on any tools that can help me to produce better code.

omelet du fromage said on November 01, 2008

Something already does exist that automatically reads the log (assuming its on in config.php) and sends it to Firebug every time you refresh. Sends other info too, like variables that you're passing to views, so you can see if they got set correctly. I haven't used it in a while, or with 1.2 yet though, so I don't know if it still works.

http://bakery.cakephp.org/articles/view/firecake-helper

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