Cuando uso Chrome Dev Tools para console.log un elemento, se imprime en dos formatos diferentes. Cambia aleatoriamente entre los dos formatos cuando actualizo el navegador.
<h1 class="heading">Heading</h1> <script> console.log(document.querySelector(".heading")); </script>Formato deseado: https://i.stack.imgur.com/XV7fB.png
¿Por qué está pasando esto? https://i.stack.imgur.com/YlEGQ.png
Terminé envolviendo la función de registro:
function log(value) { window.addEventListener("load", function () { console.log(value); }); }De alguna manera, su navegador confunde console.log() con console.dir() . Lea acerca de la diferencia aquí .
La salida que obtengo en mi máquina para ambos casos:
> console.log(document.querySelector(".heading")); <h1 class="heading">Heading</h1> > console.dir(document.querySelector(".heading")); h1.headingNo sé si es demasiado tarde. Me pasó el mismo problema. Acabo de borrar mi configuración y funcionó.
Espero eso ayude.
Pude reproducir este resultado con Chrome v93 en Windows 10.
El "formato deseado" del elemento DOM es lo que debería esperarse de console.log , mientras que la salida de tipo JSON es lo que debería esperarse de console.dir .
Descubrí que envolver la expresión en una función DOMContentLoaded o onload parece mejorar el resultado, pero a veces aún muestra el objeto completo en lugar del elemento DOM esperado.
window.onload = function() { console.log(document.querySelector(".heading")); };Sospecho que esto es un error en Chrome. No pude replicar este comportamiento en Firefox o Edge.
Mi mejor suposición de lo que está sucediendo aquí es que Chrome está intentando registrar el elemento antes de que el DOM esté completamente cargado.
Esto también puede ayudar a explicar un poco:
Tenga en cuenta que si registra objetos en las últimas versiones de Chrome y Firefox, lo que registra en la consola es una referencia al objeto, que no es necesariamente el "valor" del objeto en el momento en que llama a la consola. log(), pero es el valor del objeto en el momento en que abre la consola .
https://developer.mozilla.org/en-US/docs/Web/API/Console/log
Cuando veo que aparece el objeto completo (formato no deseado) en la consola, descubrí que cerrar DevTools y volver a abrirlo sin actualizar la página parece hacer que muestre el resultado correcto.