mirror of
https://github.com/maximebf/php-debugbar.git
synced 2025-06-09 23:55:00 +02:00
311 lines
9.4 KiB
HTML
311 lines
9.4 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="/docs/css/reset.css">
|
|
<link type="text/css" rel="stylesheet" href="/docs/css/docs.css">
|
|
<link type="text/css" rel="stylesheet" href="/docs/css/print.css" media="print">
|
|
<link type="text/css" rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/sunburst.min.css">
|
|
|
|
<link type="text/css" rel="stylesheet" href="style.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="/docs/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">
|
|
<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>
|
|
|
|
<li>
|
|
<a href="/docs/data-collectors.html#base-collectors">Base 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#the-javascript-object">The javascript object</a>
|
|
|
|
</li>
|
|
|
|
</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>
|
|
|
|
</ol>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/docs/bridge-collectors.html#bridge-collectors">Bridge collectors</a>
|
|
|
|
|
|
<ol>
|
|
|
|
<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#twig">Twig</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. They are located in the <em>src/DebugBar/Resources</em> folder.
|
|
This can be done in three 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>
|
|
</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 projets.
|
|
|
|
</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>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="/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>
|