JavaScript print_r() or var_dump() Equivalent
I see a lot of newer JavaScript developers asking about debugging their variables. I think what happens is that they come from a
PHP background and expect to have handy functions available like
print_r() or
var_dump().
And why not? Those are fantastic functions that are infinitely valuable. Either way, being able to debug in this manner is almost
mandatory.
Honestly, my preferred method is
Firebug's console.log(), which lets a developer
pass in a string or series of variables that it will display, like so:
I think a large majority of webdevs use both Firefox and Firebug, so this
is nothing new. But there are some edge cases in which it would be nice to have a print_r() equivalent.
For example, if you must debug in a less developer-friendly browser such as
Internet Explorer.
To satisfy these edges cases, I've put together a function similar to print_r():
This function collects the values of the passed variable and its children and returns them in a formatted string. The first parameter is the variable itself, the second is the maximum number of recursions to allow (to prevent errors), and the third is the string to use to separate or indent content (such as a space or a tab). Here are some examples:
Even if you're a devout Firebug user and this function has no use for you, I still thought it might be helpful to see how this kind of thing would be put together.
- [Download print_r.js] (1,271 bytes)
- [Download print_r-min.js] (427 bytes; compressed)
[...] JavaScript print_r() or var_dump() Equivalent var myVar = { key1 : ‘value1′, key2 : ‘value2′, key3 : ['a', 'b', 'c'] }; try { console.log(’myVar: ‘, myVar); } catch(e) { alert(”You don’t have Firebug!nFor shame…”); }. Run this example. I think a large majority of webdevs use both … [...]
Another implementation of the same thing – Javascript equivalent of PHP’s print_r() function.
[...] writing this piece I had to search for the two above articles and then I found another piece detailing yet another print_r clone. There I also learned about Firebug’s console.log(). Due [...]
Hi,
Thanks for the starting point. I wanted a version that could skip printing out long strings (innerHTML/outerHTML) as well as functions. I’ve refactored your code to accomplish this. The new arguments are sMax and skipFunction. Strings will be truncated to sMax characters and functions will not be listed at all if skipFunction is true. I also show the depth of recursion at each new object, as well as string lengths prior to truncating. Hope somebody else finds it useful…
–dP
function print_r(x, max, sMax, skipFunction, sep, l) {
max = max || 10;
sMax = sMax || 25;
skipFunction = skipFunction || true;
sep = sep || ‘ ‘;
l = l || 0;
if (l > max) return “[Stopped at " + l + " levels]\n”;
var i, r = ”, t = typeof x, tab = ”;
if (x === null)
r += “(null)\n”;
else if (t == ‘object’) {
l++;
for (i = 0; i sMax)
x = x.substr(0, sMax) + ‘…’;
}
if (!(t == ‘function’ && skipFunction))
r += ‘(’ + t + slen + ‘) ‘ + x + “\n”;
}
return r;
}
[...] use the following function, based on a script by Matt Hackett, in the console window of the IE8 Developer Tools to quickly inspect any object currently in scope [...]
Sorry about the formatting above. Tried the pre tag, but it didn’t work. You can see my version of the function properly formatted in the Digital Prophets pingback.
Thanks…
one of the nicest and cleanest web page layouts I’ve seen on the net. great stuff!