0
239
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 pregunta1
En mi experiencia, esto sucede principalmente cuando el navegador aún está analizando el DOM. Por lo tanto, el problema puede aparecer cuando (por ejemplo) agrega una hoja de estilo.