Chrome开发工具中的console.log对象/功能属性

Question

记录功能/类

或扁平物体/阵列

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

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

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

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

我知道console.dir，但在控制台中输入console.dir(someVar)而不是someVar效率很低，并不适合替换所有console.log在现有应用中出现console.dir。

其他console方法（console.warn，console.error）与console.log存在同样的问题，但他们没有console.dir个对应方式！

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

Answer 1

如果您只是想要快速的话，我通常会使用dir(myObj)。我不认为更换日志语句需要付出太多努力。

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

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

您需要每次都将其作为代码段运行，或创建Chrome扩展程序以在运行应用程序时自动注入此内容。