Chrome 开发工具中的 console.log 对象/函数属性答案

【问题标题】：console.log object/function properties in Chrome dev toolsChrome 开发工具中的 console.log 对象/函数属性
【发布时间】：2017-01-08 16:08:03
【问题描述】：

记录一个函数/类

或平面对象/数组

导致记录字符串表示形式（没有下拉 ► 图标）。

记录复杂对象（具有自己的非标量属性）导致具有分层表示：

我希望所有记录的对象都采用后一种行为 - 包括在控制台中键入的内容和使用 console.log 记录的内容。

因此，只有 Firebug 控制台输出看起来比 Chrome 开发工具更有用。

我知道console.dir，尽管在控制台中输入console.dir(someVar) 而不是someVar 效率很低，并且在现有应用程序中将所有console.log 替换为console.dir 是不合适的。

其他console 方法（console.warn、console.error）与console.log 有相同的问题，但它们没有console.dir 对应的方法！

可以更改此 Chrome 开发工具的行为吗？有什么可以帮助解决这个问题吗？

【问题讨论】：

作为猜测 - 您可能会覆盖普通的 console 对象及其功能。就个人而言，我不会真的认为这是一个大问题，只需花费几分钟的努力，这似乎真的太多了。可能有一个库可以替代原版 console，但我还没有真正找到。
仅供参考：您无需输入console.dir(someVar)，只需输入dir(someVar)

【解决方案1】：

如果您只想快速获得一些东西，我通常只会使用dir(myObj)。我认为替换您的日志语句并不费力。

但是，您可以查看Custom Object Formatters in Chrome DevTools。您需要在 DevTools 设置中启用此功能，然后使用您想要的标题和（可选）正文实现 window.devtoolsFormatters 对象。

根据传入的对象类型，您可以为每个对象提供不同的格式化程序。例如，您可以使用Array.isArray(myObj) 检查对象是否为数组，然后您可以遍历数组属性并公开和格式化您认为相关的那些作为主体的返回对象。

您每次都需要将其作为 sn-p 运行，或者创建一个 Chrome 扩展程序以在您运行应用程序时自动注入它。

【讨论】：