google-chrome-devtools - quitar - inspeccionar elemento google chrome

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

Question

CADA VEZ QUE Miro un objeto en la consola, voy a querer expandirlo, por lo que es tedioso tener que hacer clic en la flecha para hacerlo CADA VEZ ÚNICAMENTE :) ¿Hay un atajo o ajuste para hacer esto automáticamente?

Answer 1

@Hady ¡Tu solución de Mac me indicó la solución de Windows adecuada! Acabo de probar alt + clic izquierdo en el nodo más alto que quiero expandir (en mi caso,) y expande todo dentro de esa etiqueta.

Answer 2

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

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

discoverProperties(google,0,''$'')

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

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

Answer 3

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

Answer 4

Considere usar console.table() .

Answer 5

Es un trabajo completo, pero funciona para mí.

Uso en el caso donde un control / widget se actualiza automáticamente dependiendo de las acciones del usuario. Por ejemplo, cuando usas twitter''s typeahead.js, una vez que te enfocas 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, habilite el corte en ... -> modificaciones del subárbol , esto lo enviará al depurador. Sigue golpeando F10 o Shift + F11 hasta que tu dom mute. 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 siguen estando en el DOM.

Muy práctico cuando se soluciona el diseño de nodos insertados dinámicamente que se insertan y eliminan constantemente.

Answer 6

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

Ctrl + Alt + clic o Opt + clic en el ícono de flecha

(tenga en cuenta que aunque las listas de herramientas de desarrollo list Ctrl + Alt + Click, en Windows todo lo que se necesita es Alt + Click).

Answer 7

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

Actualización :

Use JSON.stringify para 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 puedes hacer una función de acceso directo si te 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, eso es algo que se puede mejorar.

Answer 8

Puede ver su elemento accediendo a document.getElementsBy ... y luego haga clic con el botón derecho y copie el objeto resultante. Por ejemplo:

document.getElementsByTagName(''ion-app'') devuelve el objeto javascript que puede copiarse al 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''

Answer 9

opción + clic en una Mac. ¡Ya lo descubrí yo mismo y he hecho mi semana! Esto ha sido tan molesto como cualquier cosa

Answer 10

Si bien la solution menciona JSON.stringify es bastante buena para la mayoría de los casos, tiene algunas limitaciones

• No puede manejar elementos con referencias circulares, ya que console.log puede encargarse de tales objetos elegantemente.
• Además, si tiene un árbol grande, la posibilidad de plegar de forma interactiva algunos nodos puede facilitar la exploración.

Aquí hay una solución (usa la biblioteca underscore.js ) que resuelve ambas cosas 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 en 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"
                }
            }
        }
    }
})

Te dará algo como:

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

Intente 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; solo extraiga las funciones requeridas de la fuente .

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