So überprüfen Sie Javascript-Objekte


100

Wie kann ich ein Objekt in einer Warnmeldung untersuchen? Wenn Sie ein Objekt normalerweise alarmieren, wird nur der Knotenname ausgegeben:

alert(document);

Ich möchte jedoch die Eigenschaften und Methoden des Objekts im Warnfeld abrufen. Wie kann ich diese Funktionalität nach Möglichkeit erreichen? Oder gibt es noch andere Vorschläge?

Insbesondere suche ich eine Lösung für eine Produktionsumgebung, in der console.log und Firebug nicht verfügbar sind.


9
tun console.logauf Firefox oder Chrome
KJYe.Name葉家仁

1
Ich bin verwirrt. In einer Produktionsumgebung haben Sie tatsächliche Benutzer, richtig? Warum sollten Sie eine Warnung mit Objekteigenschaften auslösen? Vielleicht besteht eine bessere Lösung darin, das Objekt zu serialisieren und in einer Datei zu protokollieren oder eine E-Mail zu senden?
Nathan Long

Vielleicht braucht er / sie die Warnung als Werkzeug, aber die eigentliche Funktionalität, um etwas anderes zu tun. Es kann viele Gründe geben, warum er dies tun möchte, z. B. das Anzeigen von Statistiken oder das Auftreten eines Fehlers oder beides, indem er einfach ein Objekt an das übergibt, mit dem er das Objekt inspiziert.
Christian


Manchmal JSON.stringifyist hilfreich.
BrainSlugs83

Antworten:


56

Die for- inSchleifen für jede Eigenschaft in einem Objekt oder Array. Sie können diese Eigenschaft verwenden, um zum Wert zu gelangen und ihn zu ändern.

Hinweis: Private Objekte können nur eingesehen werden, wenn Sie einen "Spion" verwenden. Grundsätzlich überschreiben Sie das Objekt und schreiben einen Code, der eine For-In-Schleife im Kontext des Objekts ausführt.

Denn in sieht aus wie:

for (var property in object) loop();

Einige Beispielcodes:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

Bearbeiten: Vor einiger Zeit habe ich meinen eigenen Inspektor geschrieben, wenn Sie interessiert sind, teile ich gerne.

Edit 2: Nun, ich habe sowieso einen geschrieben.


Sollte irgendwie vor Rekursion geschützt sein. Hashes ( Wörterbücher ) mit einigen internen HTML-Renderer-IDs? Könnte für Noobs nützlich sein, um diese Prüfung in den Code zu verschieben.
Nakilon

@ Nakilon Ich habe immer Probleme mit der unendlichen Rekursion gehabt, besonders in PHP. Es gibt zwei Möglichkeiten, dies zu beheben: Verwenden eines Tiefenparameters oder Ändern des Hashs und Hinzufügen einer eigenen Eigenschaft, mit der Sie die Rekursion überprüfen. Die Tiefe ist wahrscheinlich sicherer.
Christian

Ich mag diese Version von Zeile 7 besser. Es sieht ein bisschen mehr nach Rubin aus und macht ein paar nette Leerzeichen r.push (i + '"' + p + '" =>' + (t == 'Objekt'? '{\ N' + xinspect (o [p], i +) '') + ('\ n' + i + '},'): o [p] + ''));
BC.

2
Dieser Code hat Safari Mobile auf dem iPhone völlig zerstört. Ich würde mich für die JSON.stringify-Lösung unten entscheiden, um eine sicherere Alternative zu finden.
Daniel

1
Dieses Ding stürzte Safari, Chrom Inspektion eines Objekts, würde nicht empfehlen.
Keno

194

Wie wäre es alert(JSON.stringify(object))mit einem modernen Browser?

Im Falle von TypeError: Converting circular structure to JSONsind hier weitere Optionen: Wie serialisiere ich den DOM-Knoten in JSON, auch wenn Zirkelverweise vorhanden sind?

Die Dokumentation: JSON.stringify()enthält Informationen zum Formatieren oder Verschönern der Ausgabe.


+1 Guter Vorschlag. Ich würde hinzufügen, dass er jsonview ( jsonviewer.stack.hu ) verwenden könnte, um es schön zu sehen.
Christian

