« Back to blog

Blog: Element debugging with CakePHP's DebugKit

Graham Weldon

16 October, 2010

I recently attended PHP Matsuri 2010 and gave a presentation and workshop on CakePHP for the Japanese community. I was surprised to find the massive amount of plugins and resources they have created internally that are otherwise undiscovered or not well known in the larger community.

One of the plugins that was described to me was a panel that listed all the rendered elements for a page, so that designers and developers alike could see exactly what elements were being rendered for that page that is displayed. A very cool idea, and one that might be worthwhile building into DebugKit. I explained that there is something similar in DebugKit, that shows where elements start and finish. Again, to my surprise, no-one was aware of this handy little feature, so I'm going to explain it briefly.

Once DebugKit is enabled by placing the Toolbar component on your controller:

public $components = array( 'DebugKit.Toolbar' );

You can see immediately on rendering your page (if the debug level in core.php is set to 2) the DebugKit image in the top right of your page, and lot of information is made available there.

Further to the panels that are added, if you view your source, you will see that DebugKit has lovingly commented your HTML to indicate where elements begin and end. This is a most useful little feature that assists in debugging the output of elements in pages such as portal sites, that can get messy with a lot of markup in a small space.

Here is a screenshot of source from a site I have been working on at the Cake Development Corporation:

DebugKit comments HTML source to indicate element rendering positions.

Thats about all I have to say on the matter. DebugKit's element commenting feature helps me debug and dissect large and complex rendered views all the time, and I hope this helps you too.