Tengo un script js con un console.log que a veces imprime elementos html.
Chrome tiene dos modos de imprimir tales elementos DOM:
<div class="abc">...</div> , donde al pasar el mouse se resalta el elemento en la página y al hacer clic se abre el subárbol DOM.div.abc , donde pasar el mouse no hace nada y hacer clic abre las propiedades del objeto.Siempre quiero el primer formato.
Pero por alguna razón, al imprimir muchos de estos elementos, Chrome cambia aleatoriamente al segundo formato.
Al principio pensé que esto sucedía si no había suficiente espacio, por ejemplo, si imprimíamos otros valores en la misma llamada a console.log . Pero este parece no ser el caso.
¿Alguna idea de cómo puedo obtener siempre el primer formato? Ya sea una configuración en Chrome/Chromium, o algo que pueda hacer en mi script.
Intentaré encontrar un ejemplo reproducible. Será difícil porque esto sucedió en un sitio web en el que ya están sucediendo muchas cosas.
Por ahora, simplemente mencionaré que por "muchos de estos elementos", me refiero a llamadas repetidas de console.log(element) con diferentes elementos. Las primeras 100 o más llamadas me darían la primera representación, luego cambiaría a la otra representación. Pero esto no fue del todo consistente, y no hubo un evento específico que explicara tal cambio.
Nuevos puntos de datos desde la versión inicial de la pregunta:
console.dirxml(element) también cambia a la prepresentación JSON (= segundo formato), al mismo tiempo que lo hace console.log .console.log(element, element instanceof HTMLElement) siempre imprime [element], true , sin importar si se usa la representación json o xml para imprimir el elemento.No puede obtener siempre este formato porque es impredecible en el motor de parpadeo , y el código fuente es la prueba , además hay un comentario exactamente para este caso:
function printNode(nodeId) { if (!nodeId) { // Sometimes DOM is loaded after the sync message is being formatted, so we get no // nodeId here. So we fall back to object formatting here. this._formatParameterAsObject(object, elem, false); return; }por alguna razón, al imprimir muchos de estos elementos, Chrome cambia aleatoriamente al segundo formato
Sin un ejemplo reproducible mínimo que demuestre ambos casos, es difícil proporcionar una respuesta satisfactoria, pero según la documentación, los siguientes métodos imprimirán la representación XML de un nodo:
Mientras que, por el contrario, console.dir(node) imprimirá una representación JSON del nodo.
También hay una función de utilidad de consola para navegar (enfocar mediante programación) un nodo/objeto: inspect(object/function) .
Si, al "imprimir muchos de estos elementos" solo se refiere a una colección de objetos como un Array o NodeList , entonces ese no es un nivel de control de visualización que le ofrecen las herramientas de desarrollo de Chromium. En su lugar, debe iterar cada nodo e imprimirlo (o proporcionar cada nodo como argumento para console.log , por ejemplo:
const divArray = [...document.querySelectorAll('div')]; console.log(divArray); // JSON representation of an array (of div elements) console.log(...divArray); // one XML representation for each div element