CADA VEZ que veo un objeto en la consola voy a querer ampliarlo, por lo que se hace tedioso tener que hacer clic en la flecha para hacer esto CADA VEZ 🙂 hay un acceso directo o la configuración para que esto se haga automáticamente?

  • No por el momento. Siéntase libre de presentar una solicitud de función en new.crbug.com (inicio el resumen con los «DevTools:» prefijo) pero ser muy específico acerca de donde y que los objetos que desea expandir. E. g., se sin duda nunca va a querer tener TODOS los objetos ampliado, ya que pueden (a) tiene un gran número de propiedades; (b) contienen ciclos (en el último caso se va a tomar un tiempo para expandir el árbol entero ;))
  • bugs.webkit.org/show_bug.cgi?id=61427
  • Gracias Nikita, he publicado un comentario con una solución alternativa.
  • me gustaría felizmente conformarse con un atajo de teclado. me duele tener que ir con el ratón…
  • Por qué todavía no se aplican 4 años más tarde?
InformationsquelleAutor Jeremy Smith | 2012-05-05

13 Comentarios

  1. 21

    Mientras que el solución mencionar JSON.stringify es bastante grande para la mayoría de los casos, tiene un par de limitaciones

    • Que no puede manejar los elementos con referencias circulares donde como console.log puede tomar el cuidado de tales objetos elegante.
    • También, si usted tiene un gran árbol, entonces la capacidad interactiva de plegar algunos nodos pueden hacer la exploración más fácil.

    Aquí es una solución de (utiliza el underscore.js de la biblioteca) que resuelve tanto de los de arriba creativa (ab)uso de consola.grupo:

    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 ejecución:

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

    Va a dar algo como:

    Es allí una manera de auto expanda objetos en Chrome Dev Tools?

    El valor de MAX_DEPTH puede ser ajustado a un nivel deseado, y más allá de que el nivel de anidamiento ampliado de registro caerá de vuelta a la costumbre de la consola.registro de

    Trate de ejecutar algo como:

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

    Es allí una manera de auto expanda objetos en Chrome Dev Tools?

    Nota que ponen de relieve la dependencia puede ser fácilmente eliminado – sólo extraer las funciones de la fuente.

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

  2. 80

    Considerar el uso de la consola.tabla().

    Es allí una manera de auto expanda objetos en Chrome Dev Tools?

    • Genial nunca me lo sabía !
    • Extraordinario! Me salvó el día!
    • Esta es la mejor cosa que nunca!!!
    • Creo que hablo en nombre de cualquier persona que no ha visto esto antes: Amaze!
    • Se ve bien! Pero se encoge de ancho valores si hay 10+ teclas 🙁
    • Yo no estaba buscando esta respuesta, pero me alegro de que lo he encontrado!
    • Tenga cuidado de no implementar esto de los navegadores en la producción que no la puede tener, sin la comprobación de su existencia.
    • Esto sólo se expande objetos en un nivel de profundidad de 1. Es un poco expansión, y no se expanda objetos anidados.

  3. 48

    Para expandir /contraer un nodo y todos sus hijos,

    Ctrl + Alt + Clic o Opción + Clic en en el icono de la flecha

    (tenga en cuenta que aunque el dev tools doc listas de Ctrl + Alt + Clic en Windows todo lo que se necesita es Alt + Clic).

    • Esto es en realidad una respuesta completa a la pregunta.
    • Prueba de esto es en OSX chrome 46, se expande todo el prototipo de un objeto, lo que hace que sea tan mala como la de tener que hacer clic en cada flecha. En su lugar, usted tiene que encontrar las propiedades (hasOwn) en el medio de 50 prototipo de métodos, propiedades, etc…
    • esto le da a la Uncaught ReferenceError: _ no está definido por error
    • Sólo una nota al margen. En el caso de los objetos con enorme profundidad, Ctrl+Alt+Clic debe ser aplicado un par de veces hasta que se extienda todo el objeto, no sólo una vez.
    • Responde correctamente a la pregunta. Aunque todavía requiere que el usuario manualmente, haga clic en el objeto en la consola, y la solución no es universalmente compatible en todos los navegadores.
  4. 32

    Podría no ser la mejor respuesta, pero he estado haciendo esto en alguna parte de mi código.

    Actualización:

    Uso JSON.stringify para ampliar 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 puedes hacer un acceso directo de la función si duele escribir todo lo que fuera:

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

    Anterior respuesta:

    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]
    

    Que hacer:

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

    No es la mejor solución, pero funciona bien para mi uso. Más profundo de los objetos no funcionará por lo que es algo que se puede mejorar.

    • Par esto con Agregar funcionalidad personalizada en chrome consola y podemos tener pretty(a) en todos los sitios, en todos los tiempos 😉
    • Y, a continuación, puede usar jsonviewer.de la pila.hu a formato json!
    • En realidad, yo diría que por desgracia esta es la mejor respuesta – las otras soluciones son peores (es decir, console.table es poco profunda expansión, «Opción / Alt + Clic» es un proceso manual, y escribir una función personalizada que utiliza underscore.js no vale la sobrecarga)
  5. 6

    opción+Clic en Mac. Acabo de descubrir ahora mismo y que han hecho de mi semana! Esto ha sido tan molesto como nada

  6. 6

    Aquí es una versión modificada de lorefnon la respuesta de 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);
    
  7. 2

    Aquí está mi solución, una función que recorre en una todas las propiedades del objeto, incluyendo matrices.

    En este ejemplo yo iterar a través de una simple multi-nivel de objeto:

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

    Usted tiene también la posibilidad de excluir de la iteración si las propiedades se inicia con un sufijo determinado (es decir, $ angular de los objetos)

    JS:

    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 inyectarse esta función en cualquier página web y copiar y analizar todas las propiedades, intente en la página de google usando el chrome comando:

    discoverProperties(google,0,'$')
    

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

    copy(discoverProperties(myvariable,0,'$'))
    
  8. 1

    Su trabajo en torno, pero a mí me funciona.

    Voy a usar en el caso de que un control/widget de actualizaciones automáticas, dependiendo de las acciones del usuario. Por ejemplo, cuando el uso de twitter typeahead.js una vez que el foco fuera de la ventana, el menú desaparece y las sugerencias que se quitan de la DOM.

    En dev tools haga clic derecho en el nodo que desea ampliar habilitar descanso en… -> subárbol modificaciones, este enviará al depurador. Mantener golpear F10 o Mayús+F11 hasta dom muta. Una vez que muta, a continuación, usted puede inspeccionar. Desde el depurador está activa la interfaz de usuario de Chrome está bloqueado y no se cierra la lista desplegable y las sugerencias de los que todavía están en el DOM.

    Muy útil cuando la solución de problemas de diseño de forma dinámica inserta los nodos que se van a comenzar a colocar y extraer constantemente.

  9. 1

    si usted tiene un gran objeto JSON.stringfy dará error no capturado TypeError: la Conversión de una estructura circular a JSON
    aquí está el truco para usar la versión modificada de la misma

    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 usted puede utilizar JSON.stringifyOnce(obj)

  10. 0

    Otra manera más fácil sería

    • Usar JSON.stringify(jsonObject)
    • Copiar y Pegar el resultado en el Código de Visual Studio
    • Usar Ctrl+K y Ctrl+F para formatear el resultado
    • Verá formato ampliado objeto

    He intentado hacer esto para objetos simples.

  11. 0

    Yo realmente no soy un fan de la forma en la que Chrome y Safari consolas de objetos (más de la ingeniería). La consola por defecto se condensa el objeto, ordena las claves de objeto cuando el objeto se expande y muestra las funciones internas de la cadena de prototipos. Estas características deben ser opt-en la configuración. Los desarrolladores por defecto son probablemente interesado en los resultados crudos, para que puedan comprobar si su código está funcionando correctamente; y estas características lento desarrollo, y dar incorrecto ordenar los resultados.

    Cómo expandir los objetos en la Consola de

    Recomienda

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

      Puede utilizar también 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 la Ventana)

      Sin embargo, no es soportado por todos los navegadores (por ejemplo, Safari), y la Consola sigue imprime el prototipo tipo de cadenas, claves de objeto se auto-clasifican expandido, etc.

    No Se Recomienda

    Yo no recomendaría a cualquiera de las respuestas

    1. console.table() – esto es poco profunda expansión sólo, y no se expanda objetos anidados

    2. Escribir una costumbre underscore.js función – demasiado trabajo para lo que debería ser una solución sencilla

  12. -1

    Puede visualizar el elemento mediante el acceso a documentos.getElementsBy… y, a continuación, haga clic derecho y copiar el resultado de objeto. Por ejemplo:

    document.getElementsByTagName('ion-app') le da la espalda objeto de javascript que puede ser copiado y pegado al editor de texto y lo hace en su totalidad.

    Mejor aún: clic derecho en el resultado del elemento – ‘Edición de html’ – ‘Seleccionar todo’ – ‘Copia’ – ‘Pegar’

Dejar respuesta

Please enter your comment!
Please enter your name here