jQuery: print_r() display equivalent?

Question

Possible Duplicate:
JavaScript data formatting/pretty printer

I am getting a bit tired of looking at unformatted json blobs in FireBug.

Does anyone know an equivalent to PHP's print_r() for jQuery?

Something that would recursively make a display string from an object or array, that I could display on the page for quick debugging?

Thanks!

Paolo Bergantino · Accepted Answer · 2012-10-10T13:12:33.250

70

console.log is what I most often use when debugging.

I was able to find this jQuery extension though.

edited Oct 10 '12 at 13:12

answered Jan 19 '09 at 06:00

Paolo Bergantino

480,997
81
517
436

6

This is perfect. I've been using console.log, but didn't realize I could pass it an object. Durr... – Eli Jan 19 '09 at 06:06
5

Durr indeed. I didn't really figure this out until now, because I always tack on a string at the beginning of my console.log() and so everytime i just get the string representation [Object object]. I tried console.log(myObj) and it's much better now. – Randy L Nov 22 '10 at 20:49
2

Also, console.dir is best for objects :) – Aaron McAdam Jan 19 '11 at 22:05
freaking great it works on webkit as well! :) – cregox Mar 01 '11 at 00:26
Love console.log, however console.log is sadly not available in Titanium. I need a solid print_r() function. – neoneye Aug 12 '11 at 14:37
Yes! why did i not know about this earlier... THX! – Piotr Kula Nov 16 '11 at 13:49
8

@the0ther console.log can take multiple arguments, so if you want to tack a string at the beginning, use `console.log(string, object);` (notice the comma). This way you get your string and the object is correctly shown too. – Shawn Dec 11 '12 at 17:09
2

The link for the jQuery extension is broken. – Jason May 25 '13 at 16:58

score 44 · Answer 2 · answered Jan 19 '09 at 06:11

You could use very easily reflection to list all properties, methods and values.

For Gecko based browsers you can use the .toSource() method:

var data = new Object();
data["firstname"] = "John";
data["lastname"] = "Smith";
data["age"] = 21;

alert(data.toSource()); //Will return "({firstname:"John", lastname:"Smith", age:21})"

But since you use Firebug, why not just use console.log?

score 16 · Answer 3 · edited Nov 21 '11 at 00:25

16

How about something like:

<script src='http://code.jquery.com/jquery-latest.js'></script>

function print_r(o){
return JSON.stringify(o,null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;'); }

edited Nov 21 '11 at 00:25

animuson

53,861
28
137
147

answered Nov 01 '11 at 14:05

Magnus Andersson

189
1
2

a pretty good reply actually if someone hates console.log :) – Gogol May 08 '14 at 21:26

score 9 · Answer 4 · answered Jan 19 '09 at 06:25

9

You can also do

console.log("a = %o, b = %o", a, b);

where a and b are objects.

answered Jan 19 '09 at 06:25

Bill Zeller

1,336
1
9
13

score 6 · Answer 5 · answered Jul 10 '12 at 06:28

6

$.each(myobject, function(key, element) {
    alert('key: ' + key + '\n' + 'value: ' + element);
});

This does the work for me. :)

answered Jul 10 '12 at 06:28

Gogol

3,033
4
28
57

This won't work with multi-dimensional objects. – Dallas Clark Sep 21 '12 at 15:27
Hmm that might be true, but why don't you use console.log for complex arrays / objects? – Gogol Sep 21 '12 at 19:14
If you still want to do this (assuming that you really need this for coding, rather than debugging), you might need nested foreach statements, which can really be complex at certain times :P – Gogol Sep 21 '12 at 19:18
1

Because sometimes you need to output the results on the page. I created a function which outputted the array and called itself if it detected the child value is another array. – Dallas Clark Sep 24 '12 at 01:06

Tomas · Answer 6 · 2013-08-30T14:56:16.570

6

I've made a jQuery plugin for the equivalent of

<pre>
<?php echo print_r($data) ?>
</pre>

You can download it at https://github.com/tomasvanrijsse/jQuery.dump

edited Aug 30 '13 at 14:56

answered Jan 17 '12 at 15:38

Tomas

550
6
17

I modified your code: Your code output need to attach to a div. But with this function I can able to display to on console both string and object. function print(variable) { if(typeof variable == 'object') { $.each(variable, function(key, element) { console.log('' + key + ' => ' + element+""); }); } else { console.log('' + variable +""); } } – ShivarajRH Aug 30 '13 at 12:37
Could you send a pull request on https://github.com/tomasvanrijsse/jQuery.dump – Tomas Aug 30 '13 at 14:55
I sent pull request. :-) – ShivarajRH Aug 31 '13 at 08:21

score 5 · Answer 7 · answered Apr 18 '10 at 21:03

Top comment has a broken link to the console.log documentation for Firebug, so here is a link to the wiki article about Console. I started using it and am quite satisfied with it as an alternative to PHP's print_r().

Also of note is that Firebug gives you access to returned JSON objects even without you manually logging them:

In the console you can see the url of the AJAX response.
Click the triangle to expand the response and see details.
Click the JSON tab in the details.
You will see the response data organized with expansion triangles.

This method take a couple more clicks to get at the data but doesn't require any additions in your actual javascript and doesn't shift your focus in Firebug out of the console (using console.log creates a link to the DOM section of firebug, forcing you to click back to console after).

For my money I'd rather click a couple more times when I want to inspect rather than mess around with the log, especially since keeps the console neat by not adding any additional cruft.

niofox · Answer 8 · 2012-03-09T22:40:16.723

-1

Look at this: http://phpjs.org/functions/index and find for print_r or use console.log() with firebug.

edited Mar 09 '12 at 22:40

answered Mar 05 '12 at 18:43

niofox

379
3
8

jQuery: print_r() display equivalent?

8 Answers8