wake-up-neo.net

Wie kann ich das Standardverhalten von console.log in Safari ändern?

In Safari ohne Add-Ons zeigt console.log das Objekt im letzten Ausführungsstatus an, nicht im Zustand, in dem console.log aufgerufen wurde.

Ich muss das Objekt klonen, um es über console.log auszugeben, um den Status des Objekts in dieser Zeile abzurufen.

Beispiel: 

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}
javascriptdebuggingconsoleloggingclone
143
Wesley

Ich denke, Sie suchen nach console.dir().

console.log() macht nicht das, was Sie wollen, weil es einen Verweis auf das Objekt druckt, und bis Sie es öffnen, wird es geändert. console.dir druckt zum Zeitpunkt des Aufrufs ein Verzeichnis der Eigenschaften im Objekt.

Die folgende JSON-Idee ist gut. Sie könnten sogar die JSON-Zeichenfolge analysieren und ein durchsuchbares Objekt abrufen, wie es Ihnen .dir () geben würde:

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

169
evan

Was ich normalerweise mache, wenn ich sehen möchte, dass es zum Zeitpunkt der Protokollierung steht, ist, dass ich es einfach in einen JSON-String konvertiere.

console.log(JSON.stringify(a));
71
Alex Turpin

Vanille JS:

@ evans Antwort scheint hier am besten. Verwenden Sie einfach (ab) JSON.parse/stringify, um effektiv eine Kopie des Objekts zu erstellen.

console.log(JSON.parse(JSON.stringify(test)));

JQuery-spezifische Lösung:

Mit jQuery.extend können Sie zu einem bestimmten Zeitpunkt eine Momentaufnahme eines Objekts erstellen.

console.log($.extend({}, test));

Was hier tatsächlich passiert ist, dass jQuery ein neues Objekt mit dem Inhalt des Objekts test erstellt und dieses protokolliert (damit es sich nicht ändert).

AngularJS (1) spezifische Lösung:

Angular bietet eine copy-Funktion, die mit dem gleichen Effekt verwendet werden kann: angular.copy

console.log(angular.copy(test));

Vanilla JS Wrapper-Funktion:

Hier ist eine Funktion, die console.log umschließt, jedoch eine Kopie aller Objekte erstellt, bevor sie abgemeldet werden.

Ich habe dies als Antwort auf einige ähnliche, aber weniger robuste Funktionen in den Antworten geschrieben. Es unterstützt mehrere Argumente und versucht nicht, Dinge zu kopieren, wenn sie keine regulären Objekte sind.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

Beispielverwendung: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

25
Zach Lysobey

Dieser > Object in der Konsole zeigt nicht nur den aktuellen Status an. Es verzögert tatsächlich das Lesen des Objekts und seiner Eigenschaften, bis Sie es erweitern.

Zum Beispiel,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

Erweitern Sie dann den ersten Aufruf, es wird korrekt sein, wenn Sie es tun, bevor der zweite console.log zurückkehrt

6
Joe

wenn Sie den Hinweis von Xeon06 verwenden, können Sie seine JSON in einem Objekt analysieren. Hier ist die Protokollfunktion, die ich jetzt zum Ablegen meiner Objekte verwende: 

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}
2
Chris

Möglicherweise möchten Sie das Objekt auf eine für Menschen lesbare Weise protokollieren:

console.log(JSON.stringify(myObject, null, 2));

Dadurch wird das Objekt mit zwei Leerzeichen auf jeder Ebene eingerückt.

Wie kann ich JSON mit JavaScript hübsch drucken?

1
Andrew

Ich habe ein Dienstprogramm definiert:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

und wenn ich mich an der Konsole anmelden möchte, mache ich einfach:

MyLog("hello console!");

Es funktioniert sehr gut!

1
Migio B

Es gibt eine Option zur Verwendung einer Debugger-Bibliothek.

https://debugjs.net/

Fügen Sie einfach das Skript in Ihre Webseite ein und geben Sie Protokollanweisungen ein.

<script src="debug.js"></script>

Protokollierung

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}
1
Takashi Harano

Aktualisieren Sie die Seite einfach, nachdem Sie die Konsole geöffnet haben, oder öffnen Sie die Konsole, bevor Sie die Anforderung an die Zielseite senden.

0
A. Qaoud

Ich bin vielleicht für den Vorschlag erschossen, aber dies kann noch einen Schritt weiter gehen. Wir können das Konsolenobjekt direkt erweitern, um es klarer zu machen.

console.logObject = function(o) {
  (JSON.stringify(o));
}

Ich weiß nicht, ob dies eine Art Bibliothekskollision/Kernschmelze/Riss im Raumzeitkontinuum verursacht. Aber es funktioniert wunderbar in meinen qUnit-Tests. :)

0
Dave