Existe uma maneira de expandir automaticamente objetos no Chrome Dev Tools?

TODAS AS VEZES ÚNICAS Vejo um objeto no console e quero expandi-las, por isso é cansativo clicar na seta para fazê-las TODAS AS ÚNICAS VEZES :) Existe um atalho ou configuração para fazer isso automaticamente?

Embora a solução mencionada JSON.stringifyseja ótima na maioria dos casos, ela tem algumas limitações

• Ele não pode lidar com itens com referências circulares, onde console.logpode cuidar de tais objetos com elegância.
• Além disso, se você tiver uma árvore grande, a capacidade de dobrar interativamente alguns nós pode facilitar a exploração.

Aqui está uma solução (usa a biblioteca underscore.js ) que resolve os itens acima de forma criativa (ab) usando 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);
        }
    }
})();

Agora em execução:

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

Vai lhe dar algo como:

O valor de MAX_DEPTH pode ser ajustado para um nível desejado e além desse nível de aninhamento - o log expandido retornará ao console.log usual

Tente executar algo como:

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

Observe que a dependência de sublinhado pode ser facilmente removida - basta extrair as funções necessárias da fonte .

Observe também que isso console.groupnão é padrão.

Considere usar console.table () .

Para expandir / recolher um nó e todos os seus filhos,

Ctrl + Alt + Clique ou Opt + Clique no ícone de seta

(observe que, embora o documento das ferramentas de desenvolvimento liste Ctrl + Alt + Click, no Windows, basta o Alt + Click).

Pode não ser a melhor resposta, mas venho fazendo isso em algum lugar do meu código.

Atualização :

Use JSON.stringifypara expandir seu objeto automaticamente:

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

Você sempre pode criar uma função de atalho se precisar digitar tudo isso:

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

j(a)

Resposta anterior :

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

então, em vez de:

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

Você faz:

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

Não é a melhor solução, mas funciona bem para o meu uso. Objetos mais profundos não funcionarão, por isso é algo que pode ser aprimorado.

opção + Clique em um Mac. Acabei de descobrir agora e fiz a minha semana! Isso tem sido tão irritante quanto qualquer coisa

Aqui está uma versão modificada da resposta de lorefnon que não depende de 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);

Aqui está minha solução, uma função que itera todas as propriedades do objeto, incluindo matrizes.

Neste exemplo, eu itero sobre um objeto de vários níveis simples:

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

Você também tem a possibilidade de excluir a iteração se as propriedades começarem com um sufixo específico (ou seja, $ para objetos angulares)

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

Aqui está a saída da função:

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

Você também pode injetar essa função em qualquer página da web e copiar e analisar todas as propriedades, tente na página do google usando o comando chrome:

discoverProperties(google,0,'$')

Além disso, você pode copiar a saída do comando usando o comando chrome:

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

se você tiver um objeto grande, o JSON.stringfy dará erro TypeError não capturado: Convertendo a estrutura circular para JSON, aqui está um truque para usar a versão modificada dele

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

agora você pode usar JSON.stringifyOnce(obj)

Eu realmente não sou fã de como o Chrome e o Safari consolam objetos (com excesso de engenharia). Por padrão, o console condensa o objeto, classifica as chaves do objeto quando o objeto é expandido e mostra as funções internas da cadeia de protótipos. Esses recursos devem ser configurações de aceitação. Os desenvolvedores, por padrão, provavelmente estão interessados ​​nos resultados brutos, para que possam verificar se o código está funcionando corretamente; e esses recursos atrasam o desenvolvimento e fornecem resultados de classificação incorretos.

Como expandir objetos no console

Recomendado

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

   Também pode usar como uma função:

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

2. "Option + Click" (Chrome no Mac) e "Alt + Click" (Chrome na janela)
   No entanto, não é suportado por todos os navegadores (por exemplo, Safari), e o Console ainda imprime as cadeias de tipos de protótipo, as chaves de objetos são classificadas automaticamente quando expandido, etc.

Não recomendado

Eu não recomendaria nenhuma das principais respostas

1. console.table() - essa é apenas uma expansão superficial e não expande objetos aninhados

2. Escreva uma função underscore.js personalizada - muita sobrecarga para o que deveria ser uma solução simples

É uma solução, mas funciona para mim.

Eu uso no caso em que um controle / widget é atualizado automaticamente dependendo das ações do usuário. Por exemplo, ao usar o typeahead.js do twitter, depois que você se concentra na janela, o menu suspenso desaparece e as sugestões são removidas do DOM.

Nas ferramentas de desenvolvimento, clique com o botão direito do mouse no nó que você deseja expandir, habilite a quebra em ... -> modificações na subárvore , e assim você será enviado ao depurador. Continue apertando F10 ou Shift + F11 até que você domine. Uma vez que isso muda, você pode inspecionar. Como o depurador está ativo, a interface do usuário do Chrome está bloqueada e não fecha o menu suspenso, e as sugestões ainda estão no DOM.

Muito útil ao solucionar problemas de layout de nós inseridos dinamicamente, que são inseridos e removidos constantemente.

Outra maneira mais fácil seria

• Use JSON.stringify (jsonObject)
• Copie e cole o resultado no código do Visual Studio
• Use Ctrl + K e Ctrl + F para formatar o resultado
• Você verá um objeto expandido formatado

Eu tentei isso para objetos simples.

Você pode ver aqui:

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

Caminho mais fácil:

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

Você também deve adicionar o seguinte código ao tsconfig:

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

Eu não reivindico a propriedade disso, apenas referindo uma fonte útil.

Você pode visualizar seu elemento acessando document.getElementsBy ... e, em seguida, clique com o botão direito do mouse e copie o objeto resultante. Por exemplo:

document.getElementsByTagName('ion-app') devolve o objeto javascript que pode ser copiado e colado no editor de texto e o faz completamente.

Melhor ainda: clique com o botão direito do mouse no elemento resultante - 'Editar como html' - 'Selecionar tudo' - 'Copiar' - 'Colar'