如何在 Chrome 控制台中显示完整对象？

Posted 2023-02-22

【中文标题】如何在 Chrome 控制台中显示完整对象？

【英文标题】：How to show full object in Chrome console?

【发布时间】：2011-05-27 20:17:33

【问题描述】：

var functor=function()
    //test


functor.prop=1;

console.log(functor);

这里只显示函子的函数部分，不能在控制台显示函子的属性。

【参考方案1】：

我制作了 Trident D'Gao 答案的函数。

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

如何使用

print(obj);

【参考方案2】：

如果你尝试，你可能会得到更好的结果：

console.log(JSON.stringify(obj, null, 4));

【讨论】：

这个答案通过格式化输出改进了@BastiBen。

【参考方案3】：

在现代浏览器中，console.log(functor) 可以完美运行（行为与 console.dir 相同）。

【参考方案4】：

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

【参考方案5】：

我写了一个函数来方便地将东西打印到控制台。

// 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
        ]
    
]

【参考方案6】：

输出obj：

console.log(obj, null, 4)

【参考方案7】：

使用console.dir() 输出一个可以点击的可浏览对象，而不是.toString() 版本，如下所示：

console.dir(functor);

打印指定对象的 javascript 表示。如果记录的对象是 html 元素，则打印其 DOM 表示的属性 ^[1]

---

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

【讨论】：

需要注意的是，只要在 Chrome 控制台中打印 varName 并按 Enter 即可获得与 console.dir(varName) 相同的效果。

【参考方案8】：

这对我来说非常有效：

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

您可以提取在控制台中创建的任何数组，用于查找/替换清理以及提取的数据的后续使用

【讨论】：

更详细一点：for (i in arr) console.log(i); console.log(arr[i]);

不会输出不可枚举的属性和方法

【参考方案9】：

如果你尝试，你可能会得到更好的结果：

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

【讨论】：

这个答案很好，但我认为不适用于上面的示例，在新标签中尝试并返回 undefined

完全尊重这个答案，最终它返回一个代表对象的字符串，而不是控制台中的“可浏览”对象，就像问题就在这里一样。诚然，如果您通过 JSON.parse 运行此输出字符串，它将返回其对象格式，但随后控制台仍将显示“.toString()”，我们又回到了原点。这里使用“console.dir”的答案最适合手头的问题。