Chrome开发工具中是否可以自动展开对象? [英] Is there a way to auto expand objects in Chrome Dev Tools?

问题描述

每一次我都会在控制台中查看一个对象，因此我想扩展它，因此每次单击时都必须单击箭头来完成它，这很烦人:)是否有快捷方式或设置来完成此操作自动吗?

EVERY SINGLE TIME I view an object in the console I am going to want to expand it, so it gets tiresome to have to click the arrow to do this EVERY SINGLE TIME :) Is there a shortcut or setting to have this done automatically?

推荐答案

解决方案提到

While the solution mentioning JSON.stringify is pretty great for most of the cases, it has a few limitations

• 它不能处理具有循环引用的项目，因为console.log可以优雅地处理此类对象.
• 此外，如果您有一棵大树，那么交互式折叠一些节点的能力将使探索变得更容易.

• It can not handle items with circular references where as console.log can take care of such objects elegantly.
• Also, if you have a large tree, then ability to interactively fold away some nodes can make exploration easier.

这里是一种解决方案，它通过使用 console.group :

Here is a solution that solves both of the above by creatively (ab)using console.group:

function expandedLog(item, maxDepth = 100, depth = 0){
    if (depth > maxDepth ) {
        console.log(item);
        return;
    }
    if (typeof item === 'object' && item !== null) {
        Object.entries(item).forEach(([key, value]) => {
            console.group(key + ' : ' +(typeof value));
            expandedLog(value, maxDepth, depth + 1);
            console.groupEnd();
        });
    } else {
        console.log(item);
    }
}

正在运行:

expandedLog({
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
})

会给你类似的东西

maxDepth的值可以调整到所需的级别，并且超出该嵌套级别-扩展的日志将退回到通常的console.log

The value of maxDepth can be adjusted to a desired level, and beyond that level of nesting - expanded log will fall back to usual console.log

尝试运行类似的内容:

x = { a: 10, b: 20 }
x.x = x 
expandedLog(x)

还请注意，console.group是非标准的.

Also please note that console.group is non-standard.

这篇关于Chrome开发工具中是否可以自动展开对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！