web-dev-qa-db-ja.com

Chromeコンソールでオブジェクト全体を表示する方法は？

var functor=function(){
    //test
}

functor.prop=1;

console.log(functor);

これはファンクターの機能部分のみを表示し、コンソールでファンクターのプロパティを表示することはできません。

javascriptdebugginggoogle-chrome
144
lovespring

console.dir()を使用して、次のように.toString()バージョンの代わりにクリックスルーできる参照可能なオブジェクトを出力します。

console.dir(functor);

指定されたオブジェクトのJavaScript表現を出力します。ログに記録されるオブジェクトがHTML要素である場合、そのDOM表現のプロパティが印刷されます [1]

[1] https://developers.google.com/web/tools/chrome-devtools/debug/console/console-reference#dir

230
Nick Craver

以下を試すと、より良い結果が得られる場合があります。

console.log(JSON.stringify(functor));
113
BastiBen

以下を試すと、さらに良い結果が得られる可能性があります。

console.log(JSON.stringify(obj, null, 4));
16
Trident D'Gao
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));
12
Kean Amaral

これは私にとって完璧に機能しました：

for(a in array)console.log(array[a])

抽出されたデータのクリーンアップと事後使用を検索/置換するためにコンソールで作成された配列を抽出できます。

8
domSurgeon

Trident D'Gaoの回答の関数を作成しました。

function print(obj) {
  console.log(JSON.stringify(obj, null, 4));
}

使用方法

print(obj);
0
Jens Törnell

コンソールに物事を便利に印刷する関数を書きました。

// function for debugging stuff
function print(...x) {
    console.log(JSON.stringify(x,null,4));
}

// how to call it
let obj = { a: 1, b: [2,3] };
print('hello',123,obj);

コンソールに出力されます：

[
    "hello",
    123,
    {
        "a": 1,
        "b": [
            2,
            3
        ]
    }
]
0
John Henckel

最新のブラウザでは、console.log(functor)は完全に機能します（console.dirと同じ動作をします）。

0
akim