web-dev-qa-db-ja.com

Safariでconsole.logのデフォルトの動作を変更するにはどうすればよいですか？

アドオンのないSafariでは、console.logは、console.logが呼び出されたときの状態ではなく、実行の最後の状態でオブジェクトを表示します。

その行でオブジェクトの状態を取得するには、console.logを介して出力するためにオブジェクトを複製する必要があります。

例：

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

console.dir()を探していると思います。

console.log()は、オブジェクトへの参照を出力するので、あなたが望むことをしません。そして、それを開くと、それは変更されます。 console.dirは、オブジェクトを呼び出したときにオブジェクトのプロパティのディレクトリを出力します。

以下のJSONのアイデアは良いものです。 JSON文字列を解析し、.dir（）で得られるような参照可能なオブジェクトを取得することもできます。

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

169
evan

ログに記録された時点の状態を確認したい場合に通常行うことは、JSON文字列に変換するだけです。

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

バニラJS：

@ evan's answer は、ここが最良のようです。 JSON.parse/stringifyを使用して（ab）、オブジェクトのコピーを効果的に作成します。

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

JQuery固有のソリューション：

jQuery.extend を使用すると、特定の時点でオブジェクトのスナップショットを作成できます

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

ここで実際に行われているのは、jQueryがtestオブジェクトのコンテンツを使用して新しいオブジェクトを作成し、それをログに記録することです（したがって、変更されません）。

AngularJS（1）固有のソリューション：

Angularは、同じ効果に使用できるcopy関数を提供します。 angular.copy

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

Vanilla JSラッパー関数：

console.logをラップするが、ログアウトする前にオブジェクトのコピーを作成する関数を次に示します。

これは、回答の中のいくつかの類似しているが堅牢性の低い関数に対応して作成しました。複数の引数をサポートしており、notオブジェクトがregularでない場合はコピーしようとします。

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

使用例：consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

25
Zach Lysobey

コンソールの> Objectは、現在の状態を示しているだけではありません。実際には、オブジェクトを展開するまでオブジェクトとプロパティの読み取りを延期しています。

例えば、

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

次に、最初の呼び出しを展開します。2番目のconsole.logが返される前に行う場合は正しいです

6
Joe

xeon06のヒントを使用すると、オブジェクト内の彼のJSONを解析できます。ここに、オブジェクトをダンプするために使用するログ関数を示します。

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

人間が読める方法でオブジェクトを記録することができます。

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

これにより、各レベルで2つのスペースでオブジェクトがインデントされます。

JavaScriptを使用してJSONをきれいに印刷するにはどうすればよいですか

1
Andrew

ユーティリティを定義しました：

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

そして、コンソールにログオンしたいときは、次のようにします：

MyLog("hello console!");

とてもうまくいきます！

1
Migio B

デバッガーライブラリを使用するオプションがあります。

https://debugjs.net/

スクリプトをWebページに含めて、ログステートメントを配置するだけです。

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

ロギング

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

コンソールを開いた後にページを更新するか、ターゲットページにリクエストを送信する前にコンソールを開きます。

0
A. Qaoud

私はこれを提案するために撃たれるかもしれませんが、これはさらに一歩進むことができます。コンソールオブジェクト自体を直接拡張して、より明確にすることができます。

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

これが時空連続体で何らかのタイプのライブラリ衝突/核溶解/リッピングを引き起こすかどうかはわかりません。しかし、私のqUnitテストではうまく機能します。 :)

0
Dave