0
264
VistasConsole.log() de Google Chrome imprime nodos DOM de manera inconsistente
No es un duplicado de la inconsistencia de Google Chrome console.log() con objetos y matrices , ya que esta pregunta no se trata de objetos y matrices.
Aquí hay una página HTML simple:
<head> <link rel="stylesheet" href="css.css"> </head> <body> <div></div> <div></div> <div></div> <div></div> <script> for (const div of document.querySelectorAll("div")) { console.log(div); } </script> </body>A veces, los resultados se muestran como probablemente deberían:
y a veces como si usara console.dir() en lugar de console.log() :
En raras ocasiones, obtengo una mezcla:
Cuando traté de crear el ejemplo reproducible mínimo que se muestra arriba, eliminé el <link> , ya que no parecía estar relacionado con el problema. Sin embargo, después de eliminarlo, la inconsistencia desapareció, así que lo restauré e intenté minimizar el CSS en sí, hasta el punto en que css.css actualmente está completamente vacío. Entonces, de alguna manera, la mera presencia de la etiqueta <link> parece estar al menos relacionada con el problema.
¿Hay alguna razón para este comportamiento o es un error?
1 Respuestas
Responde la pregunta0
He leído los comentarios de @Corey y, sin embargo, quiero señalarle los documentos que contradicen lo que dijo Corey.
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.
ahora según la diferencia entre console.log() y console.dir() . además de la diferencia en la forma en que imprimen el elemento DOM, otro diferenciador es el siguiente:
console.log da un trato especial a los elementos DOM, mientras que console.dir no lo hace. Esto suele ser útil cuando se intenta ver la representación completa del objeto DOM JS.
posible solución / otro caso de prueba es, una vez más, hacer referencia a los documentos, para registrar elementos DOM no es console.log(obj) , sino en realidad console.log(JSON.parse(JSON.stringify(obj))) (y esto en realidad, la forma recomendada de registrar objetos en la consola).
la lógica detrás de esta recomendación es que de esta manera puede estar seguro de que está viendo el valor de obj en el momento en que lo registra. De lo contrario, muchos navegadores brindan una vista en vivo que se actualiza constantemente a medida que cambian los valores. Puede que esto no sea lo que quieres.