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

140

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?

Jeremy Smith
quelle
4
Nicht im Moment. Sie können eine Funktionsanforderung unter new.crbug.com einreichen (beginnen Sie die Zusammenfassung mit dem Präfix "DevTools:"), aber genau angeben, wo und welche Objekte Sie erweitern möchten. Zum Beispiel werden Sie sicherlich niemals ALLE Ihre Objekte erweitern wollen, da sie (a) eine große Anzahl von Eigenschaften haben können; (b) Zyklen enthalten (im letzteren Fall wird es eine Weile dauern, bis der gesamte Baum erweitert ist;))
Alexander Pavlov
1
Vielen Dank für diesen Nikita, ich habe einen Kommentar mit einer alternativen Lösung gepostet.
Jeremy Smith
9
Ich würde mich gerne mit einer Tastenkombination zufrieden geben. Es schmerzt mich, zur Maus gehen zu müssen ...
Markt
3
Warum muss dies 4 Jahre später noch umgesetzt werden?
user3751385

Antworten:

31

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:

Screenshot ausgeben

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)

Geben Sie hier die Bildbeschreibung ein

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.

lorefnon
quelle
Hier ist die Typoskript-Version, die ich verwende: gist.github.com/mathieucaroff/6851b295c1e4bffafce362d0a1ae00f0
Mathieu CAROFF
94

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

console.table Ausgabe

Gajus
quelle
10
Genial, ich wusste nie davon!
Dagobert Renouf
Außergewöhnlich! Rettete meinen Tag!
Nicolae Olariu
1
Ich glaube, ich spreche für jeden, der das noch nie gesehen hat: Erstaunen!
John Hunt
Sieht gut aus! Aber es verkleinert breite Werte, wenn es 10+ Schlüssel gibt :(
Systems Rebooter
Ich habe nicht nach dieser Antwort gesucht, bin aber froh, dass ich sie gefunden habe!
Jay Cummins
64

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

James
quelle
3
Dies ist eigentlich eine vollständige Antwort auf die eigentliche Frage.
Ross Patterson
3
Wenn Sie dies in OSX Chrome 46 testen, wird auch das gesamte Prototypobjekt erweitert, was es so schlimm macht, als müssten Sie auf jeden Pfeil klicken. Stattdessen müssen Sie die Eigenschaften (hasOwn) in der Mitte von 50 Prototypmethoden, Eigenschaften usw. finden
Kev
Dies gibt den Uncaught ReferenceError: _ ist kein definierter Fehler
MagePsycho
5
Nur eine Randnotiz. Bei Objekten mit großer Tiefe sollte Strg + Alt + Klicken einige Male angewendet werden, bis das gesamte Objekt nicht nur einmal erweitert wird.
BentCoder
Beantwortet die Frage richtig. Der Benutzer muss zwar weiterhin manuell auf das Objekt in der Konsole klicken, und die Lösung wird in allen Browsern nicht allgemein unterstützt.
Montag,
34

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.

gak
quelle
Kombinieren Sie dies mit dem Hinzufügen von benutzerdefinierten Funktionen zur Chrome-Konsole, die wir jederzeit pretty(a)an allen Standorten haben können ;)
brasofilo
Eigentlich würde ich sagen, dass dies leider die beste Antwort ist - die anderen Lösungen sind schlechter (dh es console.tablehandelt sich um eine flache Erweiterung, "Option / Alt + Klick" ist ein manueller Vorgang, und das Schreiben einer benutzerdefinierten Funktion, die underscore.js verwendet, lohnt sich nicht der Overhead)
tfmontague
8

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

Hady
quelle
8

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);
Haringat
quelle
2

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,'$'))
Matteo Conta
quelle
2

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)

Wasim A.
quelle
2

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

tfmontague
quelle
1

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.

lcornejo
quelle
0

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.

user992867
quelle
-1

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.

GeorgiG
quelle
-2

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'

katrinsharp
quelle