Chrome dev工具中的console.log对象/函数属性

console.log object/function properties in Chrome dev tools(Chrome dev工具中的console.log对象/函数属性)

问题描述

记录函数/类

或平面对象/数组

结果是记录字符串表示形式(没有下拉►图标)。

记录复杂对象(具有自己的非标量属性)会产生分层表示：

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

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

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

其他console方法(console.warn，console.error)与console.log有相同的问题，但没有对应的console.dir方法！

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

推荐答案

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

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

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

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

这篇关于Chrome dev工具中的console.log对象/函数属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！