console.log object/function Chrome 开发工具中的属性

console.log object/function properties in Chrome dev tools

正在记录 function/class

或单位object/array

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

记录复杂对象(具有自己的非标量属性)导致具有分层表示:

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

记录的内容

出于这个原因,只有 Firebug 控制台输出看起来比 Chrome 开发工具更有用。

我知道 console.dir,尽管在控制台中输入 console.dir(someVar) 而不是 someVar 效率低下,并且不适合替换所有 console.log在现有应用中出现 console.dir

其他 console 方法(console.warnconsole.error)与 console.log 存在相同的问题,但它们没有 console.dir 对应方法!

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

如果您只想快速完成一些事情,我通常会使用 dir(myObj)。我认为替换您的日志语句并不费力。

不过,您可以查看 Custom Object Formatters in Chrome DevTools。您需要在 DevTools 设置中启用此功能,然后使用您想要的 header 和(可选)body 实现 window.devtoolsFormatters object。

根据传入的 object 的类型,您可以为每个类型提供不同的格式化程序。例如,您可以检查 object 是否是一个带有 Array.isArray(myObj) 的数组,然后您可以遍历数组属性并公开您认为相关的属性并将其格式化为 return object 为 body。

您每次都需要 运行 将此作为一个片段,或者创建一个 Chrome 扩展以在您 运行 您的应用程序时自动注入此内容。