Chrome Geliştirme Araçları'ndaki nesneleri otomatik olarak genişletmenin bir yolu var mı?

HER TEK ZAMAN Konsolda bir nesneyi görüntülemek istiyorum Genişletmek isteyeceğim, bu yüzden bunu HER TEK ZAMAN yapmak için oku tıklatmak yorucu olur :) Bunu otomatik olarak yapmak için bir kısayol veya ayar var mı?

İken çözüm bahsedilmez JSON.stringifyvakaların çoğu için oldukça büyük, birkaç sınırlamaları vardır

• Bu console.logtür nesnelere zarif bir şekilde bakabileceği dairesel referanslara sahip öğeleri işleyemez .
• Ayrıca, büyük bir ağacınız varsa, bazı düğümleri etkileşimli olarak katlama yeteneği araştırmayı kolaylaştırabilir.

İşte yukarıdakilerin her ikisini de yaratıcı bir şekilde (ab) kullanarak çözen bir çözüm ( underscore.js kütüphanesini kullanır ) 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);
        }
    }
})();

Şimdi çalışıyor:

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"
                }
            }
        }
    }
})

Size şöyle bir şey verecek:

MAX_DEPTH değeri istenen düzeye ayarlanabilir ve bu iç içe yerleştirme düzeyinin ötesine ayarlanabilir - genişletilmiş günlük normal konsola geri döner.

Şunun gibi bir şey çalıştırmayı deneyin:

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

Alt çizgi bağımlılığının kolayca kaldırılabileceğini unutmayın; gerekli işlevleri kaynaktan ayıklamanız yeterlidir .

Ayrıca console.groupstandart olmadığını lütfen unutmayın .

Console.table () kullanmayı düşünün .

Bir düğümü ve tüm çocuklarını genişletmek / daraltmak için,

Ctrl + Alt + Tıklama veya Opt + Tıklama ok simgesi

(geliştirici araçları dokümanı Ctrl + Alt + Tıklama listelemesine rağmen , Windows'ta gereken tek şeyin Alt + Tıklama olduğunu unutmayın).

En iyi cevap olmayabilir, ama bunu kodumda bir yerde yapıyorum.

Güncelleme :

JSON.stringifyNesnenizi otomatik olarak genişletmek için kullanın :

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

Tüm bunları yazmak acıyorsa, her zaman bir kısayol işlevi yapabilirsiniz:

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

j(a)

Önceki cevap:

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

o zaman, yerine:

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

Siz yapıyorsunuz:

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

En iyi çözüm değil, ancak kullanımım için iyi çalışıyor. Daha derin nesneler çalışmaz, bu da geliştirilebilecek bir şeydir.

seçenek + Mac'te tıklayın. Sadece şimdi kendim keşfetti ve benim hafta yaptık! Bu her şey kadar sinir bozucu oldu

Lorefnon'un cevabının, underscorejs'a bağlı olmayan değiştirilmiş bir versiyonu:

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);

İşte benim çözümüm, diziler de dahil olmak üzere nesnenin tüm özelliklerini yineleyen bir işlev.

Bu örnekte basit bir çok düzeyli nesne üzerinde yineleme:

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

Ayrıca, özellikler belirli bir sonekle (ör. Açısal nesneler için $) başlıyorsa yinelemeyi hariç tutma olanağınız da vardır.

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>");

İşte fonksiyonun çıktısı:

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

Ayrıca bu işlevi herhangi bir web sayfasına enjekte edebilir ve tüm özellikleri kopyalayıp analiz edebilir, chrome komutunu kullanarak google sayfasında deneyebilirsiniz:

discoverProperties(google,0,'$')

Ayrıca chrome komutunu kullanarak komutun çıktısını kopyalayabilirsiniz:

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

büyük bir nesneniz varsa, JSON.stringfy hata verecektir Yakalanmayan TypeError: Dairesel yapıyı JSON'a dönüştürme, işte onun değiştirilmiş sürümünü kullanma hilesi

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);
};

