Var_dump got you down? Collapse it, with jQuery!

Aug 1, 2012 · 2 minute read
Category: php

Okay, so anyone who’s worked with php knows that sometimes your only option is to var_dump() and die(). Usually when xdebug is having a moody day and refusing to cooperate.

But even though the xdebug var_dump() is that much better than php’s built-in version, if you dump for instance a magento object you can’t follow back what you want up the tree of cascading objects.

Enter: Kint.

Kint is a collapsible jQuery-based var_dump that works really well, with a lot of configuration but works flawlessly out of the box. Simply include the class file (using absolute paths is fine because you’re not going to deploy this to a live server, right?), and start using it’s static class methods… or their really short aliases :

require_once ('/home/myname/usefulstuff/kint/Kint.class.php');
Kint::dump($variable1,$variable2);
// or simply
d($variable1,$variable2); // shorthand alias of Kint::dump()
dd($variable); // execution will stop after this statement; same as d($variable);die;

Example output (wordpress may break the javascript, also available as an example at http://jsfiddle.net/NNfMW/) :

<script>var d=!1;if("undefined"===typeof f){var g=function(a){var b=window.getSelection(),c=document.createRange();c.selectNodeContents(a);b.removeAllRanges();b.addRange(c)},h=function(a){a.className=a.className.replace(/(\s|^)kint-minus(\s|$)/," ");return a},i=function(a){var b;b||(b="dd");do a=a.nextElementSibling;while(a.nodeName.toLowerCase()!=b);return a},j=function(a,b){var c=i(a),e=a.getElementsByClassName("_kint-collapse")0
;"undefined"==typeof b&&(b="block"==c.style.display);b?(c.style.display="none",h(e)):
(c.style.display="block",h(e).className+=" kint-minus")},l=function(a,b){var c=a.parentNode.parentNode.getElementsByClassName(b)[0];c.style.display="block"==c.style.display?"none":"block"},f={};window.addEventListener("load",function(){for(var a=document.getElementsByClassName("kint-parent"),b=a.length,c,e=document.getElementsByClassName("kint");b--;)a[b].addEventListener("mousedown",function(){j(this)},d);a=document.getElementsByClassName("_kint-collapse");for(b=a.length;b--;)a[b].addEventListener("mousedown",
function(a){var b=this;setTimeout(function(){if(0<parseInt(b.a,10))b.a--;else{for(var a=b.parentNode,c=i(a),k=c.getElementsByClassName("kint-parent"),e=k.length,c="block"==c.style.display;e--;)j(k[e],c);j(a,c)}},300);a.stopPropagation()},d),a[b].addEventListener("dblclick",function(a){this.a=2;for(var b=document.getElementsByClassName("kint-parent"),c=b.length,e="block"==i(this.parentNode).style.display;c--;)j(b[c]
,e);a.stopPropagation()},d);for(b=e.length;b--;){a=eb
.getElementsByTagName("var");
for(c=a.length;c--;)a[c]
.addEventListener("mouseup",function(){g(this)},d);a=eb
.getElementsByTagName("dfn");for(c=a.length;c--;)a[c]
.addEventListener("mouseup",function(){g(this)},d)}a=document.getElementsByClassName("kint-args-parent");for(b=a.length;b--;)ab
.addEventListener("click",function(a){l(this,"kint-args");a.preventDefault()},d);a=document.getElementsByClassName("kint-source-parent");for(b=a.length;b--;)a[b].addEventListener("click",function(a){l(this,"kint-source");a.preventDefault()},
d);a=document.getElementsByClassName("kint-object-parent");for(b=a.length;b--;)a[b].addEventListener("click",function(a){l(this,"kint-object");a.preventDefault()},d);a=document.getElementsByClassName("kint-ide-link");for(c=a.length;c--;)a[c]
.addEventListener("click",function(a){a.preventDefault();a=new XMLHttpRequest;a.open("GET",this.href);a.send(null);return d},d)},d)}</script><style>.kint-trace{background:#C0D4DF;font-size:1em;font-family:Consolas,"Courier New",monospace;text-align:left;color:#111;padding:.4em;overflow:hidden}.kint-trace p{margin:0;padding:.2em 0}.kint-trace a{color:#1b323b}div.kint-object,div.kint-args,div.kint-source{display:none}.kint-trace table{width:100%;display:block;margin:0 0 .4em;padding:0;border-collapse:collapse;background:#C0D4DF}.kint-trace table td{border:solid 1px #0092db;background:#C0D4DF;text-align:left;vertical-align:top;padding:2px}.kint-trace pre{margin:0;padding:.4em;background:#E3ECF0;line-height:1.2em;overflow:auto}.kint-trace pre div.kint-highlight{background:#f0eb96}.kint-trace ol{display:block;margin:0 0 0 2em;padding:0}.kint-trace ol li{margin:0;padding:0}.kint-trace td pre{overflow:hidden}.kint-trace .source span{padding-right:1px;border-right:3px inset #0092DB;color:#999}.kint{padding:0;margin:10px 0;font-family:Consolas,"Courier New",monospace;font-size:11pt;white-space:nowrap;overflow:hidden}.kint::selection{background:#0092db;color:#fff}.kint::-moz-selection{background:#0092db;color:#fff}.kint::-webkit-selection{background:#0092db;color:#fff}.kint dt{border:1px solid #B6CEDB;color:#1D1E1E;display:block;font-weight:bold;list-style:none outside none;min-height:18px;padding:5px}.kint dl,.kint dd{padding:0 0 0 15px;margin:0}.kint dd{background:none !important;border:none !important;padding:0;display:none}.kint var{color:#0092db;font-style:normal}.kint dfn{font-family:monospace;font-style:normal}.kint code{cursor:cell}.kint a{color:#1b323b}.kint pre{margin:0 0 0 15px;padding:5px;overflow-y:hidden;background-color:#E3ECF0;color:#1D1E1E;border:1px solid #B6CEDB}.kint dd dt:nth-of-type(even){background:#C0D4DF}.kint dd dt:nth-of-type(odd){background:#E3ECF0}.kint>dl>dt{background:#e3ecf0;background:-moz-linear-gradient(top,#e3ecf0 0,#c0d4df 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e3ecf0),color-stop(100%,#c0d4df));background:-webkit-linear-gradient(top,#e3ecf0 0,#c0d4df 100%);background:-o-linear-gradient(top,#e3ecf0 0,#c0d4df 100%);background:-ms-linear-gradient(top,#e3ecf0 0,#c0d4df 100%);background:linear-gradient(top,#e3ecf0 0,#c0d4df 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3ecf0',endColorstr='#c0d4df',GradientType=0 )}.kint>dl+dl{margin-top:5px}.kint>dl dl dl{border-left:1px dashed #E3ECF0}.kint dt:hover{border:1px solid #0092db}.kint dt:hover var{color:#5CB730}.kint dt:hover .kint-plus{background-position:0 -15px}.kint dt:hover .kint-minus{background-position:0 -45px}.kint-plus{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8CAMAAACO5hB7AAAACVBMVEX///82b4tctzBls0NMAAAAQklEQVR42rWRIQ4AAAgCwf8/2qgER2BeuwJsgAqIzekMfMryPL9XQSkobE6vwKcsz/N7FfPvh09lnPf/b+7673+f0uHuAZ/EdkNQAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;display:inline-block;height:15px;margin:0;padding:0 3px 0 0;vertical-align:middle;width:15px}.kint-minus{background-position:0 -30px}.kint-parent{cursor:pointer}.kint>span{padding:3px 3px 3px 15px;font-size:.7em}.kint span{color:#000}</style><div class="kint" style="box-shadow: 6px 0 3px -3px #e3ecf0 inset"><dl><dt class="kint-parent"><div class="kint-plus _kint-collapse"></div><dfn>$mydeeparray</dfn> <var>array</var> <span>(1)</span><dd><dl><dt class="kint-parent"><div class="kint-plus _kint-collapse"></div>'<dfn>Level1</dfn>' => <var>array</var> <span>(1)</span><dd><dl><dt class="kint-parent"><div class="kint-plus _kint-collapse"></div>'<dfn>Level2</dfn>' => <var>array</var> <span>(1)</span><dd><dl><dt> <var>string</var>(8) "Level 42"</dl></dd></dl></dd></dl></dd></dl><span>Called from <u>/home/someone/Examples/scratchpad/scratch.php</u> line <i>15</i></span></div>