Wsrtjtyk

Use native JSON.stringify method.
Works with nested objects and all major browsers support this method.

str = JSON.stringify(obj);

str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.

console.log(str); // Logs output to dev tools console.

alert(str); // Displays output using window.alert()

Link to Mozilla API Reference and other examples.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

Use a custom JSON.stringify replacer if you
encounter this Javascript error

"Uncaught TypeError: Converting circular structure to JSON"

var output = '';

for (var property in object) {

  output += property + ': ' + object[property]+'; ';

}

alert(output);

console.dir(object):

Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.

Note that the console.dir() feature is non-standard. See MDN Web Docs

try this :

console.log(JSON.stringify(obj))

This will print the stringify version of object. So instead of [object] as an output you will get the content of object.

Well, Firefox (thanks to @Bojangles for detailed information) has Object.toSource() method which prints objects as JSON and function(){}.

That's enough for most debugging purposes, I guess.

If you want to use alert, to print your object, you can do this:

alert("myObject is " + myObject.toSource());

It should print each property and its corresponding value in string format.

In NodeJS you can print an object by using util.inspect(obj). Be sure to state the depth or you'll only have a shallow print of the object.

Function:

var print = function(o){

    var str='';



    for(var p in o){

        if(typeof o[p] == 'string'){

            str+= p + ': ' + o[p]+'; </br>';

        }else{

            str+= p + ': { </br>' + print(o[p]) + '}';

        }

    }



    return str;

}

Usage:

var myObject = {

    name: 'Wilson Page',

    contact: {

        email: 'wilson@hotmail.com',

        tel: '123456789'

    }  

}



$('body').append( print(myObject) );

Example:

http://jsfiddle.net/WilsonPage/6eqMn/

If you would like to see data in tabular format you can use

console.table(obj);

Table can be sorted if you click on the table column.

You can also select what columns to show:

console.table(obj, ['firstName', 'lastName']);

You can find more information about console.table here

As it was said before best and most simply way i found was

var getPrintObject=function(object)

{

    return JSON.stringify(object);

}

Use this:

console.log('print object: ' + JSON.stringify(session));

To print the full object with Node.js with colors as a bonus:

console.dir(object, {depth: null, colors: true})

Colors are of course optional, 'depth: null' will print the full object.

The options don't seem to be supported in browsers.

References:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options

If you would like to print the object of its full length, can use

