Użyj natywnej metody JSON.stringify. Działa z zagnieżdżonymi obiektami i wszystkie główne przeglądarki obsługują tę metodę .

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 do odniesienie do API Mozilli i inne przykłady.

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

Użyj niestandardowego JSON.stringify replacer jeśli zobacz ten błąd Javascript

"Uncaught TypeError: Converting circular structure to JSON"

var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

console.dir(object):

Wyświetla interaktywną listę właściwości określonego obiektu JavaScript. Ta lista umożliwia korzystanie z trójkątów ujawniania do sprawdzania zawartości obiektów podrzędnych.

Zauważ, że funkcja console.dir() jest niestandardowa. Zobacz MDN Web Docs

Spróbuj tego:

console.log(JSON.stringify(obj))

Wyświetli wersję stringify obiektu. Tak więc zamiast [object] jako wyjścia otrzymasz zawartość obiektu.

No cóż, Firefox (dzięki @Bojangles za szczegółowe informacje) ma Object.toSource() metoda, która drukuje obiekty jako JSON i function(){}.

To chyba wystarczy do większości celów debugowania.

Jeśli chcesz użyć alertu, aby wydrukować obiekt, możesz to zrobić:

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

Powinien wydrukować każdą właściwość i odpowiadającą jej wartość w formacie string.

Jeśli chcesz zobaczyć dane w formacie tabelarycznym, możesz użyć

console.table(obj);

Tabelę można posortować po kliknięciu na kolumnę tabeli.

Możesz także wybrać kolumny do wyświetlenia:

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

Możesz znaleźć więcej informacji o konsoli.tabela tutaj

W NodeJS można wydrukować obiekt za pomocą util.inspect(obj). Pamiętaj, aby podać głębokość, w przeciwnym razie będziesz mieć tylko płytki Wydruk obiektu.

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;
}

Użycie:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}

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

Przykład:

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

Po prostu użyj

JSON.stringify(obj)

Przykład

var args_string = JSON.stringify(obj);
console.log(args_string);

Lub

alert(args_string);

Również uwaga w JavaScript funkcje są traktowane jako obiekty.

Jako dodatkowa uwaga:

W rzeczywistości możesz przypisać nową właściwość i uzyskać dostęp do konsoli.Zaloguj się lub wyświetl go w alercie

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);

NB: W tych przykładach yourobj definiuje obiekt, który chcesz zbadać.

Pierwszy z moich najmniej ulubionych, ale najbardziej wykorzystywanych sposobów wyświetlania obiektu:

Jest to sposób defacto pokazywania zawartości obiektu

console.log(yourObj)

Wyprodukuje coś w rodzaju :

Myślę, że najlepszym rozwiązaniem jest przeglądanie kluczy obiektów, a następnie wartości obiektów, jeśli naprawdę chcesz zobaczyć, co obiekt przechowuje...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

It wyświetli coś w rodzaju : (na zdjęciu powyżej: klucze / wartości przechowywane w obiekcie)

Istnieje również ta nowa opcja, jeśli używasz ECMAScript 2016 lub nowszego:

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

To da zgrabne wyjście : Rozwiązanie wymienione w poprzedniej odpowiedzi: console.log(yourObj) wyświetla zbyt wiele parametrów i nie jest najbardziej przyjaznym dla użytkownika sposobem wyświetlania danych, które chcesz . Dlatego polecam logowanie kluczy, a następnie wartości osobno.

Następny up:

console.table(yourObj)

Ktoś we wcześniejszym komentarzu zasugerował ten, jednak nigdy mi się nie udało. Jeśli to działa dla kogoś innego w innej przeglądarce lub coś, to chwała! Nadal umieszczam kod tutaj w celach informacyjnych! Wyświetli coś takiego na konsoli :

Użyj tego:

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

Jak to było powiedziane wcześniej, najlepszym i najprostszym sposobem, jaki znalazłem było

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

Aby wydrukować pełny obiekt z węzłem.js {[3] } z kolorami jako bonusem:

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

Kolory są oczywiście opcjonalne, 'depth: null' wydrukuje cały obiekt.

Opcje nie są obsługiwane w przeglądarkach.

Bibliografia:

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

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

Jeśli chcesz wydrukować obiekt o Pełnej długości, możesz użyć

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

Jeśli chcesz wydrukować obiekt konwertując go na łańcuch znaków, to

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

(to zostało dodane do mojej biblioteki na GitHub)

Odkrywanie koła tutaj! Żadne z tych rozwiązań nie zadziałało na moją sytuację. Więc, szybko sfałszowałem odpowiedź wilsonpage'a. Ten nie jest do drukowania na ekranie (przez konsolę, textfield lub cokolwiek innego). Działa dobrze w takich sytuacjach i działa dobrze, jak zażądał OP, dla alert. Wiele odpowiedzi nie odnosi się do alert zgodnie z żądaniem OP. W każdym razie jest jednak sformatowany do transportu danych. Ta wersja wydaje się zwracać bardzo podobny wynik jak toSource(). Nie testowałem przeciwko JSON.stringify, ale zakładam, że chodzi o to samo. Ta wersja jest bardziej jak poly-fil, dzięki czemu można go używać w każdym środowisku. Wynikiem tej funkcji jest poprawna deklaracja obiektu Javascript.

Nie wątpiłbym, gdyby coś takiego już gdzieś było, ale było po prostu krócej, niż spędzać chwilę na szukaniu przeszłych odpowiedzi. A ponieważ to pytanie było moim top hit w google, kiedy zacząłem szukać o tym; pomyślałem, umieszczenie go tutaj może pomóc innym.