2
Wenn Sie es auch schön formatieren möchten, können Sie anrufen : alert(JSON.stringify(object, null, 4), wo 4ist die Anzahl der Leerzeichen, die zum Einrücken verwendet werden.
Jan Molak

Dies gibt mir 'undefiniert' als Ausgabe. Ich versuche, Karma-Tests zu debuggen.
Alex C

1
Dieser Ansatz weist einige Einschränkungen auf. OP sagt, dass sie die Methoden des Objekts überprüfen möchte. stringify zeigt keine Methoden an : JSON.stringify({f: ()=>{}}) => "{}". Wenn das Objekt eine toJSONMethode implementiert , erhalten Sie außerdem, was diese Methode zurückgibt. Dies ist nutzlos, wenn Sie das Objekt untersuchen möchten : JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Morozov

39

Verwenden Sie console.dir(object)und das Firebug-Plugin


4
Dies gab mir die vollständigsten und hilfreichsten Informationen für das, was ich suchte. Vielen Dank.
Shon

2
Ich war mir der console.dirFunktion nicht bewusst . Ich konnte nicht herausfinden, warum ich das vollständige Objekt in Firebug nicht mehr anzeigen konnte. Das hat es jetzt für mich sortiert. Vielen Dank!
Andrew Newby

Ich muss wissen, ob es console.logneben der Anzeige noch weitere Vorteile gibt
user10089632

17

Es gibt nur wenige Methoden:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

In einem Konsolenkontext kann manchmal der .constructor oder .prototype nützlich sein:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

Verwenden Sie Ihre Konsole:

console.log(object);

Oder wenn Sie HTML-Dom-Elemente untersuchen, verwenden Sie console.dir (Objekt). Beispiel:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

Oder wenn Sie ein Array von js-Objekten haben, können Sie Folgendes verwenden:

console.table(objectArr);

Wenn Sie viel console.log (Objekte) ausgeben, können Sie auch schreiben

console.log({ objectName1 });
console.log({ objectName2 });

Auf diese Weise können Sie die in die Konsole geschriebenen Objekte kennzeichnen.


Diese angezeigten Werte ändern sich dynamisch in Echtzeit, was für Debugging-Zwecke irreführend sein kann
user10089632

Verwenden Sie in Chrome Ihre Konsoleneinstellungen und klicken Sie auf Protokoll beibehalten. Selbst wenn Ihr Skript Sie jetzt auf eine andere Seite weiterleitet, wird Ihre Konsole nicht gelöscht.
Richard Torcato

Es scheint, dass dieses Problem mit Firefox zusammenhängt, da in Chrome die angezeigten Werte immer noch bestehen, es sei denn, Sie re console.log (). Möglicherweise schlagen Sie vor, zu Chrome zu wechseln, aber manchmal testen Sie die Verfügbarkeit der Browserfunktionen. Trotzdem danke für den Tipp, der nützlich sein kann.
user10089632

Ich kann nicht verwenden, consoleweil ich styling stackoverflow.com/q/7505623/1480391 verwende und es nicht kompatibel ist
Yves M.

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

Wie macht es console.log ()? :)
Christian

Verwenden Sie Firefox oder Chrome. Holen Sie sich Firebug für Firefox. ein Muss haben
moe

Ich war sarkastisch. Das OP hat speziell nach JS-Code gefragt, und wenn Sie nicht vorschlagen, dass er sich mit Firebug / Fox / Chrome befasst, weiß ich nicht, wo er eine Antwort finden würde.
Christian

6

Dies ist eine offensichtliche Abzocke von Christians ausgezeichneter Antwort. Ich habe es nur ein bisschen lesbarer gemacht:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

4

Hier ist mein Objektinspektor, der besser lesbar ist. Da das Aufschreiben des Codes zu lange dauert, können Sie ihn unter herunterladen http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Verwenden Sie wie folgt:

document.write(inspect(object));

2
Das ist normalerweise der Fall (und es ist definitiv die offizielle Anleitung - poste keine Links), OTOH, für etwas, das so versioniert ist, kann es irgendwie nett sein, da du weißt, dass du immer auf das schauen wirst Der neueste Code und keine veraltete Sache, die vor Jahren veröffentlicht wurde und möglicherweise nicht mehr funktioniert ... - Außerdem würde dieser riesige Codeblock ziemlich schrecklich aussehen, wenn er in eine Textwand eingefügt wird. SO antworte ... - Off Topic: Es wäre schön, wenn es auf SO eine Möglichkeit gäbe, "spoiler" -ähnliche Tags für Code zu haben und in der Lage zu sein, eine Verbindung zu einer externen Quelle
herzustellen
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.