Gibt es eine Möglichkeit, Objekte in Chrome Dev Tools automatisch zu erweitern?

JEDES MAL Ich sehe ein Objekt in der Konsole, das ich erweitern möchte, daher wird es mühsam, JEDES MAL auf den Pfeil klicken zu müssen :) Gibt es eine Verknüpfung oder Einstellung, um dies automatisch zu erledigen?

Die erwähnte LösungJSON.stringify ist in den meisten Fällen ziemlich gut, weist jedoch einige Einschränkungen auf

• Es kann keine Elemente mit Zirkelverweisen verarbeiten, bei denen console.logsolche Objekte elegant gepflegt werden können.
• Wenn Sie einen großen Baum haben, kann die Möglichkeit, einige Knoten interaktiv wegzufalten, die Erkundung erleichtern.

Hier ist eine Lösung (verwendet die Bibliothek underscore.js ), die beide oben genannten Probleme löst, indem sie kreativ (ab) Folgendes verwendet 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);
        }
    }
})();

Jetzt läuft:

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

Gibt dir so etwas wie:

Der Wert von MAX_DEPTH kann auf eine gewünschte Ebene angepasst werden. Über diese Verschachtelungsebene hinaus wird das erweiterte Protokoll auf die übliche console.log zurückgesetzt

Versuchen Sie etwas wie:

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

Beachten Sie, dass die Unterstrichabhängigkeit leicht entfernt werden kann - extrahieren Sie einfach die erforderlichen Funktionen aus der Quelle .

Bitte beachten Sie auch, dass dies console.groupnicht dem Standard entspricht.

Erwägen Sie die Verwendung von console.table () .

Um einen Knoten und alle seine untergeordneten Knoten zu erweitern / zu reduzieren,

Strg + Alt + Klicken oder Opt + Klicken auf das Pfeilsymbol

(Beachten Sie, dass im Windows- Entwicklungsdokument Strg + Alt + Klicken aufgeführt ist, unter Windows jedoch nur Alt + Klicken erforderlich ist).

Könnte nicht die beste Antwort sein, aber ich habe dies irgendwo in meinem Code getan.

Update :

Verwenden JSON.stringifySie diese Option , um Ihr Objekt automatisch zu erweitern:

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

Sie können jederzeit eine Verknüpfungsfunktion erstellen, wenn es weh tut, all das einzugeben:

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

j(a)

Vorherige Antwort:

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

dann statt:

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

Sie machen:

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

Nicht die beste Lösung, funktioniert aber gut für meine Verwendung. Tiefere Objekte funktionieren nicht, daher kann dies verbessert werden.

Option + Klicken Sie auf einen Mac. Habe es gerade selbst entdeckt und meine Woche gemacht! Das war so nervig wie alles andere

Hier ist eine modifizierte Version von Lorefnons Antwort, die nicht von Unterstrichen abhängt:

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

Hier ist meine Lösung, eine Funktion, die alle Eigenschaften des Objekts einschließlich der Arrays durchläuft.

In diesem Beispiel iteriere ich über ein einfaches mehrstufiges Objekt:

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

Sie haben auch die Möglichkeit, die Iteration auszuschließen, wenn die Eigenschaften mit einem bestimmten Suffix beginnen (dh $ für eckige Objekte).

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

Hier ist die Ausgabe der Funktion:

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

Sie können diese Funktion auch in jede Webseite einfügen und alle Eigenschaften kopieren und analysieren. Probieren Sie die Google-Seite mit dem Befehl chrome aus:

discoverProperties(google,0,'$')

Sie können die Ausgabe des Befehls auch mit dem Befehl chrome kopieren:

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

Wenn Sie ein großes Objekt haben, gibt JSON.stringfy den Fehler Uncaught TypeError aus: Konvertieren einer kreisförmigen Struktur in JSON. Hier ist ein Trick, um eine modifizierte Version davon zu verwenden

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

Jetzt können Sie verwenden JSON.stringifyOnce(obj)

Ich bin wirklich kein Fan davon, wie Chrome und Safari Objekte konsolidieren (überentwickelt). Die Konsole komprimiert das Objekt standardmäßig, sortiert die Objektschlüssel, wenn das Objekt erweitert wird, und zeigt die internen Funktionen aus der Prototypenkette an. Diese Funktionen sollten Opt-In-Einstellungen sein. Entwickler sind wahrscheinlich standardmäßig an den Rohergebnissen interessiert, damit sie überprüfen können, ob ihr Code ordnungsgemäß funktioniert. Diese Funktionen verlangsamen die Entwicklung und führen zu falschen Sortierergebnissen.

So erweitern Sie Objekte in der Konsole

Empfohlen

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

   Könnte auch als Funktion verwendet werden:

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

2. "Option + Klicken" (Chrome auf Mac) und "Alt + Klicken" (Chrome auf Fenster) Es wird
   jedoch nicht von allen Browsern (z. B. Safari) unterstützt, und Console druckt weiterhin die Ketten des Prototyptyps. Objektschlüssel werden automatisch sortiert, wenn erweitert usw.

Nicht empfohlen

Ich würde keine der Top-Antworten empfehlen

1. console.table() - Dies ist nur eine flache Erweiterung und erweitert keine verschachtelten Objekte

2. Schreiben Sie eine benutzerdefinierte Funktion underscore.js - zu viel Aufwand für eine einfache Lösung

Es ist eine Umgehung, aber es funktioniert für mich.

Ich verwende in dem Fall, in dem ein Steuerelement / Widget abhängig von Benutzeraktionen automatisch aktualisiert wird. Wenn Sie beispielsweise die typeahead.js von Twitter verwenden, verschwindet das Dropdown-Menü, sobald Sie sich aus dem Fenster konzentrieren, und die Vorschläge werden aus dem DOM entfernt.

In dev Tools direkt auf dem Sie erweitern möchten Knoten klicken aktivieren Pause auf ... -> subtree Änderungen , dies wird Ihnen dann an den Debugger senden. Halten Sie schlagen F10 oder Shift + F11 , bis Sie dom mutiert. Sobald das mutiert, können Sie überprüfen. Da der Debugger aktiv ist, ist die Benutzeroberfläche von Chrome gesperrt und schließt die Dropdown-Liste nicht. Die Vorschläge befinden sich weiterhin im DOM.

Sehr praktisch bei der Fehlerbehebung beim Layout dynamisch eingefügter Knoten, die ständig eingefügt und entfernt werden.

Ein anderer einfacher Weg wäre

• Verwenden Sie JSON.stringify (jsonObject)
• Kopieren Sie das Ergebnis und fügen Sie es in Visual Studio Code ein
• Verwenden Sie Strg + K und Strg + F, um das Ergebnis zu formatieren
• Sie sehen ein formatiertes erweitertes Objekt

Ich habe dies für einfache Objekte versucht.

Sie können hier sehen:

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

Einfachster Weg:

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

Sie müssen tsconfig auch folgenden Code hinzufügen:

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

Ich beanspruche kein Eigentum daran, sondern verweise nur auf eine hilfreiche Quelle.

Sie können Ihr Element anzeigen, indem Sie auf document.getElementsBy ... zugreifen und dann mit der rechten Maustaste auf das resultierende Objekt klicken und es kopieren. Beispielsweise:

document.getElementsByTagName('ion-app') Gibt ein Javascript-Objekt zurück, das in den Texteditor eingefügt werden kann, und zwar vollständig.

Besser noch: Klicken Sie mit der rechten Maustaste auf das resultierende Element - 'Als HTML bearbeiten' - 'Alle auswählen' - 'Kopieren' - 'Einfügen'