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!)
Conversation
http://www.firephp.org/ could be a nice solution.
I've been using FirePHP for some time, and i find it very useful for displaying unobtrusive debugging information, especially concerning asynchronous requests.
I've been using FirePHP for some time, and i find it very useful for displaying unobtrusive debugging information, especially concerning asynchronous requests.
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!
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.
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
This is great, thanks. I will be using this, or manipulating it often. Definitely makes the debugging far more tolerable!
CakePHP is simply amazing. Thanks for the tip, Jonathan!
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.
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
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.
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.
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!
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!
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)
You can always turn off debugging mode anyway.
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.
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