Esiste un modo per espandere automaticamente gli oggetti in Chrome Dev Tools?

OGNI SINGOLO Vedo un oggetto nella console che voglio espanderlo, quindi diventa faticoso dover fare clic sulla freccia per farlo OGNI SINGOLO :) C'è un collegamento o un'impostazione per farlo automaticamente?

Mentre la soluzione menzionata JSON.stringifyè abbastanza grande per la maggior parte dei casi, ha alcune limitazioni

• Non può gestire oggetti con riferimenti circolari in cui è console.logpossibile occuparsi di tali oggetti con eleganza.
• Inoltre, se hai un grande albero, la possibilità di piegare in modo interattivo alcuni nodi può facilitare l'esplorazione.

Ecco una soluzione (utilizza la libreria underscore.js ) che risolve entrambe le precedenti in modo creativo (ab) utilizzando 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);
        }
    }
})();

Ora in esecuzione:

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

Ti darà qualcosa come:

Il valore di MAX_DEPTH può essere regolato su un livello desiderato e oltre quel livello di annidamento: il registro espanso tornerà alla consueta console.log

Prova a eseguire qualcosa come:

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

Nota che la dipendenza sottolineatura può essere facilmente rimosso - basta estrarre le funzioni richieste dalla sorgente .

Si noti inoltre che console.groupnon è standard.

Prendi in considerazione l'utilizzo di console.table () .

Per espandere / comprimere un nodo e tutti i suoi figli,

Ctrl + Alt + Click o Opt + Click sull'icona della freccia

(nota che sebbene il documento degli strumenti di sviluppo elenchi Ctrl + Alt + Clic, su Windows tutto ciò che serve è Alt + Clic).

Potrebbe non essere la risposta migliore, ma lo sto facendo da qualche parte nel mio codice.

Aggiornamento :

Utilizzare JSON.stringifyper espandere automaticamente l'oggetto:

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

Puoi sempre fare una funzione di scelta rapida se ti fa male digitare tutto questo:

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

j(a)

Risposta precedente :

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

quindi, invece di:

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

Tu fai:

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

Non è la soluzione migliore, ma funziona bene per il mio utilizzo. Gli oggetti più profondi non funzioneranno, quindi è qualcosa che può essere migliorato.

opzione + Fai clic su un Mac. L'ho appena scoperto da solo e ho reso la mia settimana! Questo è stato fastidioso come qualsiasi altra cosa

Ecco una versione modificata della risposta di lorefnon che non dipende da 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);

Ecco la mia soluzione, una funzione che esegue l'iterazione di tutte le proprietà dell'oggetto, inclusi gli array.

In questo esempio, eseguo l'iterazione su un semplice oggetto multilivello:

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

Hai anche la possibilità di escludere l'iterazione se le proprietà iniziano con un suffisso particolare (cioè $ per oggetti angolari)

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

Ecco l'output della funzione:

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

Puoi anche iniettare questa funzione in qualsiasi pagina web e copiare e analizzare tutte le proprietà, provare sulla pagina di Google usando il comando chrome:

discoverProperties(google,0,'$')

Inoltre puoi copiare l'output del comando usando il comando chrome:

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

se hai un grande oggetto, JSON.stringfy restituirà l'errore Uncaught TypeError: conversione della struttura circolare in JSON, ecco un trucco per usarne la versione modificata

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

ora puoi usare JSON.stringifyOnce(obj)

Non sono davvero un fan del modo in cui Chrome e Safari consolano gli oggetti (troppo ingegnerizzati). La console per impostazione predefinita condensa l'oggetto, ordina le chiavi dell'oggetto quando l'oggetto viene espanso e mostra le funzioni interne dalla catena di prototipi. Queste funzionalità dovrebbero essere impostazioni di attivazione. Gli sviluppatori per impostazione predefinita sono probabilmente interessati ai risultati non elaborati in modo da poter verificare se il loro codice funziona correttamente; e queste funzionalità rallentano lo sviluppo e forniscono risultati di ordinamento errati.

Come espandere gli oggetti in Console

Consigliato

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

   Potrebbe anche usare come funzione:

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

2. "Opzione + clic" (Chrome su Mac) e "Alt + clic" (Chrome su finestra)
   Tuttavia, non è supportato da tutti i browser (ad esempio Safari) e la console stampa ancora le catene del tipo di prototipo, le chiavi degli oggetti vengono ordinate automaticamente quando espanso, ecc.

Non consigliato

Non consiglierei nessuna delle risposte migliori

1. console.table() - questa è solo espansione superficiale e non espande oggetti nidificati

2. Scrivi una funzione personalizzata underscore.js - troppo sovraccarico per quella che dovrebbe essere una soluzione semplice

È una soluzione, ma funziona per me.

Uso nel caso in cui un controllo / widget si aggiorni automaticamente in base alle azioni dell'utente. Ad esempio, quando utilizzi typeahead.js di Twitter, una volta che ti concentri sulla finestra, il menu a discesa scompare e i suggerimenti vengono rimossi dal DOM.

Negli strumenti di sviluppo fai clic con il pulsante destro del mouse sul nodo che desideri espandere abilita break on ... -> modifiche alla sottostruttura , questo ti invierà quindi al debugger. Continua a colpire F10 o Maiusc + F11 fino a quando non muti. Una volta che muta, puoi ispezionare. Poiché il debugger è attivo, l'interfaccia utente di Chrome è bloccata e non chiude il menu a discesa e i suggerimenti sono ancora nel DOM.

Molto utile per la risoluzione dei problemi di layout di nodi inseriti dinamicamente che vengono inseriti e rimossi costantemente.

Un altro modo più semplice sarebbe

• Usa JSON.stringify (jsonObject)
• Copia e incolla il risultato in Visual Studio Code
• Usa Ctrl + K e Ctrl + F per formattare il risultato
• Vedrai un oggetto espanso formattato

Ho provato questo per oggetti semplici.

È possibile visualizzare il proprio elemento accedendo a document.getElementsBy ... e quindi fare clic con il tasto destro e copiare l'oggetto risultante. Per esempio:

document.getElementsByTagName('ion-app') restituisce l'oggetto javascript che può essere copiato incollato nell'editor di testo e lo fa per intero.

Meglio ancora: fare clic destro sull'elemento risultante - 'Modifica come html' - 'Seleziona tutto' - 'Copia' - 'Incolla'

Puoi vedere qui:

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

Il modo più semplice:

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

È inoltre necessario aggiungere il seguente codice a tsconfig:

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

Non pretendo alcuna proprietà di questo, solo riferimento a una fonte utile.