şimdi kullanabilirsiniz JSON.stringifyOnce(obj)

Gerçekten Chrome ve Safari'nin nesneleri (aşırı tasarlanmış) nasıl konsol haline getirdiğinin hayranı değilim. Konsol varsayılan olarak nesneyi yoğunlaştırır, nesne genişletildiğinde nesne anahtarlarını sıralar ve prototip zincirindeki dahili işlevleri gösterir. Bu özellikler katılım ayarları olmalıdır. Geliştiriciler varsayılan olarak ham sonuçlarla ilgilenir, böylece kodlarının doğru çalışıp çalışmadığını kontrol edebilirler; ve bu özellikler gelişmeyi yavaşlatır ve yanlış sıralama sonuçları verir.

Konsoldaki nesneler nasıl genişletilir

Önerilen

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

   Ayrıca bir işlev olarak da kullanılabilir:

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

2. "Option + Click" (Mac'te Chrome) ve "Alt + Click" (Pencerede Chrome)
   Ancak, tüm tarayıcılar (ör. Safari) tarafından desteklenmez ve Konsol hala prototip türü zincirlerini yazdırır, nesne anahtarları otomatik olarak sıralanır genişletilmiş, vb.

Tavsiye edilmez

En iyi cevaplardan birini tavsiye etmem

1. console.table() - bu yalnızca sığ genişletmedir ve iç içe geçmiş nesneleri genişletmez

2. Özel bir underscore.js işlevi yazın - basit bir çözüm olması gereken şey için çok fazla yük

Bu bir iş, ama benim için çalışıyor.

Bir kontrol / widget otomatik olarak kullanıcı eylemlerine bağlı olarak güncelleme durumunda kullanın. Örneğin, twitter'ın typeahead.js dosyasını kullanırken, pencereden odaklandıktan sonra açılır menü kaybolur ve öneriler DOM'dan kaldırılır.

Dev araçlarında genişletmek istediğiniz düğüme sağ tıklayın ... -> alt ağaç değişikliklerini etkinleştir , bu sizi hata ayıklayıcıya gönderecektir. Vurmaya devam edin F10 veya Shift + F11 e kadar sen dom Bütünü. Bu mutasyona uğradığında o zaman teftiş edebilirsiniz. Hata ayıklayıcı etkin olduğundan Chrome'un kullanıcı arayüzü kilitlidir ve açılır menüyü kapatmaz ve öneriler DOM'dadır.

Sürekli olarak takılmaya ve çıkarılmaya başlanan dinamik olarak eklenen düğümlerin yerleşimini giderirken çok kullanışlıdır.

Başka bir kolay yol da

• JSON.stringify (jsonObject) kullanın
• Sonucu kopyalayıp Visual Studio Code'a yapıştırın
• Sonucu formatlamak için Ctrl + K ve Ctrl + F tuşlarını kullanın
• Biçimlendirilmiş genişletilmiş nesne göreceksiniz

Bunu basit nesneler için denedim.

Document.getElementsBy ... öğesine erişerek öğenizi görüntüleyebilir ve sonuçta elde edilen nesneyi sağ tıklayıp kopyalayabilirsiniz. Örneğin:

document.getElementsByTagName('ion-app') metin editörüne kopyalanabilen javascript nesnesini geri verir ve bunu tam olarak yapar.

Daha da iyisi: ortaya çıkan öğeye sağ tıklayın - 'html olarak düzenle' - 'Tümünü seç' - 'Kopyala' - 'Yapıştır'

Burada görebilirsiniz:

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

En kolay yol:

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

Ayrıca tsconfig dosyasına aşağıdaki kodu da eklemeniz gerekir:

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

Bunun bir sahibi olduğunu iddia ediyorum, sadece yararlı bir kaynaktan bahsediyorum.