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

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

言及されているソリューションJSON.stringifyはほとんどの場合に非常に優れていますが、いくつかの制限があります

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

以下は、クリエイティブに（ab）を使用して上記の両方を解決するソリューション（underscore.jsライブラリを使用）ですconsole.group。

expandedLog = (function(){
    var MAX_DEPTH = 100;

    return function(item, depth){

        depth = depth || 0;

        if (depth > MAX_DEPTH ) {
            console.log(item);
            return;
        }

        if (_.isObject(item)) {
            _.each(item, function(value, key) {
            console.group(key + ' : ' +(typeof value));
            expandedLog(value, 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"
                }
            }
        }
    }
})

次のようなものになります：

MAX_DEPTHの値は目的のレベルに調整でき、そのネストレベルを超えます-拡張ログは通常のconsole.logにフォールバックします

次のようなものを実行してみてください：

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

アンダースコアの依存関係は簡単に削除できることに注意してください。ソースから必要な関数を抽出するだけです。

また、console.group規格外ですのでご注意ください。

console.table（）の使用を検討してください。

ノードとそのすべての子を展開/縮小するには、

Ctrl + Alt + ClickまたはOpt + Click on arrow icon

（開発ツールのドキュメントにはCtrl + Alt +クリックがリストされていますが、Windowsでは必要なのはAlt +クリックのみです）。

最善の答えではないかもしれませんが、私はこれを私のコードのどこかで行ってきました。

更新：

を使用JSON.stringifyしてオブジェクトを自動的に展開します。

> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
> JSON.stringify(a, true, 2)
"[
  {
    "name": "Joe",
    "age": 5
  },
  {
    "name": "John",
    "age": 6
  }
]"

入力するのが難しい場合は、いつでもショートカット関数を作成できます。

j = function(d) {
    return JSON.stringify(d, true, 2)
}

j(a)

以前の答え：

pretty = function(d)
{
  var s = []
  for (var k in d) {
    s.push(k + ': ' + d[k])
  }
  console.log(s.join(', '))
}

次に、代わりに：

-> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
-> a
<- [Object, Object]

あなたがやる：

-> a.forEach(pretty)
<- name: Joe, age: 5
   name: John, age: 6

最善の解決策ではありませんが、私の使用法ではうまく機能します。より深いオブジェクトは機能しないので、これを改善することができます。

Macでoption +クリック。今それを自分で発見して、私の週を作りました！これは何よりも煩わしい

これはアンダースコアに依存しないlorefnonの答えの修正版です：

var expandedLog = (function(MAX_DEPTH){

    return function(item, depth){

        depth    = depth || 0;
        isString = typeof item === 'string'; 
        isDeep   = depth > MAX_DEPTH

        if (isString || isDeep) {
            console.log(item);
            return;
        }

        for(var key in item){
            console.group(key + ' : ' +(typeof item[key]));
            expandedLog(item[key], depth + 1);
            console.groupEnd();
        }
    }
})(100);

これが私のソリューションです。配列を含む、オブジェクトのすべてのプロパティを反復処理する関数です。

この例では、単純なマルチレベルオブジェクトを繰り返し処理します。

    var point = {
            x: 5,
            y: 2,
            innerobj : { innerVal : 1,innerVal2 : 2 },
            $excludedInnerProperties : { test: 1},
            includedInnerProperties : { test: 1}
        };

プロパティが特定のサフィックスで始まる場合（つまり、角度付きオブジェクトの場合は$）、反復を除外することもできます。

discoverProperties = function (obj, level, excludePrefix) {
        var indent = "----------------------------------------".substring(0, level * 2);
        var str = indent + "level " + level + "\r\n";
        if (typeof (obj) == "undefined")
            return "";
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                var propVal;
                try {
                    propVal = eval('obj.' + property);
                    str += indent + property + "(" + propVal.constructor.name + "):" + propVal + "\r\n";
                    if (typeof (propVal) == 'object' && level < 10 && propVal.constructor.name != "Date" && property.indexOf(excludePrefix) != 0) {
                        if (propVal.hasOwnProperty('length')) {
                            for (var i = 0; i < propVal.length; i++) {
                                if (typeof (propVal) == 'object' && level < 10) {
                                    if (typeof (propVal[i]) != "undefined") {
                                        str += indent + (propVal[i]).constructor.name + "[" + i + "]\r\n";
                                        str += this.discoverProperties(propVal[i], level + 1, excludePrefix);
                                    }
                                }
                                else
                                    str += indent + propVal[i].constructor.name + "[" + i + "]:" + propVal[i] + "\r\n";
                            }
                        }
                        else
                            str += this.discoverProperties(propVal, level + 1, excludePrefix);
                    }
                }
                catch (e) {
                }
            }
        }
        return str;
    };


var point = {
        x: 5,
        y: 2,
        innerobj : { innerVal : 1,innerVal2 : 2 },
        $excludedInnerProperties : { test: 1},
        includedInnerProperties : { test: 1}
    };

document.write("<pre>" + discoverProperties(point,0,'$')+ "</pre>");

