¿Hay alguna manera de expandir automáticamente los objetos en Chrome Dev Tools?

CADA VEZ QUE VEO un objeto en la consola que voy a querer expandirlo, por lo que me resulta pesado hacer clic en la flecha para hacerlo CADA VEZ :) ¿Hay un atajo o una configuración para hacer esto automáticamente?

Si bien la solución mencionada JSON.stringifyes bastante buena para la mayoría de los casos, tiene algunas limitaciones

• No puede manejar elementos con referencias circulares donde console.logpueda cuidar dichos objetos con elegancia.
• Además, si tiene un árbol grande, la capacidad de plegar interactivamente algunos nodos puede facilitar la exploración.

Aquí hay una solución (usa la biblioteca underscore.js ) que resuelve los dos anteriores de manera creativa (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);
        }
    }
})();

Ahora corriendo:

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

Te dará algo como:

El valor de MAX_DEPTH se puede ajustar al nivel deseado, y más allá de ese nivel de anidamiento: el registro expandido volverá a la consola habitual.

Intenta ejecutar algo como:

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

Tenga en cuenta que la dependencia de subrayado se puede eliminar fácilmente: simplemente extraiga las funciones necesarias de la fuente .

También tenga en cuenta que console.groupno es estándar.

Considere usar console.table () .

Para expandir / contraer un nodo y todos sus elementos secundarios,

Ctrl + Alt + Click u Opt + Click en el icono de flecha

(tenga en cuenta que aunque el documento de herramientas de desarrollo enumera Ctrl + Alt + Click, en Windows todo lo que se necesita es Alt + Click).

Puede que no sea la mejor respuesta, pero he estado haciendo esto en algún lugar de mi código.

Actualización :

Use JSON.stringifypara expandir su objeto automáticamente:

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

Siempre puede hacer una función de acceso directo si le duele escribir todo eso:

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

j(a)

Respuesta anterior :

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

entonces, en lugar de:

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

Tú lo haces:

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

No es la mejor solución, pero funciona bien para mi uso. Los objetos más profundos no funcionarán, por lo que es algo que se puede mejorar.

opción + Haga clic en una Mac. ¡Acabo de descubrirlo ahora mismo y he hecho mi semana! Esto ha sido tan molesto como cualquier otra cosa.

Aquí hay una versión modificada de la respuesta de lorefnon que no 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);

Aquí está mi solución, una función que itera todas las propiedades del objeto, incluidas las matrices.

En este ejemplo, itero sobre un objeto simple de varios niveles:

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

También tiene la posibilidad de excluir la iteración si las propiedades comienzan con un sufijo particular (es decir, $ 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>");

Aquí está la salida de la función:

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

También puede inyectar esta función en cualquier página web y copiar y analizar todas las propiedades, pruebe en la página de Google con el comando chrome:

discoverProperties(google,0,'$')

También puede copiar la salida del comando usando el comando chrome:

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

si tiene un objeto grande, JSON.stringfy dará error Uncaught TypeError: Convertir la estructura circular a JSON, aquí hay un truco para usar la versión modificada

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

ahora puedes usar JSON.stringifyOnce(obj)

Realmente no soy fanático de cómo Chrome y Safari consuelan objetos (sobre-diseñados). La consola condensa el objeto de manera predeterminada, ordena las teclas del objeto cuando el objeto se expande y muestra las funciones internas de la cadena del prototipo. Estas características deben ser configuraciones opcionales. Los desarrolladores por defecto probablemente estén interesados ​​en los resultados sin procesar para que puedan verificar si su código funciona correctamente; y estas características ralentizan el desarrollo y dan resultados de clasificación incorrectos.

Cómo expandir objetos en la consola

Recomendado

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

   También podría usar como una función:

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

2. "Opción + clic" (Chrome en Mac) y "Alt + clic" (Chrome en ventana)
   Sin embargo, no es compatible con todos los navegadores (por ejemplo, Safari), y la consola todavía imprime las cadenas de tipo prototipo, las teclas de objeto se ordenan automáticamente cuando expandido, etc.

No recomendado

No recomendaría ninguna de las mejores respuestas

1. console.table() - esta es solo una expansión superficial, y no expande objetos anidados

2. Escriba una función underscore.js personalizada: demasiada sobrecarga para lo que debería ser una solución simple

Es una solución, pero funciona para mí.

Lo uso en el caso de que un control / widget se actualice automáticamente dependiendo de las acciones del usuario. Por ejemplo, cuando se usa typeahead.js de twitter, una vez que se enfoca fuera de la ventana, el menú desplegable desaparece y las sugerencias se eliminan del DOM.

En las herramientas de desarrollo, haga clic con el botón derecho en el nodo que desea expandir, active la interrupción en ... -> modificaciones de subárbol , esto lo enviará al depurador. Sigue presionando F10 o Shift + F11 hasta que domines mutantes. Una vez que eso muta, puedes inspeccionar. Como el depurador está activo, la interfaz de usuario de Chrome está bloqueada y no cierra el menú desplegable y las sugerencias aún están en el DOM.

Muy útil para solucionar problemas de diseño de nodos insertados dinámicamente que comienzan a insertarse y eliminarse constantemente.

Otra forma más fácil sería

• Utilice JSON.stringify (jsonObject)
• Copie y pegue el resultado en el código de Visual Studio
• Use Ctrl + K y Ctrl + F para formatear el resultado
• Verá un objeto expandido formateado

He intentado esto para objetos simples.

Puedes ver aquí:

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

La manera más fácil:

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

También debe agregar el siguiente código a tsconfig:

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

No reclamo propiedad de esto, solo refiero una fuente útil.

Puede ver su elemento accediendo a document.getElementsBy ... y luego hacer clic derecho y copiar el objeto resultante. Por ejemplo:

document.getElementsByTagName('ion-app') devuelve un objeto javascript que se puede copiar y pegar en el editor de texto y lo hace en su totalidad.

Mejor aún: haga clic derecho en el elemento resultante - 'Editar como html' - 'Seleccionar todo' - 'Copiar' - 'Pegar'