console.log(require('util').inspect(obj, {showHidden: false, depth: null})

If you want to print the object by converting it to the string then

console.log(JSON.stringify(obj));

I needed a way to recursively print the object, which pagewil's answer provided (Thanks!). I updated it a little bit to include a way to print up to a certain level, and to add spacing so that it is properly indented based on the current level that we are in so that it is more readable.

// Recursive print of object

var print = function( o, maxLevel, level ) {

    if ( typeof level == "undefined" ) {

        level = 0;

    }

    if ( typeof level == "undefined" ) {

        maxLevel = 0;

    }



    var str = '';

    // Remove this if you don't want the pre tag, but make sure to remove

    // the close pre tag on the bottom as well

    if ( level == 0 ) {

        str = '<pre>';

    }



    var levelStr = '';

    for ( var x = 0; x < level; x++ ) {

        levelStr += '    ';

    }



    if ( maxLevel != 0 && level >= maxLevel ) {

        str += levelStr + '...</br>';

        return str;

    }



    for ( var p in o ) {

        if ( typeof o[p] == 'string' ) {

            str += levelStr +

                p + ': ' + o[p] + ' </br>';

        } else {

            str += levelStr +

                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';

        }

    }



    // Remove this if you don't want the pre tag, but make sure to remove

    // the open pre tag on the top as well

    if ( level == 0 ) {

        str += '</pre>';

    }

    return str;

};

Usage:

var pagewilsObject = {

    name: 'Wilson Page',

    contact: {

        email: 'wilson@hotmail.com',

        tel: '123456789'

    }  

}



// Recursive of whole object

$('body').append( print(pagewilsObject) ); 



// Recursive of myObject up to 1 level, will only show name 

// and that there is a contact object

$('body').append( print(pagewilsObject, 1) ); 

(This has been added to my library at GitHub)

Reinventing the wheel here! None of these solutions worked for my situation. So, I quickly doctored up pagewil's answer. This one is not for printing to screen (via console, or textfield or whatever). It is, however, for data transport. This version seems to return a very similar result as toSource(). I've not tried JSON.stringify, but I assume this is about the same thing. The result of this function is a valid Javascript object declaration.

I wouldn't doubt if something like this was already on SO somewhere, but it was just shorter to make it than to spend a while searching past answers. And since this question was my top hit on google when I started searching about this; I figured putting it here might help others.

Anyhow, the result from this function will be a string representation of your object, even if your object has embedded objects and arrays, and even if those objects or arrays have even further embedded objects and arrays. (I heard you like to drink? So, I pimped your car with a cooler. And then, I pimped your cooler with a cooler. So, your cooler can drink, while your being cool.)

Arrays are stored with instead of {} and thus dont have key/value pairs, just values. Like regular arrays. Therefore, they get created like arrays do.

Also, all string (including key names) are quoted, this is not necessary unless those strings have special characters (like a space or a slash). But, I didn't feel like detecting this just to remove some quotes that would otherwise still work fine.

This resulting string can then be used with eval or just dumping it into a var thru string manipulation. Thus, re-creating your object again, from text.

function ObjToSource(o){

    if (!o) return 'null';

    var k="",na=typeof(o.length)=="undefined"?1:0,str="";

    for(var p in o){

        if (na) k = "'"+p+ "':";

        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";

        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";

        else str += k + o[p] + ",";

    }

    if (na) return "{"+str.slice(0,-1)+"}";

    else return "["+str.slice(0,-1)+"]";

}

Let me know if I messed it all up, works fine in my testing. Also, the only way I could think of to detect type array was to check for the presence of length. Because Javascript really stores arrays as objects, I cant actually check for type array (there is no such type!). If anyone else knows a better way, I would love to hear it. Because, if your object also has a property named length then this function will mistakenly treat it as an array.

EDIT: Added check for null valued objects. Thanks Brock Adams

EDIT: Below is the fixed function to be able to print infinitely recursive objects. This does not print the same as toSource from FF because toSource will print the infinite recursion one time, where as, this function will kill it immediately. This function runs slower than the one above, so I'm adding it here instead of editing the above function, as its only needed if you plan to pass objects that link back to themselves, somewhere.

const ObjToSource=(o)=> {

    if (!o) return null;

    let str="",na=0,k,p;

    if (typeof(o) == "object") {

        if (!ObjToSource.check) ObjToSource.check = new Array();

        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';

        ObjToSource.check.push(o);

    }

    k="",na=typeof(o.length)=="undefined"?1:0;

    for(p in o){

        if (na) k = "'"+p+"':";

        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";

        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";

        else str += k+o[p]+",";

    }

    if (typeof(o) == "object") ObjToSource.check.pop();

    if (na) return "{"+str.slice(0,-1)+"}";

    else return "["+str.slice(0,-1)+"]";

}

Test:

var test1 = new Object();

test1.foo = 1;

test1.bar = 2;



var testobject = new Object();

testobject.run = 1;

testobject.fast = null;

testobject.loop = testobject;

testobject.dup = test1;



console.log(ObjToSource(testobject));

console.log(testobject.toSource());

Result:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}

({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

NOTE: Trying to print document.body is a terrible example. For one, FF just prints an empty object string when using toSource. And when using the function above, FF crashes on SecurityError: The operation is insecure.. And Chrome will crash on Uncaught RangeError: Maximum call stack size exceeded. Clearly, document.body was not meant to be converted to string. Because its either too large, or against security policy to access certain properties. Unless, I messed something up here, do tell!

I always use console.log("object will be: ", obj, obj1).
this way I don't need to do the workaround with stringify with JSON.
All the properties of the object will be expanded nicely.

The simplest way:

console.log(obj);

Or with a message:

console.log("object is: %O", obj);

The first object you pass can contain one or more format specifiers. A format specifier is composed of the percent sign (%) followed by a letter that indicates the formatting to apply.

More format specifiers

var list = function(object) {

   for(var key in object) {

     console.log(key);

   }

}

where object is your object

or you can use this in chrome dev tools, "console" tab:

console.log(object);

Assume object obj = {0:'John', 1:'Foo', 2:'Bar'}

Print object's content

for (var i in obj){

    console.log(obj[i], i);

}

Console output (Chrome DevTools) :

John 0

Foo 1

Bar 2

Hope that helps!

Javascript Function

<script type="text/javascript">

    function print_r(theObj){ 

       if(theObj.constructor == Array || theObj.constructor == Object){ 

          document.write("<ul>") 

          for(var p in theObj){ 

             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 

                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 

                document.write("<ul>") 

                print_r(theObj[p]); 

                document.write("</ul>") 

             } else { 

                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 

             } 

          } 

          document.write("</ul>") 

       } 

    } 

</script>

Printing Object

<script type="text/javascript">

print_r(JAVACRIPT_ARRAY_OR_OBJECT);

</script> 

via print_r in Javascript

Another way of displaying objects within the console is with JSON.stringify. Checkout the below example:

var gandalf = {

  "real name": "Gandalf",

  "age (est)": 11000,

  "race": "Maia",

  "haveRetirementPlan": true,

  "aliases": [

    "Greyhame",

    "Stormcrow",

    "Mithrandir",

    "Gandalf the Grey",

    "Gandalf the White"

  ]

};

//to console log object, we cannot use console.log("Object gandalf: " + gandalf);

console.log("Object gandalf: ");

//this will show object gandalf ONLY in Google Chrome NOT in IE

console.log(gandalf);

//this will show object gandalf IN ALL BROWSERS!

console.log(JSON.stringify(gandalf));

//this will show object gandalf IN ALL BROWSERS! with beautiful indent

console.log(JSON.stringify(gandalf, null, 4));

A little helper function I always use in my projects for simple, speedy debugging via the console.
Inspiration taken from Laravel.

/**

 * @param variable mixed  The var to log to the console

 * @param varName string  Optional, will appear as a label before the var

 */

function dd(variable, varName) {

    var varNameOutput;



    varName = varName || '';

    varNameOutput = varName ? varName + ':' : '';



    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');

}

Usage

dd(123.55); outputs:

var obj = {field1: 'xyz', field2: 2016};

dd(obj, 'My Cool Obj'); 

Here's a way to do it:

console.log("%o", obj);

i used pagewil's print method, and it worked very nicely.

here is my slightly extended version with (sloppy) indents and distinct prop/ob delimiters:

var print = function(obj, delp, delo, ind){

    delp = delp!=null ? delp : "t"; // property delimeter

    delo = delo!=null ? delo : "n"; // object delimeter

    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects

    var str='';



    for(var prop in obj){

        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){

          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings

          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;

        }else{

          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;

        }

    }

    return str;

};

