[解決済み] Chrome Dev Toolsでオブジェクトを自動展開する方法はありますか？

質問

コンソールでオブジェクトを表示するたびに、それを展開したくなることがあるので、毎回矢印をクリックして展開するのは面倒です :) これを自動的に行うためのショートカットや設定はありますか？

解決方法は？

一方 解決策 言及 JSON.stringify は、ほとんどの場合において非常に優れていますが、いくつかの制限があります。

• のような循環参照を持つアイテムは扱えません。 console.log は、そのようなオブジェクトをエレガントに処理することができます。
• また、大きなツリーがある場合、いくつかのノードをインタラクティブに折りたたむことができれば、探索を容易にすることができます。

この2つを解決するために、次のような工夫をしています。 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 にフォールバックします。

などを実行してみてください。

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

<イグ

また、以下の点にもご注意ください。 console.group は非標準です。