mirror of
https://github.com/maximebf/php-debugbar.git
synced 2025-06-09 15:45:25 +02:00
456 lines
14 KiB
HTML
456 lines
14 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="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. They are located in the <em>src/DebugBar/Resources</em> folder.
|
|
This can be done in four 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>
|
|
<li>Dumping the assets yourself using <code>JavascriptRenderer::dumpCssAssets()</code> and
|
|
<code>JavascriptRenderer::dumpJsAssets()</code></li>
|
|
<li>Retrieving the list filenames of assets using <code>JavascriptRenderer::getAssets()</code>
|
|
and doing something with it</li>
|
|
</ul>
|
|
<p>I would recommend using the second method as Assetic is a very powerful asset
|
|
manager but the other methods are provided to quickly integrate the debug bar
|
|
into any projects.</p>
|
|
<p>You can define the base url of your assets using <code>setBaseUrl()</code>. This is needed
|
|
in 99% of cases.</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>Dumping the assets:</p>
|
|
<pre><code>header('Content-Type', 'text/javascript');
|
|
$renderer->dumpJsAssets();</code></pre>
|
|
<p>Retrieving the assets:</p>
|
|
<pre><code>list($cssFiles, $jsFiles) = $renderer->getAssets();</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>. Instead of false, <em>css</em> or <em>js</em> may be used
|
|
to only include css or js assets of vendors.</p>
|
|
<a name="managing-jquery-conflicts"></a><h2>Managing jQuery conflicts</h2>
|
|
<p>When the debug bar script is included, it will be bound to the current jQuery object.
|
|
The default action is to call <code>jQuery.noConflict(true)</code> after this is done.</p>
|
|
<p>This has two implications:</p>
|
|
<ul>
|
|
<li>jQuery won't be available anymore if you didn't include your own version
|
|
before including the debug bar's vendors</li>
|
|
<li>your own version will be restored.</li>
|
|
</ul>
|
|
<p>If you use <code>JavascriptRenderer::setIncludeVendors()</code> to disable the inclusion of js
|
|
vendors (ie. jquery), <code>jQuery.noConflict(true)</code> won't be called.</p>
|
|
<p>You can manage whether <code>jQuery.noConflict(true)</code> should be called or not using
|
|
<code>JavascriptRenderer::setEnableJqueryNoConflict()</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 initialization 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 initialization.
|
|
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>
|
|
<li><em>tab</em>: class name of the tab object (to use a custom tab object)</li>
|
|
<li><em>indicator</em>: class name of the indicator object (to use a custom indicator object)</li>
|
|
</ul>
|
|
<p>At least <em>icon</em> or <em>widget</em> are needed (unless <em>tab</em> or <em>indicator</em> are specified). If <em>widget</em> is
|
|
specified, a tab will be created, otherwise an indicator. Any other options is also passed to the tab
|
|
or indicator.</p>
|
|
<pre><code>$renderer->addControl('messages', array(
|
|
"widget" => "PhpDebugBar.Widgets.MessagesWidget",
|
|
"map" => "messages",
|
|
"default" => "[]"
|
|
));</code></pre>
|
|
<p>You can disable a control using <code>disableControl($name)</code> and ignore any controls provided by
|
|
a collector using <code>ignoreCollector($name)</code>.</p>
|
|
|
|
|
|
|
|
|
|
</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>
|