For a more visual DebugKit

DebugKit is a very useful tool to debug you cakephp pages. You can view variables passed to the views, sql queries etc … but it requires opening the panel. More than often, we’re interested in a ‘summary’ more than the details.

What if it looks like that instead, a la github

The toolbar will not be hidden anymore, and will always stick to the top.

Panels title will be replaced by a summary of its content, and fall into 2 categories :

The important one

It’s all the panels with stats and other stuff that matters to the current page.

  • Variables panel‘s title display the number of variables set by the controller, excluding global variables, like title_for_layout, $this->validationErrors, $request->data and Loaded Helpers.
  • Sql panel‘s title show the total number of sql queries, and the time taken
  • Time panel‘s title show the peak memory use and the request time

Contents of the panels remain unchanged, just the panels title are changed.

Note that the Cache, Jobs and NoSql panels are my own panels, and not included in DebugKit, you can found them in DebugKitEx. Cache Panel could be useful to anyone :

The others

All the others panels, deemed less important, with the title downgraded to a simple icon, since there’s not enough width. They’re :

  • History panel
  • Session panel
  • Request panel
  • Logs panel
  • Environment
  • Included files

Panels importance is arbitrary, and based on my taste. But a panel can be easily upgraded via the $priority variable.

Each panel will have a new $priority var, defining its importance.

  • 0 means not important, display like an icon on the left side
  • 1 and greater will put the panel on the right side, with a more detailed title.

Upgrading/Downgrading a panel can then be done in the controller :

public $components = array(
    'DebugKit.Toolbar' => array(
        'panels' => array('history' => array('priority) => 1)
    )
);

$priority could be used to re-order the panels order.

Current issues

  • Panel’s title are set before view rendering. This causes problem for the timer panel, because the timer is stopped way before the end, and the displayed time and memory consumption is not accurate anymore.
  • Icons title uses FontAwesome, and are not semantic. And each panels must define which icon to use.

Try it

A beta is available here. I will try to discuss incorporating these changes with Mark Story, and maybe, who knows, you’ll see these features in DebugKit one day :P.