Hoy me encontré con un problema interesante que me hizo aprender más sobre la depuración en Chrome. Quiero compartir contigo (de repente, quién no lo sabía). El problema que surgió no fue complicado, pero resultó no ser particularmente trivial.
En general, estoy sentado haciendo un diseño de terceros listo para el sitio (este punto es importante, ya que el problema voló desde allí y no estaba listo para ello). Y en la página iba a ingresar el texto en el espacio editable, que con el atributo contenteditable = true. Y así lo hice cien veces y todo estuvo bien, pero aquí uno, dos, y no pasa nada ... Y visualmente el elemento cambió en el estado: enfoque. Bueno, creo algo con estilos, ahora encontraré rápidamente herramientas de desarrollo para ayudar. Descubrí herramientas de desarrollo y ... y no encontré nada ... Extraño. Abrí otro sitio con la misma funcionalidad en otra pestaña, todo funciona allí, comparemos el anidamiento y los estilos. Uno a uno.
En principio, el título dice lo que encontré, pero si necesita detalles y una solución, pido un corte, no habrá muchas hayas, pero en un video corto y un poco de texto.
En general, por supuesto, supuse que claramente había algo con el elemento en el estado: foco, pero, curiosamente, aunque forcé el elemento a este estado en las herramientas de desarrollo, nada cambió. Sin embargo, cuando cambié a editar el elemento (el cursor estaba dentro de la etiqueta), vi que el pseudo-elemento: before aparece en la barra de estilo. Pero no pude verlo, porque para esto tuve que hacer clic con el mouse, lo que significa que eliminaría el foco de la etiqueta, como resultado de lo cual el foco desaparecería y, en consecuencia, el pseudo-elemento: antes también. Justo como un perro persiguiendo su cola.
Y luego descubrí la depuración y los puntos de ladrillo. Es decir, adjuntamos un punto de ladrillo al elemento HTML para cambiar el subárbol y forzar el enfoque. Ganancia Aparece: antes y el documento se congela. Puedes estudiar todo de forma segura. Aquí hay un breve video de cómo fue:
Eso es todo, rápidamente el problema fue encontrado y solucionado.
PD: si alguien está interesado en qué tipo de editor es en el video,
escribí sobre él recientemente .