Aujourd'hui, je suis tombé sur un problème intéressant qui m'a fait en savoir plus sur le débogage dans Chrome. Je veux partager avec vous (du coup, qui ne savait pas). Le problème qui se pose n'est pas compliqué, mais il ne s'avère pas particulièrement anodin.
En général, je suis assis en train de tirer une mise en page tierce prête pour le site (ce moment est important, car le problème a volé à partir de là et je n'y étais pas prêt). Et sur la page, j'allais entrer le texte dans la plage modifiable, qui avec l'attribut contenteditable = true. Et donc je l'ai fait cent fois et tout allait bien, mais ici un, deux, et rien ne se passe ... Et visuellement l'élément a changé dans l'état: la mise au point. Eh bien, je pense que quelque chose avec des styles, maintenant je vais rapidement trouver des outils de développement pour vous aider. J'ai découvert des outils de développement et ... et je n'ai rien trouvé ... D'étrange. J'ai ouvert un autre site avec la même fonctionnalité dans un autre onglet, tout fonctionne là-bas, comparons l'imbrication et les styles. Un à un.
En principe, le titre dit ce que j'ai rencontré, mais si vous avez besoin de détails et d'une solution, je demande une coupe, il n'y aura pas beaucoup de hêtres, mais dans une courte vidéo et un peu de texte.
En général, bien sûr, j'ai supposé qu'il y avait clairement quelque chose avec l'élément dans l'état: focus, mais, fait intéressant, bien que j'ai forcé l'élément à cet état dans dev-tools, rien n'a changé. Cependant, lorsque je suis passé à l'édition de l'élément (le curseur était à l'intérieur de la balise), j'ai vu que le pseudo-élément: avant apparaît dans la barre de style. Mais je ne pouvais pas le voir, car pour cela, je devais cliquer dessus avec la souris, ce qui signifie que je supprimerais le focus de la balise, ce qui ferait disparaître le focus et, par conséquent, le pseudo-élément: avant aussi. Tout comme un chien qui court après sa queue.
Et puis j'ai découvert le débogage et les brickpoints. Autrement dit, nous attachons un point de brique sur l'élément HTML pour modifier le sous-arbre et forcer le focus. Bénéfice Apparaît: avant et le document se fige. Vous pouvez tout étudier en toute sécurité. Voici une courte vidéo de comment c'était:
Voilà, assez rapidement le problème a été trouvé et résolu.
PS: si quelqu'un s'intéresse à quel type d'éditeur il s'agit de la vidéo,
j'ai écrit à son sujet récemment .