在前端开发过程中，我们经常需要使用浏览器的开发者工具来调试我们的代码。其中，Chrome 控制台是最受欢迎的一种。然而，有时候当我们在 Console 中打印一个对象时，它可能会被截断或折叠，导致我们无法看到完整的内容。本文将介绍如何在 Chrome 控制台中显示完整对象，并提供相关示例代码。
为什么对象会被截断或折叠？
当我们在 Console 中打印一个对象时，如果对象非常大或嵌套层数较多，Chrome 控制台可能会将其截断或折叠，以便更好地展示数据。这样做的目的是为了避免控制台输出过于冗长和混乱。但是，在某些情况下，展示完整的对象是很有必要的。
有两种方法可以在 Chrome 控制台中显示完整对象：使用 console.dir() 方法或在 Console 界面上设置相应的选项。
使用 console.dir() 方法
console.dir() 是一个内置的 Console 方法，用于以树形结构输出 JavaScript 对象的属性和方法。与 console.log() 不同的是，console.dir() 可以展示完整的对象内容。
以下是一个示例：
const obj = {a: {b: {c: 'hello world'}}};
console.dir(obj);在 Chrome 控制台中运行上述代码，你会看到一个类似下面这样的输出：
{ a:
{ b:
{ c: "hello world" }
}
}在 Console 界面上设置相应的选项
另一种显示完整对象的方法是在 Console 界面上设置相应的选项。具体步骤如下：
打开 Chrome 控制台。
点击控制台左上角的三个点，选择 "Settings"。
在 "Preferences" 标签页下找到 "Console" 部分。
勾选 "Enable custom formatters" 选项。
在 "Large object truncation" 下拉框中选择 "Show complete object".
关闭 "Settings" 窗口，重新运行打印对象的代码。
以下是示例代码：
const obj = {a: {b: {c: 'hello world'}}};
console.log(obj);在 Chrome 控制台中按照以上步骤进行设置后，你会看到一个类似下面这样的输出：
{ a:
{ b:
{ c: "hello world" }
}
}总结
本文介绍了两种在 Chrome 控制台中显示完整对象的方法：使用 console.dir() 方法和在 Console 界面上设置相应的选项。无论你是在开发过程中需要查看大型对象，还是在调试代码时需要更好地展示数据，这些技巧都能帮助你提高效率和准确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10335