Tak czy inaczej, wynik z tej funkcji będzie ciągiem znaków Twojego obiektu, nawet jeśli twój obiekt ma osadzone obiekty i tablice, a nawet jeśli te obiekty lub tablice mają jeszcze inne osadzone obiekty i tablice. (Słyszałem, że lubisz pić? Więc, przepiłowałem twój samochód chłodnicą. A potem zrobiłem Ci lodówkę lodówką. Więc twój chłodnik może pić, podczas gdy twój Super.)

Tablice są przechowywane z [] zamiast {} i dlatego nie mają par klucz/wartość, tylko wartości. Jak zwykłe tablice. Dlatego są tworzone tak, jak robią to tablice.

Również wszystkie ciągi znaków (łącznie z nazwami kluczy) są cytowane, nie jest to konieczne, chyba że te ciągi znaków specjalnych (jak spacja lub ukośnik). Ale nie miałem ochoty tego wykrywać tylko po to, aby usunąć niektóre cytaty, które w przeciwnym razie nadal będą działać dobrze.

Ten wynikowy ciąg może być następnie użyty z eval lub po prostu wrzucenie go do manipulatora var thru string. W ten sposób ponownie tworzysz obiekt z tekstu.

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)+"]";
}

Daj mi znać, jeśli wszystko spieprzyłem, działa dobrze w moich testach. Ponadto, jedynym sposobem na wykrycie typu array było sprawdzenie obecności length. Ponieważ Javascript naprawdę przechowuje tablice jako obiekty, nie mogę sprawdzić typu array (nie ma takiego typu!). Jeśli ktoś zna lepszy sposób, chętnie go usłyszę. Ponieważ, jeśli twój obiekt również ma właściwość o nazwie length, wtedy ta funkcja błędnie potraktuje ją jako tablicę.

EDIT: Dodano sprawdzanie obiektów o wartości null. Dzięki Brock Adams

EDIT: Poniżej znajduje się stała funkcja umożliwiająca drukowanie nieskończenie rekurencyjnych obiektów. To nie wypisuje tego samego co toSource z FF ponieważ toSource wyświetli nieskończoną rekurencję jeden raz, gdzie as, funkcja ta natychmiast ją zabije. Ta funkcja działa wolniej niż ta powyżej, więc dodaję ją tutaj zamiast edycja powyższej funkcji, jako jej tylko potrzebne, jeśli planujesz przekazać obiekty, które link z powrotem do siebie, gdzieś.

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());

Wynik:

{'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}})

Uwaga: próba wydrukowania document.body jest okropnym przykładem. Po pierwsze, FF po prostu wypisuje pusty łańcuch obiektów podczas używania toSource. A przy użyciu powyższej funkcji FF zawiesza się na SecurityError: The operation is insecure.. I Chrome się rozwali Uncaught RangeError: Maximum call stack size exceeded. Oczywiście document.body nie miał być konwertowany na string. Ponieważ albo jest zbyt duża, albo przeciw zasady bezpieczeństwa dostępu do niektórych właściwości. Chyba, że coś tu zepsułem, powiedz!

Oto Jak to zrobić:

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

Potrzebowałem sposobu rekurencyjnego wydruku obiektu, na który pagewil odpowiedział (dzięki!). Zaktualizowałem go trochę, aby uwzględnić sposób drukowania do określonego poziomu i dodać odstępy, aby był odpowiednio wcięty na podstawie bieżącego poziomu, w którym się znajdujemy, aby był bardziej czytelny.

// 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;
};

Użycie:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        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) ); 

Można również użyć dosłownej koncepcji szablonu ES6 do wyświetlania zawartości obiektu JavaScript w formacie string.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

Zawsze używam console.log("object will be: ", obj, obj1). w ten sposób nie muszę robić obejścia z stringify z JSON. Wszystkie właściwości obiektu zostaną ładnie rozwinięte.

Innym sposobem wyświetlania obiektów w konsoli jest JSON.stringify. Sprawdź poniższy przykład:

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));

Funkcja Javascript

<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

var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

Gdzie object jest Twoim obiektem

Lub możesz użyć tego w Chrome Dev tools, zakładka "console":

console.log(object);

Zakładamy obiekt obj = {0:'John', 1:'Foo', 2:'Bar'}

Wydrukuj zawartość obiektu

for (var i in obj){
    console.log(obj[i], i);
}

Wyjście konsoli (Chrome DevTools):

John 0
Foo 1
Bar 2

Wolę używać console.table do uzyskania czystego formatu obiektu, więc wyobraź sobie, że masz ten obiekt:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

I zobaczysz schludną i czytelną tabelę, taką jak ta poniżej:

Mała funkcja pomocnicza, której zawsze używam w moich projektach do prostego, szybkiego debugowania za pośrednictwem konsoli. Inspiracja zaczerpnięta z 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) + ')');
}

Użycie

dd(123.55); Wyniki:

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

Jeśli szukasz inlinera dla Node.js...

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

Użyłem metody druku pagewil, i to działało bardzo ładnie.

Oto moja nieco rozszerzona wersja z (niechlujnymi) wcięciami i wyraźnymi ogranicznikami prop/ob:

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;
};

Kolejna modyfikacja kodu pagewils... jego nie drukuje niczego innego niż ciągi i pozostawia pola liczbowe i logiczne puste i naprawiłem literówkę na drugim typeof tylko wewnątrz funkcji stworzonej przez 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;
};