Anyone know a way to get dd($something) nicely formatted in the Network preview tab of google chrome?

Been working on a fair amount of vue lately, as as I dd() a few things, in the preview tab I end up with stuff like this:

<script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'), rxEsc = /([.*+?^${}()|\[\]\/\])/g, idRx = /\bsf-dump-\d+-ref[012]\w+\b/, keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl', addEventListener = function (e, n, cb) { e.addEventListener(n, cb, false); }; (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element, eventName, callback) { element.attachEvent('on' + eventName, function (e) { e.preventDefault = function () {e.returnValue = false;}; e.target = e.srcElement; callback(e); }); }; } function toggle(a, recursive) { var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass; if (/\bsf-dump-compact\b/.test(oldClass)) { arrow = '&#9660;'; newClass = 'sf-dump-expanded'; } else if (/\bsf-dump-expanded\b/.test(oldClass)) { arrow = '&#9654;'; newClass = 'sf-dump-compact'; } else { return false; } a.lastChild.innerHTML = arrow; s.className = s.className.replace(/\bsf-dump-(compact|expanded)\b/, newClass); if (recursive) { try { a = s.querySelectorAll('.'+oldClass); for (s = 0; s < a.length; ++s) { if (-1 == a[s].className.indexOf(newClass)) { a[s].className = newClass; 
.....

  "<span class=sf-dump-key>pivot_phone</span>" => <span class=sf-dump-const>null</span>
  "<span class=sf-dump-key>pivot_fax</span>" => <span class=sf-dump-const>null</span>
</samp>]
</pre><script>Sfdump("sf-dump-350890615")</script>

It's just the code that in the browser would render the dd() we expect, yet here it doesn't. I don't know if this used to work. Or if it changed by removing a plugin.

If anyone knows a good pluging for rendering the dd method "specifically in the network preview" in the devtools, please let me know.

ejdelmonico

8 years ago

Level 53

Try this and use it as ddd(). I usually put it in a helper file.

<?php

use Illuminate\Support\Debug\HtmlDumper;
use Symfony\Component\VarDumper\Cloner\VarCloner;
use Symfony\Component\VarDumper\Dumper\CliDumper;

function ddd($variable, $depth = -1, $stringLength = 20)
{
    $cloner = new VarCloner();
    $cloner->setMaxString($stringLength);

    $dumper = 'cli' === PHP_SAPI ? new CliDumper() : new HtmlDumper();
    $dumper->dump($cloner->cloneVar($variable)->withMaxDepth($depth));

    die(1);
}

Roni

8 years ago

Level 33

Thanks @ejdelmonico, I'm getting the same thing as the dd with that one.

This isn't the worst: dd(print_r($request->all()));

For now, I'm just trying to use it to make sure my requests are sending in the right data and at certain points where Vue is receiving data. It's been a while, but in the back of my head it used to just work.

Again this is only in the network pane of the devtools. In the regular window of chrome 62 it all returns as expected.

ejdelmonico

8 years ago

Best Answer

Level 53

That function is mainly to dump php objects. It usually works pretty well. Have you looked the chrome extension var_masterpiece? it works pretty well for displaying var_dump() as well. As far as the compressed JS, if there is no map then chrome pretty print doesn't work very well. You could still try and see if it helps. https://cl.ly/o2WN

Roni

8 years ago

Level 33

Thanks, that did clean it up a bit. Much appreciated.

Please or to participate in this conversation.