mirror of
https://github.com/maximebf/php-debugbar.git
synced 2025-07-27 19:50:21 +02:00
288 lines
8.7 KiB
HTML
288 lines
8.7 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="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>
|