Another modification of pagewils code... his doesn't print out anything other than strings and leaves the number and boolean fields blank and I fixed the typo on the second typeof just inside the function as created by megaboss.

var print = function( o, maxLevel, level )

{

    if ( typeof level == "undefined" )

    {

        level = 0;

    }

    if ( typeof maxlevel == "undefined" )

    {

        maxLevel = 0;

    }



    var str = '';

    // Remove this if you don't want the pre tag, but make sure to remove

    // the close pre tag on the bottom as well

    if ( level == 0 )

    {

        str = '<pre>';   // can also be <pre>

    }



    var levelStr = '<br>';

    for ( var x = 0; x < level; x++ )

    {

        levelStr += '    ';   // all those spaces only work with <pre>

    }



    if ( maxLevel != 0 && level >= maxLevel )

    {

        str += levelStr + '...<br>';

        return str;

    }



    for ( var p in o )

    {

        switch(typeof o[p])

        {

          case 'string':

          case 'number':    // .tostring() gets automatically applied

          case 'boolean':   // ditto

            str += levelStr + p + ': ' + o[p] + ' <br>';

            break;



          case 'object':    // this is where we become recursive

          default:

            str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';

            break;

        }

    }



    // Remove this if you don't want the pre tag, but make sure to remove

    // the open pre tag on the top as well

    if ( level == 0 )

    {

        str += '</pre>';   // also can be </pre>

    }

    return str;

};

Here's function.

function printObj(obj) {

console.log((function traverse(tab, obj) {

    let str = "";

    if(typeof obj !== 'object') {

        return obj + ',';

    }

    if(Array.isArray(obj)) {            

        return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';

    }

    str = str + '{n';

    for(var p in obj) {

        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'n';

    }

    str = str.slice(0,-2) + str.slice(-1);                

    str = str + tab + '},';

    return str;

}('',obj).slice(0,-1)))};

It can show object using tab indent with readability.

I think the best solution is to look through the Objects Keys, and then through the Objects Values if you really want to see what the object holds...

console.log(Object.keys(obj));

console.log(Object.values(obj));

There is also this new option if you're using ECMAScript 2016 or newer:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

The solution mentioned above : console.log(obj) displays too many parameters and is not the most user friendly way to display the data you want. That is why I recommend logging keys and then values separately.

If you're looking for something that can return a prettified string of any javascript object, check out https://github.com/fresheneesz/beautinator . An example:

var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}})

console.log(result)

Results in:

{ "font-size": "26px",

  "font-family": "'Open Sans', sans-serif",

  color: "white", overflow: "hidden",

  padding: "4px 4px 4px 8px",

  Text: { display: "block", width: "100%",

          "text-align": "center", "padding-left": "2px",

          "word-break": "break-word"

  }

}

It even works if there are functions in your object.

A simple way to show the contents of the object is using console.log as shown below

console.log("Object contents are ", obj);

Please note that I am not using '+' to concatenate the object. If I use '+' than I will only get the string representation if object, something like [Object object].