jQuery: print_r() display equivalent?
PhpJqueryDebuggingPhp Problem Overview
> 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!
Php Solutions
Solution 1 - Php
console.log is what I most often use when debugging.
I was able to find this jQuery extension though.
Solution 2 - Php
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?
Solution 3 - Php
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,' '); }
Solution 4 - Php
You can also do
console.log("a = %o, b = %o", a, b);
where a and b are objects.
Solution 5 - Php
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
Solution 6 - Php
$.each(myobject, function(key, element) {
alert('key: ' + key + '\n' + 'value: ' + element);
});
This does the work for me. :)
Solution 7 - Php
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.
Solution 8 - Php
Look at this: http://phpjs.org/functions/index and find for print_r or use console.log() with firebug.