Is er een manier om objecten automatisch uit te breiden in Chrome Dev Tools?

ELKE KEER Ik bekijk een object in de console Ik wil het uitbreiden, dus het wordt vervelend om ELKE KEER op de pijl te moeten klikken om dit te doen 🙂 Is er een snelkoppeling of instelling om dit te doen automatisch?

Antwoord 1, autoriteit 100%

Overweeg het gebruik van console.table().

Antwoord 2, autoriteit 75%

Om een ​​knooppunt en al zijn onderliggende items uit te vouwen / samen te vouwen,

Ctrl + Alt + Klikof Opt + Klikop het pijlpictogram

(merk op dat hoewel het document voor dev-toolsCtrl + Alt + Click vermeldt, in Windows alles wat nodig is is Alt + Klik).

Antwoord 3, autoriteit 42%

Terwijl de oplossingmet vermelding van JSON.stringifyis in de meeste gevallen best goed, het heeft een paar beperkingen

• Het kan geen items aan met kringverwijzingen terwijl console.logdergelijke objecten op elegante wijze kan behandelen.
• Als je een grote boom hebt, kan de mogelijkheid om interactief enkele knooppunten op te vouwen het verkennen gemakkelijker maken.

Hier is een oplossing die beide bovenstaande problemen oplost door creatief (ab)gebruik te maken van 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);
    }
}

Nu actief:

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

Geeft u zoiets als:

De waarde van maxDepthkan worden aangepast tot een gewenst niveau, en buiten dat niveau van nesting valt het uitgebreide logboek terug naar de gebruikelijke console.log

Probeer zoiets uit te voeren als:

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

Houd er rekening mee dat console.groupniet-standaard is.

Antwoord 4, autoriteit 40%

Misschien niet het beste antwoord, maar ik heb dit ergens in mijn code gedaan.

Bijwerken:

Gebruik JSON.stringifyom uw object automatisch uit te breiden:

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

Je kunt altijd een sneltoetsfunctie maken als het pijn doet om dat allemaal uit te typen:

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

Vorigeantwoord:

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

Dan, in plaats van:

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

u doet:

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

Niet de beste oplossing, maar werkt goed voor mijn gebruik. Diepere objecten zullen niet werken, dus dat is iets dat kan worden verbeterd.

Antwoord 5, Autoriteit 10%

Optie + Klik op een Mac. Ontdekte het nu zelf en heb mijn week gemaakt! Dit is net zo irritant als iets

Antwoord 6, Autoriteit 8%

Hier is een gewijzigde versie van het antwoord van Lorefnon dat niet afhankelijk is van underscorejs:

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

Antwoord 7, Autoriteit 4%

Ik ben echt geen fan van hoe chroom- en safari-consoles objecten (overgemaakt). Console Standaard condenseert het object, sorteert de objecttoetsen wanneer het object wordt uitgebreid en toont de interne functies van de prototype-keten. Deze functies moeten opt-in-instellingen zijn. De ontwikkelaars standaard zijn waarschijnlijk geïnteresseerd in de onbewerkte resultaten, zodat ze kunnen controleren of hun code correct werkt; En deze kenmerken de ontwikkeling en geven onjuiste sorteerresultaten.

Hoe u objecten in de console wilt uitzetten

Aanbevolen

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

   zou ook kunnen gebruiken als een functie:

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

2. “Optie + Klik op” (Chrome op Mac) en “Alt + Click” (chroom op venster)
   Het wordt echter niet ondersteund door alle browsers (bijvoorbeeld Safari) en console drukt nog steeds het prototype-type kettingen af, objecttoetsen worden automatisch gesorteerd wanneer ze worden uitgebreid, enz.

Niet aanbevolen

Ik zou niet aanraden van een van de bovenste antwoorden

1. console.table()– Dit is alleen ondiepe expansie en breidt de geneste objecten niet uit

2. Schrijf een aangepaste underscore.js-functie – te veel overhead voor wat een eenvoudige oplossing moet zijn

Antwoord 8, Autoriteit 2%

Hier is mijn oplossing, een functie die een alle eigenschappen van het object, inclusief arrays bevat.

In dit voorbeeld herhoogt ik over een eenvoudig object met meerdere niveaus:

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

U hebt ook de mogelijkheid om de iteratie uit te sluiten als de eigenschappen beginnen met een bepaald achtervoegsel (d.w.z. $ voor hoekobjecten)

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

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

jsonLog = function (msg, d) {
  console.log(msg + '\n' + JSON.stringify(d, true, 2))
}

jsonLog('root=', root)

/**
 * _Universal extensive multilevel logger for lazy folks_
 * @param {any} value **`Value` you want to log**
 * @param {number} tab **Abount of `tab`**
 */
function log(value, tab = 4) {
  console.log(JSON.stringify(value, undefined, tab));
}

log(anything) // [] {} 1 true null