Debugger extensions
Tracy is a great tool for debugging your application. However, you sometimes need more information than Tracy offers. You'll learn about:
- Creating your own Debugger bar panels
- Creating your own Bluescreen extensions
Debugger Bar extensions
Creating new extension for Debugger Bar is simple. You need to implement Tracy\IBarPanel
interface with methods
getTab()
and getPanel()
. The methods must return HTML code of a tab (small label on Debugger Bar) and a
panel (pop-up displayed after clicking on the tab). If getPanel()
returns nothing, only tab will be displayed. If
getTab()
returns nothing, nothing is displayed and getPanel()
will not be called.
class ExamplePanel extends Nette\Object implements Tracy\IBarPanel
{
public function getTab()
{
return ...;
}
public function getPanel()
{
return ...;
}
}
Registration
Registration is done by calling Tracy\Bar::addPanel()
:
Tracy\Debugger::getBar()->addPanel(new ExamplePanel);
or you can simply register your panel in application configuration:
nette:
debugger:
bar:
- ExamplePanel
Tab HTML code
Should look something like this:
<span title="Explaining tooltip">
<img src="data:image/png;base64,<encoded thumbnail image>" />
Title
</span>
For encoding images you can use Nette\Templating\DefaultHelpers::dataStream()
. If you don't need tooltip, you can
leave <span>
out.
Panel HTML code
Should look something like this:
<h1>Title</h1>
<div class="nette-inner">
... content ...
</div>
Title should either be the same as in tab or contain additional information.
One extension can be registered multiple times, so it's recommended not to use id
attribute for styling. You can
use classes, preferably in nette-addons-<class-name>[-<optional>]
format. When creating CSS, it's better
to use #nette-debug .class
, because such rule has higher priority than reset.
Default styles
In the panel, elements <a>
, <table>
, <pre>
, <code>
have default styles. You can also use .nette-hidden
and .nette-collapsed
for hidden elements. For
creating a link for hiding or displaying other element, connect them with rel
and id
attributes.
<a href='#' rel='#nette-addons-className-{$counter}'>Details ►</a>
<div id="nette-addons-className-{$counter}">...</div>
Use static counter to prevent duplicate IDs on one page.
Bluescreen extensions
You can add your own exception visualizations (a substitution for implementing IDebugPanel
) or panels, which will
appear on the (red) bluescreen.
Extension is made like this:
Tracy\Debugger::getBlueScreen()->addPanel(function($e) { // catched exception
return array(
'tab' => '...Title...',
'panel' => '...content...',
);
});
If the anonymous function returns nothing, panel won't be displayed. The function is called twice. First time with the catched
exception in parameter $e
and the panel is rendered on the top of the bluescreen. Second time with NULL
given in $e
and the panel is rendered in the bottom. You can force rendering in the bottom by returning
'bottom' => true
in the array. Fuction won't be rendered the first two times and will be called for the third time
with NULL
parameter.