関数の出力は次のとおりです。

level 0
x(Number):5
y(Number):2
innerobj(Object):[object Object]
--level 1
--innerVal(Number):1
--innerVal2(Number):2
$excludedInnerProperties(Object):[object Object]
includedInnerProperties(Object):[object Object]
--level 1
--test(Number):1

この関数を任意のWebページに挿入し、すべてのプロパティをコピーして分析することもできます。chromeコマンドを使用して、Googleページで試してください。

discoverProperties(google,0,'$')

また、chromeコマンドを使用してコマンドの出力をコピーすることもできます：

copy(discoverProperties(myvariable,0,'$'))

大きなオブジェクトがある場合、JSON.stringfyはエラーUncaught TypeError：循環構造をJSONに変換します、ここでそれを修正したバージョンを使用するトリックです

JSON.stringifyOnce = function(obj, replacer, indent){
    var printedObjects = [];
    var printedObjectKeys = [];

    function printOnceReplacer(key, value){
        if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
        return 'object too long';
        }
        var printedObjIndex = false;
        printedObjects.forEach(function(obj, index){
            if(obj===value){
                printedObjIndex = index;
            }
        });

        if ( key == ''){ //root element
             printedObjects.push(obj);
            printedObjectKeys.push("root");
             return value;
        }

        else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
            if ( printedObjectKeys[printedObjIndex] == "root"){
                return "(pointer to root)";
            }else{
                return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase()  : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
            }
        }else{

            var qualifiedKey = key || "(empty key)";
            printedObjects.push(value);
            printedObjectKeys.push(qualifiedKey);
            if(replacer){
                return replacer(key, value);
            }else{
                return value;
            }
        }
    }
    return JSON.stringify(obj, printOnceReplacer, indent);
};

今、あなたは使うことができます JSON.stringifyOnce(obj)

私は、ChromeとSafariがオブジェクトをコンソール化する方法（過剰設計）のファンではありません。デフォルトでは、コンソールはオブジェクトを圧縮し、オブジェクトが展開されたときにオブジェクトキーをソートし、プロトタイプチェーンの内部関数を表示します。これらの機能はオプトイン設定である必要があります。デフォルトでは、開発者はおそらく生の結果に関心があるため、コードが正しく機能しているかどうかを確認できます。これらの機能は開発を遅くし、不正なソート結果をもたらします。

コンソールでオブジェクトを展開する方法

オススメ

1. console.log(JSON.stringify({}, undefined, 2));

   関数としても使用できます：

   console.json = object => console.log(JSON.stringify(object, undefined, 2));
   
   console.json({});
   

2. 「オプション+クリック」（MacのChrome）および「Alt +クリック」（ウィンドウのChrome）
   ただし、すべてのブラウザー（Safariなど）でサポートされているわけではなく、コンソールはプロトタイプタイプのチェーンを印刷します。拡大等

非推奨

どちらの回答もお勧めしません

1. console.table() -これは浅い展開のみで、ネストされたオブジェクトは展開しません

2. カスタムunderscore.js関数を記述します-単純なソリューションであるべきものに対してオーバーヘッドが多すぎます

それは回避策ですが、私にとってはうまくいきます。

ユーザーの操作に応じてコントロール/ウィジェットが自動更新される場合に使用します。たとえば、twitterのtypeahead.jsを使用している場合、ウィンドウの外にフォーカスすると、ドロップダウンが消え、提案がDOMから削除されます。

開発ツールで、展開したいノードを右クリックして、[ ブレークを有効にする...]-> [サブツリーの変更 ]をクリックすると、デバッガーに移動します。打ってくださいF10またはShiftキー+ F11それまではあなたのdom突然変異しています。それが変化したら、検査できます。デバッガーがアクティブであるため、ChromeのUIはロックされ、ドロップダウンを閉じず、提案はDOMに残っています。

動的に挿入され、常に挿入および削除が開始されるノードのレイアウトのトラブルシューティングを行うときに非常に便利です。

別の簡単な方法は

• JSON.stringify（jsonObject）を使用
• 結果をVisual Studio Codeにコピーして貼り付けます
• Ctrl + KとCtrl + Fを使用して結果をフォーマットする
• フォーマットされた拡張オブジェクトが表示されます

私は単純なオブジェクトに対してこれを試しました。

あなたはここで見ることができます：

https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/

最も簡単な方法：

import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);

また、tsconfigに次のコードを追加する必要があります。

{  "compilerOptions": {  ..."resolveJsonModule": true, "esModuleInterop": true... } }

私はこれの所有権を主張せず、役立つ情報源を参照するだけです。

document.getElementsBy ...にアクセスして要素を表示し、右クリックして結果のオブジェクトをコピーすることができます。例えば：

document.getElementsByTagName('ion-app') テキストエディタにコピーして貼り付けることができるJavaScriptオブジェクトを返し、それを完全に実行します。

より良い：結果の要素を右クリック-「HTMLとして編集」-「すべて選択」-「コピー」-「貼り付け」