mirror of
https://github.com/maximebf/php-debugbar.git
synced 2025-06-10 08:05:49 +02:00
478 lines
15 KiB
HTML
478 lines
15 KiB
HTML
<!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="/docs/assets/css/reset.css">
|
|
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
|
<link type="text/css" rel="stylesheet" href="/docs/assets/css/docs.css">
|
|
<link type="text/css" rel="stylesheet" href="/docs/assets/css/print.css" media="print">
|
|
<link type="text/css" rel="stylesheet" href="style.css">
|
|
|
|
<script type="text/javascript" src="/docs/assets/js/jquery-1.10.1.min.js"></script>
|
|
<script type="text/javascript" src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
|
|
<script type="text/javascript" src="/docs/assets/js/lunr.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">var BASE_URL = "/docs/";</script>
|
|
<script type="text/javascript" src="/docs/assets/js/viewer.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
<a name="top" />
|
|
<header id="header">
|
|
<h1><a href="/docs/">PHP Debug Bar</a></h1>
|
|
</header>
|
|
|
|
|
|
<div id="sidebar">
|
|
<form action="/docs/search.html"><input id="search" type="text" placeholder="Search" name="q" /></form>
|
|
<nav id="toc">
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/readme.html#php-debug-bar">PHP Debug Bar</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/readme.html#installation">Installation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/readme.html#quick-start">Quick start</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/data-collectors.html#collecting-data">Collecting Data</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/data-collectors.html#using-collectors">Using collectors</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/data-collectors.html#creating-collectors">Creating collectors</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/rendering.html#rendering">Rendering</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/rendering.html#assets">Assets</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/rendering.html#managing-jquery-conflicts">Managing jQuery conflicts</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/rendering.html#the-javascript-object">The javascript object</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/ajax-and-stack.html#ajax-and-stacked-data">AJAX and Stacked data</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/ajax-and-stack.html#ajax">AJAX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/ajax-and-stack.html#stacked-data">Stacked data</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#base-collectors">Base collectors</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#messages">Messages</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#timedata">TimeData</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#exceptions">Exceptions</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#pdo">PDO</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#requestdata">RequestData</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#config">Config</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#aggregatedcollector">AggregatedCollector</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/base-collectors.html#others">Others</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#bridge-collectors">Bridge collectors</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#cachecache">CacheCache</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#doctrine">Doctrine</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#monolog">Monolog</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#propel">Propel</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#slim">Slim</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#swift-mailer">Swift Mailer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#twig">Twig</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/storage.html#storage">Storage</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/storage.html#available-storage">Available storage</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/storage.html#creating-your-own-storage">Creating your own storage</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/storage.html#request-id-generator">Request ID generator</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/openhandler.html#open-handler">Open handler</a>
|
|
|
|
|
|
<ol>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/http-drivers.html#http-drivers">HTTP drivers</a>
|
|
|
|
|
|
<ol>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#javascript-bar">Javascript Bar</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#tabs-and-indicators">Tabs and indicators</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#data-mapping">Data mapping</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#datasets">Datasets</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#widgets">Widgets</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#custom-tabs-and-indicators">Custom tabs and indicators</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/javascript-bar.html#openhandler">OpenHandler</a>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
</nav>
|
|
|
|
<nav id="links">
|
|
<ul>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
<div id="content">
|
|
<a name="javascript-bar"></a><h1>Javascript Bar</h1>
|
|
<p><strong>This section is here to document the inner workings of the client side debug bar.
|
|
Nothing described below is needed to run the debug bar in a normal way.</strong></p>
|
|
<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, visibility, 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> and <em>FontAwesome</em> (css). <em>FontAwesome</em> is
|
|
optional but is used to add nice icons!</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 be <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 switch 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>Widgets should inherit from the <code>PhpDebugBar.Widget</code> class which is used
|
|
as the base of every visual component in the debug bar.</p>
|
|
<p>New widgets can be created using <code>extend()</code>:</p>
|
|
<pre><code>var MyWidget = PhpDebugBar.Widget.extend({
|
|
// class properties
|
|
});</code></pre>
|
|
<p>The Widget class defines a <code>set(attr, value)</code> function which can be used
|
|
to set the value of attributes.</p>
|
|
<p>Using <code>bindAttr(attr, callback)</code>, you can trigger a callback every time
|
|
the value of the attribute is changed. <code>callback</code> can also be a <code>jQuery</code>
|
|
object and in that case it will use the <code>text()</code> function to fill the element.</p>
|
|
<p>Widgets should define a <code>render()</code> function which initializes the widget
|
|
elements.</p>
|
|
<p><code>initialize(options)</code> will always be called after the constructor.</p>
|
|
<pre><code>var MyWidget = PhpDebugBar.Widget.extend({
|
|
|
|
tagName: 'div', // optional as 'div' is the default
|
|
|
|
className: 'mywidget',
|
|
|
|
render: function() {
|
|
this.bindAttr('data', this.$el);
|
|
}
|
|
|
|
});
|
|
|
|
// ----
|
|
|
|
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>
|
|
<li><code>ExceptionWidget</code>: for the <code>ExceptionCollector</code></li>
|
|
<li><code>SQLQueriesWidget</code>: for the <code>PDOCollector</code></li>
|
|
<li><code>TemplatesWidget</code>: for the <code>TwigCollector</code></li>
|
|
</ul>
|
|
<a name="custom-tabs-and-indicators"></a><h2>Custom tabs and indicators</h2>
|
|
<p>Behind the scene, <code>createTab()</code> and <code>createIndicator()</code> use <code>addTab(name, tab)</code> and
|
|
<code>addIndicator(name, indicator)</code>. Tabs are objects of type <code>PhpDebugBar.DebugBar.Tab</code>
|
|
and indicators of type <code>PhpDebugBar.DebugBar.Indicator</code>. These classes subclass
|
|
<code>PhpDebugBar.Widget</code> which makes it easy to create custom tabs or indicators.</p>
|
|
<pre><code>var LinkIndicator = PhpDebugBar.DebugBar.Indicator.extend({
|
|
|
|
tagName: 'a',
|
|
|
|
render: function() {
|
|
LinkIndicator.__super__.render.apply(this);
|
|
this.bindAttr('href', function(href) {
|
|
this.$el.attr('href', href);
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
// ----
|
|
|
|
debugbar.addIndicator('phpdoc', new LinkIndicator({ href: 'http://doc.php.com', title: 'PHP doc' }));</code></pre>
|
|
<a name="openhandler"></a><h2>OpenHandler</h2>
|
|
<p>An OpenHandler object can be provided using <code>setOpenHandler()</code>. The object is in charge
|
|
of loading datasets. The only requirement is to provide a <code>show()</code> method which takes
|
|
as only parameter a callback which expects an id and data parameter.</p>
|
|
<p>The default implementation is <code>PhpDebugBar.OpenHandler</code> which must be use in conjunction
|
|
with the server side <code>DebugBar\OpenHandler</code> (see previous section).</p>
|
|
<pre><code>debugbar.setOpenHandler(new PhpDebugBar.OpenHandler({ url: "open.php" }));</code></pre>
|
|
|
|
|
|
|
|
|
|
</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="/docs/all.html">Everything on a single page</a>
|
|
- <a href="?print=1">Print current page</a> - <a href="/docs/all.html?print=1">Print all pages</a>
|
|
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|