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

IT技术 javascript debugging google-chrome
2021-03-10 04:06:27
var functor=function(){
    //test
}

functor.prop=1;

console.log(functor);

这仅显示函子的功能部分,不能在控制台中显示函子的属性。

6个回答

使用console.dir()输出可浏览的对象,你可以点击,而不是通过.toString()的版本,就像这样:

console.dir(functor);

打印指定对象的 JavaScript 表示。如果记录的对象是 HTML 元素,则打印其 DOM 表示的属性[1]


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

应该注意的是,只需varName在 Chrome 控制台中打印并按 Enter 即可获得与console.dir(varName).
2021-05-13 04:06:27

如果您尝试以下方法,您可能会获得更好的结果:

console.log(JSON.stringify(functor));
这个答案很好,但我认为不适用于上面的示例,在新选项卡中尝试并返回未定义
2021-04-17 04:06:27
出于对这个答案的所有应有的尊重,最终它返回一个表示对象的字符串,而不是控制台中的“可浏览”对象,就像问题就在这里一样。没错,如果你通过 JSON.parse 运行这个输出字符串,它会返回到它的对象格式,但是控制台仍然会显示一个“.toString()”,我们又回到了原点。此处使用“console.dir”的答案最适合手头的问题。
2021-04-27 04:06:27

如果您尝试以下方法,您可能会获得更好的结果:

console.log(JSON.stringify(obj, null, 4));
这个答案通过格式化输出改进了@BastiBen's。
2021-04-27 04:06:27
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));

这对我来说非常有效:

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

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

更详细一点: for (i in arr) { console.log(i); console.log(arr[i]); }
2021-04-25 04:06:27
它不会输出不可枚举的属性和方法
2021-05-06 04:06:27