mirror of
https://github.com/maximebf/php-debugbar.git
synced 2025-06-10 16:15:43 +02:00
first commit
This commit is contained in:
maximebf
commit
2972ea49c8
554
all.html
Normal file
554
all.html
Normal file
@ -0,0 +1,554 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>PHP Debug Bar</title>
|
||||
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
|
||||
<link type="text/css" rel="stylesheet" href="css/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/docs.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
|
||||
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/viewer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<a name="top" />
|
||||
|
||||
<header id="header">
|
||||
<h1><a href="">PHP Debug Bar</a></h1>
|
||||
</header>
|
||||
|
||||
<div id='content'><a name="php-debug-bar"></a><h1>PHP Debug Bar</h1>
|
||||
<p>Displays a debug bar in the browser with information from php.
|
||||
No more <code>var_dump()</code> in your code!
|
||||
|
||||
</p>
|
||||
<p><img src="docs/screenshot.png" alt="Screenshot">
|
||||
|
||||
</p>
|
||||
<p><strong>Features:</strong>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>Generic debug bar with no other dependencies</li>
|
||||
<li>Easy to integrate with any project</li>
|
||||
<li>Clean, fast and easy to use interface</li>
|
||||
<li>Handles AJAX request</li>
|
||||
<li>Includes generic data collectors and collectors for well known libraries</li>
|
||||
<li>The client side bar is 100% coded in javascript</li>
|
||||
<li>Easily create your own collectors and their associated view in the bar</li>
|
||||
</ul>
|
||||
<a name="installation"></a><h2>Installation</h2>
|
||||
<p>The easiest way to install DebugBar is using <a href="https://github.com/composer/composer">Composer</a>
|
||||
with the following requirement:
|
||||
|
||||
</p>
|
||||
<pre><code>{
|
||||
"require": {
|
||||
"maximebf/debugbar": ">=1.0.0"
|
||||
}
|
||||
}</code></pre>
|
||||
<p>Alternatively, you can <a href="https://github.com/maximebf/php-debugbar/zipball/master">download the archive</a>
|
||||
and add the src/ folder to PHP's include path:
|
||||
|
||||
</p>
|
||||
<pre><code>set_include_path('/path/to/src' . PATH_SEPARATOR . get_include_path());</code></pre>
|
||||
<p>DebugBar does not provide an autoloader but follows the <a href="https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-0.md">PSR-0 convention</a>.<br>You can use the following snippet to autoload ConsoleKit classes:
|
||||
|
||||
</p>
|
||||
<pre><code>spl_autoload_register(function($className) {
|
||||
if (substr($className, 0, 8) === 'DebugBar') {
|
||||
$filename = str_replace('\\', DIRECTORY_SEPARATOR, trim($className, '\\')) . '.php';
|
||||
require_once $filename;
|
||||
}
|
||||
});</code></pre>
|
||||
<a name="quick-start"></a><h2>Quick start</h2>
|
||||
<p>DebugBar is very easy to use and you can add it to any of your projets in no time.
|
||||
The easiest way is using the <code>render()</code> functions
|
||||
|
||||
</p>
|
||||
<pre><code><?php
|
||||
use DebugBar\StandardDebugBar;
|
||||
use DebugBar\Renderer\JavascriptRenderer;
|
||||
|
||||
$debugbar = new StandardDebugBar();
|
||||
$debugbarRenderer = $debugbar->getJavascriptRenderer();
|
||||
|
||||
$debugbar["messages"]->addMessage("hello world!");
|
||||
?>
|
||||
<html>
|
||||
<head>
|
||||
<?php echo $debugbarRenderer->renderHead() ?>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
<?php echo $debugbarRenderer->render() ?>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<p>The DebugBar uses DataCollectors to collect data from your PHP code. Some of them are
|
||||
automated but others are manual. Use the <code>DebugBar</code> like an array where keys are the
|
||||
collector names. In our previous example, we add a message to the <code>MessagesCollector</code>:
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar["messages"]->addMessage("hello world!");</code></pre>
|
||||
<p><code>StandardDebugBar</code> activates all bundled collectors:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>MemoryCollector</code> (<em>memory</em>)</li>
|
||||
<li><code>MessagesCollector</code> (<em>messages</em>)</li>
|
||||
<li><code>PhpInfoCollector</code> (<em>php</em>)</li>
|
||||
<li><code>RequestDataCollector</code> (<em>request</em>)</li>
|
||||
<li><code>TimeDataCollector</code> (<em>time</em>)</li>
|
||||
</ul>
|
||||
<p>Learn more about DebugBar in the <a href="">docs</a>.
|
||||
</p>
|
||||
|
||||
<a name="php-debug-bar"></a><h1>PHP Debug Bar</h1>
|
||||
<p>Displays a debug bar in the browser with information from php.
|
||||
No more <code>var_dump()</code> in your code!
|
||||
|
||||
</p>
|
||||
<p><img src="docs/screenshot.png" alt="Screenshot">
|
||||
|
||||
</p>
|
||||
<p><strong>Features:</strong>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>Generic debug bar with no other dependencies</li>
|
||||
<li>Easy to integrate with any project</li>
|
||||
<li>Clean, fast and easy to use interface</li>
|
||||
<li>Handles AJAX request</li>
|
||||
<li>Includes generic data collectors and collectors for well known libraries</li>
|
||||
<li>The client side bar is 100% coded in javascript</li>
|
||||
<li>Easily create your own collectors and their associated view in the bar</li>
|
||||
</ul>
|
||||
<a name="installation"></a><h2>Installation</h2>
|
||||
<p>The easiest way to install DebugBar is using <a href="https://github.com/composer/composer">Composer</a>
|
||||
with the following requirement:
|
||||
|
||||
</p>
|
||||
<pre><code>{
|
||||
"require": {
|
||||
"maximebf/debugbar": ">=1.0.0"
|
||||
}
|
||||
}</code></pre>
|
||||
<p>Alternatively, you can <a href="https://github.com/maximebf/php-debugbar/zipball/master">download the archive</a>
|
||||
and add the src/ folder to PHP's include path:
|
||||
|
||||
</p>
|
||||
<pre><code>set_include_path('/path/to/src' . PATH_SEPARATOR . get_include_path());</code></pre>
|
||||
<p>DebugBar does not provide an autoloader but follows the <a href="https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-0.md">PSR-0 convention</a>.<br>You can use the following snippet to autoload ConsoleKit classes:
|
||||
|
||||
</p>
|
||||
<pre><code>spl_autoload_register(function($className) {
|
||||
if (substr($className, 0, 8) === 'DebugBar') {
|
||||
$filename = str_replace('\\', DIRECTORY_SEPARATOR, trim($className, '\\')) . '.php';
|
||||
require_once $filename;
|
||||
}
|
||||
});</code></pre>
|
||||
<a name="quick-start"></a><h2>Quick start</h2>
|
||||
<p>DebugBar is very easy to use and you can add it to any of your projets in no time.
|
||||
The easiest way is using the <code>render()</code> functions
|
||||
|
||||
</p>
|
||||
<pre><code><?php
|
||||
use DebugBar\StandardDebugBar;
|
||||
use DebugBar\Renderer\JavascriptRenderer;
|
||||
|
||||
$debugbar = new StandardDebugBar();
|
||||
$debugbarRenderer = $debugbar->getJavascriptRenderer();
|
||||
|
||||
$debugbar["messages"]->addMessage("hello world!");
|
||||
?>
|
||||
<html>
|
||||
<head>
|
||||
<?php echo $debugbarRenderer->renderHead() ?>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
<?php echo $debugbarRenderer->render() ?>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<p>The DebugBar uses DataCollectors to collect data from your PHP code. Some of them are
|
||||
automated but others are manual. Use the <code>DebugBar</code> like an array where keys are the
|
||||
collector names. In our previous example, we add a message to the <code>MessagesCollector</code>:
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar["messages"]->addMessage("hello world!");</code></pre>
|
||||
<p><code>StandardDebugBar</code> activates all bundled collectors:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>MemoryCollector</code> (<em>memory</em>)</li>
|
||||
<li><code>MessagesCollector</code> (<em>messages</em>)</li>
|
||||
<li><code>PhpInfoCollector</code> (<em>php</em>)</li>
|
||||
<li><code>RequestDataCollector</code> (<em>request</em>)</li>
|
||||
<li><code>TimeDataCollector</code> (<em>time</em>)</li>
|
||||
</ul>
|
||||
<p>Learn more about DebugBar in the <a href="">docs</a>.
|
||||
</p>
|
||||
|
||||
<a name="collecting-data"></a><h1>Collecting Data</h1>
|
||||
<a name="using-collectors"></a><h2>Using collectors</h2>
|
||||
<p>Collectors can be added to your debug bar using <code>addCollector()</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar = new DebugBar();
|
||||
$debugbar->addCollector(new DataCollector\RequestDataCollector());</code></pre>
|
||||
<p>Each collector as a unique name as defined by its <code>getName()</code> method. You can
|
||||
access collectors using <code>getCollector($name)</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar->addCollector(new DataCollector\MessagesCollector());
|
||||
$debugbar->getCollector('messages')->addMessage("foobar");
|
||||
// or:
|
||||
$debugbar['messages']->addMessage("foobar");</code></pre>
|
||||
<p>Data will be collected from them when the debug bar is rendered. You can however
|
||||
collect the data earlier using <code>collect()</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar->collect();</code></pre>
|
||||
<a name="creating-collectors"></a><h2>Creating collectors</h2>
|
||||
<p>Collectors must implement the <code>DebugBar\DataCollector\DataCollectorInterface</code>. They
|
||||
may subclass <code>DebugBar\DataCollector\DataCollector</code> which provides utility methods.
|
||||
|
||||
</p>
|
||||
<p>Collectors must provide a <code>getName()</code> function returning their unique name and a
|
||||
<code>collect()</code> function returning some json-encodable data. The latter will be called at the
|
||||
same time the <code>DebugBar::collect()</code> method is called.
|
||||
|
||||
</p>
|
||||
<pre><code>class MyDataCollector extends DebugBar\DataCollector\DataCollector
|
||||
{
|
||||
public function collect()
|
||||
{
|
||||
return array("uniqid" => uniqid());
|
||||
}
|
||||
|
||||
public function getName()
|
||||
{
|
||||
return 'mycollector';
|
||||
}
|
||||
}
|
||||
|
||||
$debugbar->addCollector(new MyDataCollector());</code></pre>
|
||||
<p>This however won't show anything in the debug bar as no information are provided
|
||||
on how to display these data. You could do that manually as you'll see in later chapter
|
||||
or implement the <code>DebugBar\DataSource\Renderable</code> interface.
|
||||
|
||||
</p>
|
||||
<p>To implement it, you must define a <code>getWidgets()</code> function which returns an array
|
||||
of key/value pairs where key are control names and values control options as defined
|
||||
in <code>JavascriptRenderer::addControl($name, $options)</code> (see Rendering chapter).
|
||||
|
||||
</p>
|
||||
<pre><code>class MyDataCollector extends DebugBar\DataCollector\DataCollector implements DebugBar\DataCollector\Renderable
|
||||
{
|
||||
// ...
|
||||
|
||||
public function getWidgets()
|
||||
{
|
||||
return array(
|
||||
"mycollector" => array(
|
||||
"icon" => "cogs",
|
||||
"tooltip" => "uniqid()",
|
||||
"map" => "uniqid",
|
||||
"default" => "''"
|
||||
)
|
||||
);
|
||||
}
|
||||
}</code></pre>
|
||||
<p>This will have the result of adding a new indicator to the debug bar.
|
||||
|
||||
</p>
|
||||
<a name="included-collectors"></a><h2>Included collectors</h2>
|
||||
<ul>
|
||||
<li><code>MemoryCollector</code> (<em>memory</em>)</li>
|
||||
<li><code>MessagesCollector</code> (<em>messages</em>)</li>
|
||||
<li><code>PhpInfoCollector</code> (<em>php</em>)</li>
|
||||
<li><code>RequestDataCollector</code> (<em>request</em>)</li>
|
||||
<li><code>TimeDataCollector</code> (<em>time</em>)</li>
|
||||
</ul>
|
||||
|
||||
<a name="rendering"></a><h1>Rendering</h1>
|
||||
<p>Rendering is performed using the `DebugBar\JavascriptRenderer̀ class. It contains
|
||||
all the useful functions to included the needed assets and generate a debug bar.
|
||||
|
||||
</p>
|
||||
<pre><code>$renderer = $debugbar->getJavascriptRenderer();</code></pre>
|
||||
<a name="assets"></a><h2>Assets</h2>
|
||||
<p>The debug bar relies on some css and javascript files which needs to be included
|
||||
into your webpage. This can be done in two ways:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>Using <code>JavascriptRenderer::renderHead()</code> which will returns a string with
|
||||
the needed script and link tags</li>
|
||||
<li>Using <a href="https://github.com/kriswallsmith/assetic">Assetic</a> and
|
||||
<code>JavascriptRenderer::getAsseticCollection()</code></li>
|
||||
</ul>
|
||||
<p>I would recommend using the second method as Assetic is a very powerful asset
|
||||
manager but the first method is provided to quickly integrate the debug bar
|
||||
into any projets.
|
||||
|
||||
</p>
|
||||
<p>You can define the base url of your assets using <code>setBaseUrl()</code>. This is needed
|
||||
in 99% of cases. If you are using Assetic, you may have to change the base path
|
||||
of the assets if you moved the folder. This can be done using <code>setBasePath()</code>.
|
||||
|
||||
</p>
|
||||
<p>Using <code>renderHead()</code>:
|
||||
|
||||
</p>
|
||||
<pre><code><html>
|
||||
<head>
|
||||
...
|
||||
<?php echo $renderer->renderHead() ?>
|
||||
...
|
||||
</head>
|
||||
...
|
||||
</html></code></pre>
|
||||
<p>Using Assetic:
|
||||
|
||||
</p>
|
||||
<pre><code>list($cssCollection, $jsCollection) = $renderer->getAsseticCollection();</code></pre>
|
||||
<p>Note that you can only use the debug bar assets and manage the dependencies by yourself
|
||||
using <code>$renderer->setIncludeVendors(false)</code>.
|
||||
|
||||
</p>
|
||||
<a name="the-javascript-object"></a><h2>The javascript object</h2>
|
||||
<p>The renderer will generate all the needed code for your debug bar. This means
|
||||
initializing the DebugBar js object, adding tabs and indicators, defining a data map, etc...
|
||||
|
||||
</p>
|
||||
<p>Data collectors can provide their own controls when implementing the
|
||||
<code>DebugBar\DataCollector\Renderable</code> interface as explained in the Collecting Data chapter.
|
||||
|
||||
</p>
|
||||
<p>Thus in almost all cases, you should only have to use <code>render()</code> right away:
|
||||
|
||||
</p>
|
||||
<pre><code><html>
|
||||
...
|
||||
<body>
|
||||
<?php echo $renderer->render() ?>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<p>This will print the initilization code for the toolbar and the dataset for the request.
|
||||
When you are performing AJAX requests, you do not want to initialize a new toolbar but
|
||||
add the dataset to the existing one. You can disable initialization using ̀false<code> as
|
||||
the first argument of ̀render()</code>.
|
||||
|
||||
</p>
|
||||
<pre><code><p>my ajax content</p>
|
||||
<?php echo $renderer->render(false) ?></code></pre>
|
||||
<a name="controlling-object-initialization"></a><h3>Controlling object initialization</h3>
|
||||
<p>You can further control the initialization of the javascript object using <code>setInitialization()</code>.
|
||||
It takes a bitwise value made out of the constants ̀INITIALIZE_CONSTRUCTOR<code> and </code>INITIALIZE_CONTROLS<code>.
|
||||
The first one controls whether to initialize the variable (ie. </code>var debugbar = new DebugBar()`). The
|
||||
second one whether to initialize all the controls (ie. adding tab and indicators as well as data mapping).
|
||||
|
||||
</p>
|
||||
<p>You can also control the class name of the object using <code>setJavascriptClass()</code> and the name of
|
||||
the instance variable using <code>setVariableName()</code>.
|
||||
|
||||
</p>
|
||||
<p>Let's say you have subclassed <code>PhpDebugBar.DebugBar</code> in javascript to do your own initilization.
|
||||
Your new object is called <code>MyDebugBar</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$renderer->setJavascriptClass("MyDebugBar");
|
||||
$renderer->setInitialization(JavascriptRenderer::INITIALIZE_CONSTRUCTOR);
|
||||
// ...
|
||||
echo $renderer->render();</code></pre>
|
||||
<p>This has the result of printing:
|
||||
|
||||
</p>
|
||||
<pre><code><script type="text/javascript">
|
||||
var phpdebugbar = new MyDebugBar();
|
||||
phpdebugbar.addDataSet({ ... });
|
||||
</script></code></pre>
|
||||
<p>Using <code>setInitialization(0)</code> will only render the addDataSet part.
|
||||
|
||||
</p>
|
||||
<a name="defining-controls"></a><h3>Defining controls</h3>
|
||||
<p>Controls can be manually added to the debug bar using <code>addControl($name, $options)</code>. You should read
|
||||
the Javascript bar chapter before this section.
|
||||
|
||||
</p>
|
||||
<p><code>$name</code> will be the name of your control and <code>$options</code> is a key/value pair array with these
|
||||
possible values:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><em>icon</em>: icon name</li>
|
||||
<li><em>tooltip</em>: string</li>
|
||||
<li><em>widget</em>: widget class name</li>
|
||||
<li><em>map</em>: a property name from the data to map the control to</li>
|
||||
<li><em>default</em>: a js string, default value of the data map</li>
|
||||
</ul>
|
||||
<p>At least <em>icon</em> or <em>widget</em> are needed. If <em>widget</em> is specified, a tab will be created, otherwise
|
||||
an indicator.
|
||||
|
||||
</p>
|
||||
<pre><code>$renderer->addControl('messages', array(
|
||||
"widget" => "PhpDebugBar.Widgets.MessagesWidget",
|
||||
"map" => "messages",
|
||||
"default" => "[]"
|
||||
));</code></pre>
|
||||
|
||||
<a name="javascript-bar"></a><h1>Javascript Bar</h1>
|
||||
<p>The default client side implementation of the debug bar is made
|
||||
entirely in Javascript and is located in the <em>debugbar.js</em> file.
|
||||
|
||||
</p>
|
||||
<p>It adds a bottom-anchored bar which can have tabs and indicators.
|
||||
The bar can be in an open or close state. When open, the tab panel is
|
||||
visible.
|
||||
An indicator is a piece of information displayed in the always-visible
|
||||
part of the bar.
|
||||
|
||||
</p>
|
||||
<p>The bar handles multiple datasets by displaying a select box
|
||||
which allows you to switch between them.
|
||||
|
||||
</p>
|
||||
<p>The state of the bar (height, visibilty, active panel) can be saved
|
||||
between requests (enabled in the standard bar).
|
||||
|
||||
</p>
|
||||
<p>Each panel is composed of a widget which is used to display the
|
||||
data from a data collector. Some common widgets are provided in
|
||||
the <em>widgets.js</em> file.
|
||||
|
||||
</p>
|
||||
<p>The <code>PhpDebugBar</code> namespace is used for all objects and the only
|
||||
dependencies are <em>jQuery</em>, <em>jquery-drag</em> and <em>FontAwesome</em> (css).
|
||||
|
||||
</p>
|
||||
<p>The main class is <code>PhpDebugBar.DebugBar</code>. It provides the infrastructure
|
||||
to manage tabs, indicators and datasets.
|
||||
|
||||
</p>
|
||||
<p>When initialized, the <code>DebugBar</code> class adds itself to the <code><body></code> of the
|
||||
page. It is empty by default.
|
||||
|
||||
</p>
|
||||
<a name="tabs-and-indicators"></a><h2>Tabs and indicators</h2>
|
||||
<p>Controls (ie. tabs and indicators) are uniquely named. You can check if
|
||||
a control exists using <code>isControl(name)</code>.
|
||||
|
||||
</p>
|
||||
<p>Tabs can be added using the <code>createTab(name, widget, title)</code> function.
|
||||
The third argument is optional and will be computed from the name if not
|
||||
provided.
|
||||
|
||||
</p>
|
||||
<pre><code>var debugbar = new PhpDebugBar.DebugBar();
|
||||
debugbar.createTab("messages", new PhpDebugBar.Widgets.MessagesWidget());</code></pre>
|
||||
<p>Indicators can be added using <code>createIndicator(name, icon, tooltip, position)</code>.
|
||||
Only <code>name</code> is required in this case. <code>icon</code> should be the name of a FontAwesome
|
||||
icon. <code>position</code> can either by <em>right</em> (default) or <em>left</em>.
|
||||
|
||||
</p>
|
||||
<pre><code>debugbar.createIndicator("time", "cogs", "Request duration");</code></pre>
|
||||
<p>You may have noticed that the data to use inside these controls is not
|
||||
specified at the moment. Although it could be specified when initialized, it
|
||||
is better to use data mapping to support dynamically changing the data set.
|
||||
|
||||
</p>
|
||||
<a name="data-mapping"></a><h2>Data mapping</h2>
|
||||
<p>To enable dynamically changing the data sets, we need to specify which values
|
||||
should be feed into which controls. This can be done using <code>setDataMap(map)</code>
|
||||
which takes as argument an object where properties are control names. Values
|
||||
should be arrays where the first item is the property from the data set and
|
||||
the second a default value.
|
||||
|
||||
</p>
|
||||
<pre><code>debugbar.setDataMap({
|
||||
"messages": ["messages", []],
|
||||
"time": ["time.duration_str", "0ms"]
|
||||
});</code></pre>
|
||||
<p>You can notice that nested properties can also be accessed using the dot
|
||||
notation.
|
||||
|
||||
</p>
|
||||
<p>In this mapping, <code>data["messages"]</code> will be fed to the <em>messages</em> tab
|
||||
and <code>data["time"]["duration_str"]</code> will be fed to the <em>time</em> indicator.
|
||||
|
||||
</p>
|
||||
<p>Note: you can append mapping info using <code>addDataMap(map)</code>
|
||||
|
||||
</p>
|
||||
<a name="datasets"></a><h2>Datasets</h2>
|
||||
<p>Although you shouldn't have to do anything regarding managing datasets,
|
||||
it is interesting to know a few functions related to them.
|
||||
|
||||
</p>
|
||||
<p><code>addDataSet(data, id)</code> adds a dataset to the bar. The select box that
|
||||
allows to swtich between sets is only displayed if more than one are added.
|
||||
<code>id</code> is optional and will be auto-generated if not specified.
|
||||
|
||||
</p>
|
||||
<p><code>showDataSet(id)</code> allows you to switch to a specific dataset.
|
||||
|
||||
</p>
|
||||
<a name="widgets"></a><h2>Widgets</h2>
|
||||
<p>A widget is a javascript object which must contain at least an <code>element</code>
|
||||
property. <code>element</code>'s value will be appended to the tab panel.
|
||||
|
||||
</p>
|
||||
<p>Widgets should provide a <code>setData()</code> function so they can be used with
|
||||
the data mapper.
|
||||
|
||||
</p>
|
||||
<pre><code>var MyWidget = function() {
|
||||
this.element = $('<div class="mywidget" />');
|
||||
};
|
||||
|
||||
MyWidget.prototype.setData = function(text) {
|
||||
this.element.text(text);
|
||||
};
|
||||
|
||||
// ----
|
||||
|
||||
debugbar.createTab("mytab", new MyWidget());
|
||||
debugbar.addDataMap({"mytab": ["mydata", ""]});</code></pre>
|
||||
<p>Widgets for bundled data collectors are included as well as more generic
|
||||
widgets that you can build on top of. They are located in <em>widgets.js</em> in
|
||||
the <code>PhpDebugBar.Widgets</code> namespace.
|
||||
|
||||
</p>
|
||||
<p>Generic widgets:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>ListWidget</code>: renders an array as a UL list</li>
|
||||
<li><code>KVListWidget</code>: renders a hash as a DL list</li>
|
||||
<li><code>VariablesListWidget</code>: an extension of <code>KVListWidget</code> to display a list of variables</li>
|
||||
<li><code>IFrameWidget</code>: renders an iframe</li>
|
||||
</ul>
|
||||
<p>Data collectors related widgets:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>MessagesWidget</code>: for the <code>MessagesCollector</code></li>
|
||||
<li><code>TimelineWidget</code>: for the <code>TimeDataCollector</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<footer id="footer">
|
||||
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
|
||||
<a href="#top">Back to top</a> - <a href="all.html">Everything on a single page</a>
|
||||
- <a href="?print=1">Print current page</a> - <a href="all.html?print=1">Print all pages</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
195
css/docs.css
Normal file
195
css/docs.css
Normal file
@ -0,0 +1,195 @@
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
min-width: 1100px;
|
||||
}
|
||||
#header {
|
||||
background: #f7f7f7;
|
||||
background: -moz-linear-gradient(top, #f7f7f7 0%, #e0e0e0 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #e0e0e0));
|
||||
border-bottom: 3px solid #bbbbbb;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
}
|
||||
#header h1 {
|
||||
font-family: 'Droid Sans', arial, serif;
|
||||
font-size: 45px;
|
||||
line-height: 50px;
|
||||
text-shadow: #444 1px 1px 2px;
|
||||
}
|
||||
#header h1 a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
#header #menu {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 20px;
|
||||
}
|
||||
#header #menu a {
|
||||
background: #f78d1d;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
|
||||
background: -moz-linear-gradient(top, #faa51a, #f47a20);
|
||||
border: 1px solid #da7c0c;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
text-decoration: none;
|
||||
}
|
||||
#sidebar {
|
||||
border-right: 1px solid #cccccc;
|
||||
float: left;
|
||||
padding: 30px;
|
||||
width: 230px;
|
||||
}
|
||||
#sidebar input#search {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding: 4px 0;
|
||||
width: 100%;
|
||||
}
|
||||
#sidebar #toc li {
|
||||
font-size: 16px;
|
||||
margin: 14px 0px;
|
||||
}
|
||||
#sidebar #toc li a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
}
|
||||
#sidebar #toc > ol > li {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#sidebar #toc > ol > li li {
|
||||
font-weight: normal;
|
||||
margin-left: 15px;
|
||||
}
|
||||
#sidebar #toc > ol > li li a {
|
||||
color: #777;
|
||||
}
|
||||
#content {
|
||||
border-left: 1px solid #cccccc;
|
||||
color: #444;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
padding: 10px 40px 80px 30px;
|
||||
width: 700px;
|
||||
}
|
||||
#content h1 {
|
||||
font-size: 32px;
|
||||
line-height: 35px;
|
||||
margin: 15px 0 25px 0;
|
||||
}
|
||||
#content h2 {
|
||||
border-bottom: 2px solid #ccc;
|
||||
font-size: 24px;
|
||||
margin: 30px 0 15px 0;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
#content p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
#content a {
|
||||
color: #d08708;
|
||||
text-decoration: none;
|
||||
}
|
||||
#content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#content ul,
|
||||
#content ol {
|
||||
list-style: disc;
|
||||
margin-left: 30px;
|
||||
}
|
||||
#content ul li,
|
||||
#content ol li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
#content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
#content pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
#content code {
|
||||
overflow: auto;
|
||||
}
|
||||
#content .note {
|
||||
background: #f3f3f3;
|
||||
border: 2px solid #ccc;
|
||||
padding: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
#content .warning {
|
||||
background: #fdeeee;
|
||||
border: 2px solid #d24d4d;
|
||||
padding: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
#content .tip {
|
||||
background: #fffbe2;
|
||||
border: 2px solid #e5cc24;
|
||||
padding: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
#content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#content table {
|
||||
width: 100%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
#content table th {
|
||||
color: #555;
|
||||
background: #efefef;
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-left: 1px solid #bbb;
|
||||
}
|
||||
#content table th:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
#content table td {
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
#content table td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
#footer {
|
||||
border-top: 1px solid #cccccc;
|
||||
clear: both;
|
||||
color: #999;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
#footer a {
|
||||
color: #999;
|
||||
}
|
||||
#fork-me-on-github {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 149px;
|
||||
height: 149px;
|
||||
text-indent: -9999px;
|
||||
background: url(../img/github_forkme.png) no-repeat;
|
||||
}
|
||||
16
css/print.css
Normal file
16
css/print.css
Normal file
@ -0,0 +1,16 @@
|
||||
#header {
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
#switch {
|
||||
display: none;
|
||||
}
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
#content {
|
||||
border: 0;
|
||||
}
|
||||
#footer {
|
||||
display: none;
|
||||
}
|
||||
105
css/reset.css
Normal file
105
css/reset.css
Normal file
@ -0,0 +1,105 @@
|
||||
/* v1.0 | 20080212 */
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
font,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
/* remember to define focus styles! */
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
/* remember to highlight inserts somehow! */
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
230
data-collectors.html
Normal file
230
data-collectors.html
Normal file
@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>PHP Debug Bar</title>
|
||||
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
|
||||
<link type="text/css" rel="stylesheet" href="css/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/docs.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
|
||||
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/viewer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<a name="top" />
|
||||
|
||||
<header id="header">
|
||||
<h1><a href="">PHP Debug Bar</a></h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<nav id="toc">
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#php-debug-bar">PHP Debug Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#installation">Installation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#quick-start">Quick start</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#collecting-data">Collecting Data</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#using-collectors">Using collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#creating-collectors">Creating collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#included-collectors">Included collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#rendering">Rendering</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#assets">Assets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#the-javascript-object">The javascript object</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#javascript-bar">Javascript Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#data-mapping">Data mapping</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#datasets">Datasets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#widgets">Widgets</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<article id="content">
|
||||
<a name="collecting-data"></a><h1>Collecting Data</h1>
|
||||
<a name="using-collectors"></a><h2>Using collectors</h2>
|
||||
<p>Collectors can be added to your debug bar using <code>addCollector()</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar = new DebugBar();
|
||||
$debugbar->addCollector(new DataCollector\RequestDataCollector());</code></pre>
|
||||
<p>Each collector as a unique name as defined by its <code>getName()</code> method. You can
|
||||
access collectors using <code>getCollector($name)</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar->addCollector(new DataCollector\MessagesCollector());
|
||||
$debugbar->getCollector('messages')->addMessage("foobar");
|
||||
// or:
|
||||
$debugbar['messages']->addMessage("foobar");</code></pre>
|
||||
<p>Data will be collected from them when the debug bar is rendered. You can however
|
||||
collect the data earlier using <code>collect()</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar->collect();</code></pre>
|
||||
<a name="creating-collectors"></a><h2>Creating collectors</h2>
|
||||
<p>Collectors must implement the <code>DebugBar\DataCollector\DataCollectorInterface</code>. They
|
||||
may subclass <code>DebugBar\DataCollector\DataCollector</code> which provides utility methods.
|
||||
|
||||
</p>
|
||||
<p>Collectors must provide a <code>getName()</code> function returning their unique name and a
|
||||
<code>collect()</code> function returning some json-encodable data. The latter will be called at the
|
||||
same time the <code>DebugBar::collect()</code> method is called.
|
||||
|
||||
</p>
|
||||
<pre><code>class MyDataCollector extends DebugBar\DataCollector\DataCollector
|
||||
{
|
||||
public function collect()
|
||||
{
|
||||
return array("uniqid" => uniqid());
|
||||
}
|
||||
|
||||
public function getName()
|
||||
{
|
||||
return 'mycollector';
|
||||
}
|
||||
}
|
||||
|
||||
$debugbar->addCollector(new MyDataCollector());</code></pre>
|
||||
<p>This however won't show anything in the debug bar as no information are provided
|
||||
on how to display these data. You could do that manually as you'll see in later chapter
|
||||
or implement the <code>DebugBar\DataSource\Renderable</code> interface.
|
||||
|
||||
</p>
|
||||
<p>To implement it, you must define a <code>getWidgets()</code> function which returns an array
|
||||
of key/value pairs where key are control names and values control options as defined
|
||||
in <code>JavascriptRenderer::addControl($name, $options)</code> (see Rendering chapter).
|
||||
|
||||
</p>
|
||||
<pre><code>class MyDataCollector extends DebugBar\DataCollector\DataCollector implements DebugBar\DataCollector\Renderable
|
||||
{
|
||||
// ...
|
||||
|
||||
public function getWidgets()
|
||||
{
|
||||
return array(
|
||||
"mycollector" => array(
|
||||
"icon" => "cogs",
|
||||
"tooltip" => "uniqid()",
|
||||
"map" => "uniqid",
|
||||
"default" => "''"
|
||||
)
|
||||
);
|
||||
}
|
||||
}</code></pre>
|
||||
<p>This will have the result of adding a new indicator to the debug bar.
|
||||
|
||||
</p>
|
||||
<a name="included-collectors"></a><h2>Included collectors</h2>
|
||||
<ul>
|
||||
<li><code>MemoryCollector</code> (<em>memory</em>)</li>
|
||||
<li><code>MessagesCollector</code> (<em>messages</em>)</li>
|
||||
<li><code>PhpInfoCollector</code> (<em>php</em>)</li>
|
||||
<li><code>RequestDataCollector</code> (<em>request</em>)</li>
|
||||
<li><code>TimeDataCollector</code> (<em>time</em>)</li>
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
<footer id="footer">
|
||||
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
|
||||
<a href="#top">Back to top</a> - <a href="all.html">Everything on a single page</a>
|
||||
- <a href="?print=1">Print current page</a> - <a href="all.html?print=1">Print all pages</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
docs/screenshot.png
Normal file
BIN
docs/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
img/github_forkme.png
Normal file
BIN
img/github_forkme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
234
index.html
Normal file
234
index.html
Normal file
@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>PHP Debug Bar</title>
|
||||
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
|
||||
<link type="text/css" rel="stylesheet" href="css/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/docs.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
|
||||
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/viewer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<a name="top" />
|
||||
|
||||
<header id="header">
|
||||
<h1><a href="">PHP Debug Bar</a></h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<nav id="toc">
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#php-debug-bar">PHP Debug Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#installation">Installation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#quick-start">Quick start</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#collecting-data">Collecting Data</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#using-collectors">Using collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#creating-collectors">Creating collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#included-collectors">Included collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#rendering">Rendering</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#assets">Assets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#the-javascript-object">The javascript object</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#javascript-bar">Javascript Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#data-mapping">Data mapping</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#datasets">Datasets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#widgets">Widgets</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<article id="content">
|
||||
<a name="php-debug-bar"></a><h1>PHP Debug Bar</h1>
|
||||
<p>Displays a debug bar in the browser with information from php.
|
||||
No more <code>var_dump()</code> in your code!
|
||||
|
||||
</p>
|
||||
<p><img src="docs/screenshot.png" alt="Screenshot">
|
||||
|
||||
</p>
|
||||
<p><strong>Features:</strong>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>Generic debug bar with no other dependencies</li>
|
||||
<li>Easy to integrate with any project</li>
|
||||
<li>Clean, fast and easy to use interface</li>
|
||||
<li>Handles AJAX request</li>
|
||||
<li>Includes generic data collectors and collectors for well known libraries</li>
|
||||
<li>The client side bar is 100% coded in javascript</li>
|
||||
<li>Easily create your own collectors and their associated view in the bar</li>
|
||||
</ul>
|
||||
<a name="installation"></a><h2>Installation</h2>
|
||||
<p>The easiest way to install DebugBar is using <a href="https://github.com/composer/composer">Composer</a>
|
||||
with the following requirement:
|
||||
|
||||
</p>
|
||||
<pre><code>{
|
||||
"require": {
|
||||
"maximebf/debugbar": ">=1.0.0"
|
||||
}
|
||||
}</code></pre>
|
||||
<p>Alternatively, you can <a href="https://github.com/maximebf/php-debugbar/zipball/master">download the archive</a>
|
||||
and add the src/ folder to PHP's include path:
|
||||
|
||||
</p>
|
||||
<pre><code>set_include_path('/path/to/src' . PATH_SEPARATOR . get_include_path());</code></pre>
|
||||
<p>DebugBar does not provide an autoloader but follows the <a href="https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-0.md">PSR-0 convention</a>.<br>You can use the following snippet to autoload ConsoleKit classes:
|
||||
|
||||
</p>
|
||||
<pre><code>spl_autoload_register(function($className) {
|
||||
if (substr($className, 0, 8) === 'DebugBar') {
|
||||
$filename = str_replace('\\', DIRECTORY_SEPARATOR, trim($className, '\\')) . '.php';
|
||||
require_once $filename;
|
||||
}
|
||||
});</code></pre>
|
||||
<a name="quick-start"></a><h2>Quick start</h2>
|
||||
<p>DebugBar is very easy to use and you can add it to any of your projets in no time.
|
||||
The easiest way is using the <code>render()</code> functions
|
||||
|
||||
</p>
|
||||
<pre><code><?php
|
||||
use DebugBar\StandardDebugBar;
|
||||
use DebugBar\Renderer\JavascriptRenderer;
|
||||
|
||||
$debugbar = new StandardDebugBar();
|
||||
$debugbarRenderer = $debugbar->getJavascriptRenderer();
|
||||
|
||||
$debugbar["messages"]->addMessage("hello world!");
|
||||
?>
|
||||
<html>
|
||||
<head>
|
||||
<?php echo $debugbarRenderer->renderHead() ?>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
<?php echo $debugbarRenderer->render() ?>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<p>The DebugBar uses DataCollectors to collect data from your PHP code. Some of them are
|
||||
automated but others are manual. Use the <code>DebugBar</code> like an array where keys are the
|
||||
collector names. In our previous example, we add a message to the <code>MessagesCollector</code>:
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar["messages"]->addMessage("hello world!");</code></pre>
|
||||
<p><code>StandardDebugBar</code> activates all bundled collectors:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>MemoryCollector</code> (<em>memory</em>)</li>
|
||||
<li><code>MessagesCollector</code> (<em>messages</em>)</li>
|
||||
<li><code>PhpInfoCollector</code> (<em>php</em>)</li>
|
||||
<li><code>RequestDataCollector</code> (<em>request</em>)</li>
|
||||
<li><code>TimeDataCollector</code> (<em>time</em>)</li>
|
||||
</ul>
|
||||
<p>Learn more about DebugBar in the <a href="">docs</a>.
|
||||
</p>
|
||||
|
||||
</article>
|
||||
|
||||
<footer id="footer">
|
||||
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
|
||||
<a href="#top">Back to top</a> - <a href="all.html">Everything on a single page</a>
|
||||
- <a href="?print=1">Print current page</a> - <a href="all.html?print=1">Print all pages</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
287
javascript-bar.html
Normal file
287
javascript-bar.html
Normal file
@ -0,0 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>PHP Debug Bar</title>
|
||||
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
|
||||
<link type="text/css" rel="stylesheet" href="css/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/docs.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
|
||||
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/viewer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<a name="top" />
|
||||
|
||||
<header id="header">
|
||||
<h1><a href="">PHP Debug Bar</a></h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<nav id="toc">
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#php-debug-bar">PHP Debug Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#installation">Installation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#quick-start">Quick start</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#collecting-data">Collecting Data</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#using-collectors">Using collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#creating-collectors">Creating collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#included-collectors">Included collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#rendering">Rendering</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#assets">Assets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#the-javascript-object">The javascript object</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#javascript-bar">Javascript Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#data-mapping">Data mapping</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#datasets">Datasets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#widgets">Widgets</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<article id="content">
|
||||
<a name="javascript-bar"></a><h1>Javascript Bar</h1>
|
||||
<p>The default client side implementation of the debug bar is made
|
||||
entirely in Javascript and is located in the <em>debugbar.js</em> file.
|
||||
|
||||
</p>
|
||||
<p>It adds a bottom-anchored bar which can have tabs and indicators.
|
||||
The bar can be in an open or close state. When open, the tab panel is
|
||||
visible.
|
||||
An indicator is a piece of information displayed in the always-visible
|
||||
part of the bar.
|
||||
|
||||
</p>
|
||||
<p>The bar handles multiple datasets by displaying a select box
|
||||
which allows you to switch between them.
|
||||
|
||||
</p>
|
||||
<p>The state of the bar (height, visibilty, active panel) can be saved
|
||||
between requests (enabled in the standard bar).
|
||||
|
||||
</p>
|
||||
<p>Each panel is composed of a widget which is used to display the
|
||||
data from a data collector. Some common widgets are provided in
|
||||
the <em>widgets.js</em> file.
|
||||
|
||||
</p>
|
||||
<p>The <code>PhpDebugBar</code> namespace is used for all objects and the only
|
||||
dependencies are <em>jQuery</em>, <em>jquery-drag</em> and <em>FontAwesome</em> (css).
|
||||
|
||||
</p>
|
||||
<p>The main class is <code>PhpDebugBar.DebugBar</code>. It provides the infrastructure
|
||||
to manage tabs, indicators and datasets.
|
||||
|
||||
</p>
|
||||
<p>When initialized, the <code>DebugBar</code> class adds itself to the <code><body></code> of the
|
||||
page. It is empty by default.
|
||||
|
||||
</p>
|
||||
<a name="tabs-and-indicators"></a><h2>Tabs and indicators</h2>
|
||||
<p>Controls (ie. tabs and indicators) are uniquely named. You can check if
|
||||
a control exists using <code>isControl(name)</code>.
|
||||
|
||||
</p>
|
||||
<p>Tabs can be added using the <code>createTab(name, widget, title)</code> function.
|
||||
The third argument is optional and will be computed from the name if not
|
||||
provided.
|
||||
|
||||
</p>
|
||||
<pre><code>var debugbar = new PhpDebugBar.DebugBar();
|
||||
debugbar.createTab("messages", new PhpDebugBar.Widgets.MessagesWidget());</code></pre>
|
||||
<p>Indicators can be added using <code>createIndicator(name, icon, tooltip, position)</code>.
|
||||
Only <code>name</code> is required in this case. <code>icon</code> should be the name of a FontAwesome
|
||||
icon. <code>position</code> can either by <em>right</em> (default) or <em>left</em>.
|
||||
|
||||
</p>
|
||||
<pre><code>debugbar.createIndicator("time", "cogs", "Request duration");</code></pre>
|
||||
<p>You may have noticed that the data to use inside these controls is not
|
||||
specified at the moment. Although it could be specified when initialized, it
|
||||
is better to use data mapping to support dynamically changing the data set.
|
||||
|
||||
</p>
|
||||
<a name="data-mapping"></a><h2>Data mapping</h2>
|
||||
<p>To enable dynamically changing the data sets, we need to specify which values
|
||||
should be feed into which controls. This can be done using <code>setDataMap(map)</code>
|
||||
which takes as argument an object where properties are control names. Values
|
||||
should be arrays where the first item is the property from the data set and
|
||||
the second a default value.
|
||||
|
||||
</p>
|
||||
<pre><code>debugbar.setDataMap({
|
||||
"messages": ["messages", []],
|
||||
"time": ["time.duration_str", "0ms"]
|
||||
});</code></pre>
|
||||
<p>You can notice that nested properties can also be accessed using the dot
|
||||
notation.
|
||||
|
||||
</p>
|
||||
<p>In this mapping, <code>data["messages"]</code> will be fed to the <em>messages</em> tab
|
||||
and <code>data["time"]["duration_str"]</code> will be fed to the <em>time</em> indicator.
|
||||
|
||||
</p>
|
||||
<p>Note: you can append mapping info using <code>addDataMap(map)</code>
|
||||
|
||||
</p>
|
||||
<a name="datasets"></a><h2>Datasets</h2>
|
||||
<p>Although you shouldn't have to do anything regarding managing datasets,
|
||||
it is interesting to know a few functions related to them.
|
||||
|
||||
</p>
|
||||
<p><code>addDataSet(data, id)</code> adds a dataset to the bar. The select box that
|
||||
allows to swtich between sets is only displayed if more than one are added.
|
||||
<code>id</code> is optional and will be auto-generated if not specified.
|
||||
|
||||
</p>
|
||||
<p><code>showDataSet(id)</code> allows you to switch to a specific dataset.
|
||||
|
||||
</p>
|
||||
<a name="widgets"></a><h2>Widgets</h2>
|
||||
<p>A widget is a javascript object which must contain at least an <code>element</code>
|
||||
property. <code>element</code>'s value will be appended to the tab panel.
|
||||
|
||||
</p>
|
||||
<p>Widgets should provide a <code>setData()</code> function so they can be used with
|
||||
the data mapper.
|
||||
|
||||
</p>
|
||||
<pre><code>var MyWidget = function() {
|
||||
this.element = $('<div class="mywidget" />');
|
||||
};
|
||||
|
||||
MyWidget.prototype.setData = function(text) {
|
||||
this.element.text(text);
|
||||
};
|
||||
|
||||
// ----
|
||||
|
||||
debugbar.createTab("mytab", new MyWidget());
|
||||
debugbar.addDataMap({"mytab": ["mydata", ""]});</code></pre>
|
||||
<p>Widgets for bundled data collectors are included as well as more generic
|
||||
widgets that you can build on top of. They are located in <em>widgets.js</em> in
|
||||
the <code>PhpDebugBar.Widgets</code> namespace.
|
||||
|
||||
</p>
|
||||
<p>Generic widgets:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>ListWidget</code>: renders an array as a UL list</li>
|
||||
<li><code>KVListWidget</code>: renders a hash as a DL list</li>
|
||||
<li><code>VariablesListWidget</code>: an extension of <code>KVListWidget</code> to display a list of variables</li>
|
||||
<li><code>IFrameWidget</code>: renders an iframe</li>
|
||||
</ul>
|
||||
<p>Data collectors related widgets:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>MessagesWidget</code>: for the <code>MessagesCollector</code></li>
|
||||
<li><code>TimelineWidget</code>: for the <code>TimeDataCollector</code></li>
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
<footer id="footer">
|
||||
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
|
||||
<a href="#top">Back to top</a> - <a href="all.html">Everything on a single page</a>
|
||||
- <a href="?print=1">Print current page</a> - <a href="all.html?print=1">Print all pages</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
13
js/viewer.js
Normal file
13
js/viewer.js
Normal file
@ -0,0 +1,13 @@
|
||||
// Generated by CoffeeScript 1.4.0
|
||||
(function() {
|
||||
|
||||
$(function() {
|
||||
$('#content pre code').each(function(i, el) {
|
||||
return hljs.highlightBlock(el);
|
||||
});
|
||||
if (window.location.search.indexOf('print') !== -1) {
|
||||
return window.print();
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this);
|
||||
234
readme.html
Normal file
234
readme.html
Normal file
@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>PHP Debug Bar</title>
|
||||
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
|
||||
<link type="text/css" rel="stylesheet" href="css/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/docs.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
|
||||
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/viewer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<a name="top" />
|
||||
|
||||
<header id="header">
|
||||
<h1><a href="">PHP Debug Bar</a></h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<nav id="toc">
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#php-debug-bar">PHP Debug Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#installation">Installation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#quick-start">Quick start</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#collecting-data">Collecting Data</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#using-collectors">Using collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#creating-collectors">Creating collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#included-collectors">Included collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#rendering">Rendering</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#assets">Assets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#the-javascript-object">The javascript object</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#javascript-bar">Javascript Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#data-mapping">Data mapping</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#datasets">Datasets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#widgets">Widgets</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<article id="content">
|
||||
<a name="php-debug-bar"></a><h1>PHP Debug Bar</h1>
|
||||
<p>Displays a debug bar in the browser with information from php.
|
||||
No more <code>var_dump()</code> in your code!
|
||||
|
||||
</p>
|
||||
<p><img src="docs/screenshot.png" alt="Screenshot">
|
||||
|
||||
</p>
|
||||
<p><strong>Features:</strong>
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>Generic debug bar with no other dependencies</li>
|
||||
<li>Easy to integrate with any project</li>
|
||||
<li>Clean, fast and easy to use interface</li>
|
||||
<li>Handles AJAX request</li>
|
||||
<li>Includes generic data collectors and collectors for well known libraries</li>
|
||||
<li>The client side bar is 100% coded in javascript</li>
|
||||
<li>Easily create your own collectors and their associated view in the bar</li>
|
||||
</ul>
|
||||
<a name="installation"></a><h2>Installation</h2>
|
||||
<p>The easiest way to install DebugBar is using <a href="https://github.com/composer/composer">Composer</a>
|
||||
with the following requirement:
|
||||
|
||||
</p>
|
||||
<pre><code>{
|
||||
"require": {
|
||||
"maximebf/debugbar": ">=1.0.0"
|
||||
}
|
||||
}</code></pre>
|
||||
<p>Alternatively, you can <a href="https://github.com/maximebf/php-debugbar/zipball/master">download the archive</a>
|
||||
and add the src/ folder to PHP's include path:
|
||||
|
||||
</p>
|
||||
<pre><code>set_include_path('/path/to/src' . PATH_SEPARATOR . get_include_path());</code></pre>
|
||||
<p>DebugBar does not provide an autoloader but follows the <a href="https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-0.md">PSR-0 convention</a>.<br>You can use the following snippet to autoload ConsoleKit classes:
|
||||
|
||||
</p>
|
||||
<pre><code>spl_autoload_register(function($className) {
|
||||
if (substr($className, 0, 8) === 'DebugBar') {
|
||||
$filename = str_replace('\\', DIRECTORY_SEPARATOR, trim($className, '\\')) . '.php';
|
||||
require_once $filename;
|
||||
}
|
||||
});</code></pre>
|
||||
<a name="quick-start"></a><h2>Quick start</h2>
|
||||
<p>DebugBar is very easy to use and you can add it to any of your projets in no time.
|
||||
The easiest way is using the <code>render()</code> functions
|
||||
|
||||
</p>
|
||||
<pre><code><?php
|
||||
use DebugBar\StandardDebugBar;
|
||||
use DebugBar\Renderer\JavascriptRenderer;
|
||||
|
||||
$debugbar = new StandardDebugBar();
|
||||
$debugbarRenderer = $debugbar->getJavascriptRenderer();
|
||||
|
||||
$debugbar["messages"]->addMessage("hello world!");
|
||||
?>
|
||||
<html>
|
||||
<head>
|
||||
<?php echo $debugbarRenderer->renderHead() ?>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
<?php echo $debugbarRenderer->render() ?>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<p>The DebugBar uses DataCollectors to collect data from your PHP code. Some of them are
|
||||
automated but others are manual. Use the <code>DebugBar</code> like an array where keys are the
|
||||
collector names. In our previous example, we add a message to the <code>MessagesCollector</code>:
|
||||
|
||||
</p>
|
||||
<pre><code>$debugbar["messages"]->addMessage("hello world!");</code></pre>
|
||||
<p><code>StandardDebugBar</code> activates all bundled collectors:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>MemoryCollector</code> (<em>memory</em>)</li>
|
||||
<li><code>MessagesCollector</code> (<em>messages</em>)</li>
|
||||
<li><code>PhpInfoCollector</code> (<em>php</em>)</li>
|
||||
<li><code>RequestDataCollector</code> (<em>request</em>)</li>
|
||||
<li><code>TimeDataCollector</code> (<em>time</em>)</li>
|
||||
</ul>
|
||||
<p>Learn more about DebugBar in the <a href="">docs</a>.
|
||||
</p>
|
||||
|
||||
</article>
|
||||
|
||||
<footer id="footer">
|
||||
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
|
||||
<a href="#top">Back to top</a> - <a href="all.html">Everything on a single page</a>
|
||||
- <a href="?print=1">Print current page</a> - <a href="all.html?print=1">Print all pages</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
275
rendering.html
Normal file
275
rendering.html
Normal file
@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>PHP Debug Bar</title>
|
||||
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin">
|
||||
<link type="text/css" rel="stylesheet" href="css/reset.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/docs.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
|
||||
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/viewer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<a name="top" />
|
||||
|
||||
<header id="header">
|
||||
<h1><a href="">PHP Debug Bar</a></h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<nav id="toc">
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#php-debug-bar">PHP Debug Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#installation">Installation</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="readme.html#quick-start">Quick start</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#collecting-data">Collecting Data</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#using-collectors">Using collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#creating-collectors">Creating collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="data-collectors.html#included-collectors">Included collectors</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#rendering">Rendering</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#assets">Assets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="rendering.html#the-javascript-object">The javascript object</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#javascript-bar">Javascript Bar</a>
|
||||
|
||||
|
||||
<ol>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#data-mapping">Data mapping</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#datasets">Datasets</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="javascript-bar.html#widgets">Widgets</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<article id="content">
|
||||
<a name="rendering"></a><h1>Rendering</h1>
|
||||
<p>Rendering is performed using the `DebugBar\JavascriptRenderer̀ class. It contains
|
||||
all the useful functions to included the needed assets and generate a debug bar.
|
||||
|
||||
</p>
|
||||
<pre><code>$renderer = $debugbar->getJavascriptRenderer();</code></pre>
|
||||
<a name="assets"></a><h2>Assets</h2>
|
||||
<p>The debug bar relies on some css and javascript files which needs to be included
|
||||
into your webpage. This can be done in two ways:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li>Using <code>JavascriptRenderer::renderHead()</code> which will returns a string with
|
||||
the needed script and link tags</li>
|
||||
<li>Using <a href="https://github.com/kriswallsmith/assetic">Assetic</a> and
|
||||
<code>JavascriptRenderer::getAsseticCollection()</code></li>
|
||||
</ul>
|
||||
<p>I would recommend using the second method as Assetic is a very powerful asset
|
||||
manager but the first method is provided to quickly integrate the debug bar
|
||||
into any projets.
|
||||
|
||||
</p>
|
||||
<p>You can define the base url of your assets using <code>setBaseUrl()</code>. This is needed
|
||||
in 99% of cases. If you are using Assetic, you may have to change the base path
|
||||
of the assets if you moved the folder. This can be done using <code>setBasePath()</code>.
|
||||
|
||||
</p>
|
||||
<p>Using <code>renderHead()</code>:
|
||||
|
||||
</p>
|
||||
<pre><code><html>
|
||||
<head>
|
||||
...
|
||||
<?php echo $renderer->renderHead() ?>
|
||||
...
|
||||
</head>
|
||||
...
|
||||
</html></code></pre>
|
||||
<p>Using Assetic:
|
||||
|
||||
</p>
|
||||
<pre><code>list($cssCollection, $jsCollection) = $renderer->getAsseticCollection();</code></pre>
|
||||
<p>Note that you can only use the debug bar assets and manage the dependencies by yourself
|
||||
using <code>$renderer->setIncludeVendors(false)</code>.
|
||||
|
||||
</p>
|
||||
<a name="the-javascript-object"></a><h2>The javascript object</h2>
|
||||
<p>The renderer will generate all the needed code for your debug bar. This means
|
||||
initializing the DebugBar js object, adding tabs and indicators, defining a data map, etc...
|
||||
|
||||
</p>
|
||||
<p>Data collectors can provide their own controls when implementing the
|
||||
<code>DebugBar\DataCollector\Renderable</code> interface as explained in the Collecting Data chapter.
|
||||
|
||||
</p>
|
||||
<p>Thus in almost all cases, you should only have to use <code>render()</code> right away:
|
||||
|
||||
</p>
|
||||
<pre><code><html>
|
||||
...
|
||||
<body>
|
||||
<?php echo $renderer->render() ?>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<p>This will print the initilization code for the toolbar and the dataset for the request.
|
||||
When you are performing AJAX requests, you do not want to initialize a new toolbar but
|
||||
add the dataset to the existing one. You can disable initialization using ̀false<code> as
|
||||
the first argument of ̀render()</code>.
|
||||
|
||||
</p>
|
||||
<pre><code><p>my ajax content</p>
|
||||
<?php echo $renderer->render(false) ?></code></pre>
|
||||
<a name="controlling-object-initialization"></a><h3>Controlling object initialization</h3>
|
||||
<p>You can further control the initialization of the javascript object using <code>setInitialization()</code>.
|
||||
It takes a bitwise value made out of the constants ̀INITIALIZE_CONSTRUCTOR<code> and </code>INITIALIZE_CONTROLS<code>.
|
||||
The first one controls whether to initialize the variable (ie. </code>var debugbar = new DebugBar()`). The
|
||||
second one whether to initialize all the controls (ie. adding tab and indicators as well as data mapping).
|
||||
|
||||
</p>
|
||||
<p>You can also control the class name of the object using <code>setJavascriptClass()</code> and the name of
|
||||
the instance variable using <code>setVariableName()</code>.
|
||||
|
||||
</p>
|
||||
<p>Let's say you have subclassed <code>PhpDebugBar.DebugBar</code> in javascript to do your own initilization.
|
||||
Your new object is called <code>MyDebugBar</code>.
|
||||
|
||||
</p>
|
||||
<pre><code>$renderer->setJavascriptClass("MyDebugBar");
|
||||
$renderer->setInitialization(JavascriptRenderer::INITIALIZE_CONSTRUCTOR);
|
||||
// ...
|
||||
echo $renderer->render();</code></pre>
|
||||
<p>This has the result of printing:
|
||||
|
||||
</p>
|
||||
<pre><code><script type="text/javascript">
|
||||
var phpdebugbar = new MyDebugBar();
|
||||
phpdebugbar.addDataSet({ ... });
|
||||
</script></code></pre>
|
||||
<p>Using <code>setInitialization(0)</code> will only render the addDataSet part.
|
||||
|
||||
</p>
|
||||
<a name="defining-controls"></a><h3>Defining controls</h3>
|
||||
<p>Controls can be manually added to the debug bar using <code>addControl($name, $options)</code>. You should read
|
||||
the Javascript bar chapter before this section.
|
||||
|
||||
</p>
|
||||
<p><code>$name</code> will be the name of your control and <code>$options</code> is a key/value pair array with these
|
||||
possible values:
|
||||
|
||||
</p>
|
||||
<ul>
|
||||
<li><em>icon</em>: icon name</li>
|
||||
<li><em>tooltip</em>: string</li>
|
||||
<li><em>widget</em>: widget class name</li>
|
||||
<li><em>map</em>: a property name from the data to map the control to</li>
|
||||
<li><em>default</em>: a js string, default value of the data map</li>
|
||||
</ul>
|
||||
<p>At least <em>icon</em> or <em>widget</em> are needed. If <em>widget</em> is specified, a tab will be created, otherwise
|
||||
an indicator.
|
||||
|
||||
</p>
|
||||
<pre><code>$renderer->addControl('messages', array(
|
||||
"widget" => "PhpDebugBar.Widgets.MessagesWidget",
|
||||
"map" => "messages",
|
||||
"default" => "[]"
|
||||
));</code></pre>
|
||||
|
||||
</article>
|
||||
|
||||
<footer id="footer">
|
||||
Powered by <a href="http://github.com/maximebf/beautiful-docs">beautiful-docs</a> -
|
||||
<a href="#top">Back to top</a> - <a href="all.html">Everything on a single page</a>
|
||||
- <a href="?print=1">Print current page</a> - <a href="all.html?print=1">Print all pages</a>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user