今天，我遇到了一个有趣的问题，使我了解了更多有关chrome调试的知识。 我想与您分享（突然之间，谁不知道）。 出现的问题并不复杂，但事实证明并非特别琐碎。
通常，我正在为网站准备第三方布局（这一刻很重要，因为问题从那里飞了出来，我还没有做好准备）。 然后在页面上，我将文本输入可编辑范围，其属性为contenteditable = true。 所以我做了100次，一切都还好，但是在这里，一两个都没有发生……视觉上，元素发生了变化：聚焦。 好吧，我认为有些风格，现在我将很快找到开发工具来提供帮助。 我发现了开发工具，然后……却什么也没发现……很奇怪。 我在另一个选项卡中打开了另一个具有相同功能的站点，一切正常，让我们比较嵌套和样式。 一对一。
原则上，标题说明了我所遇到的事情，但是如果您需要详细信息和解决方案，我要求削减，就不会有很多山毛榉，而是一段简短的视频和一些文字。
当然，总的来说，我当然认为状态中的元素显然有一些东西：焦点，但是，有趣的是，尽管我在开发工具中将元素强制为该状态，但没有任何变化。 但是，当我切换到编辑元素时（光标位于标记内），我看到样式元素栏中出现了：before伪元素。 但是我看不到它，因为为此我必须用鼠标单击它，这意味着我将从标签中删除焦点，结果焦点将消失，因此伪元素也将消失。 就像狗追尾一样。
然后我发现了调试和砖点。 也就是说，我们在HTML元素上附加了一个砖点，以更改子树并强制焦点。 获利 出现：之前和文档冻结。 您可以放心学习所有内容。 这是一段简短的视频：
就这样，很快就发现并解决了问题。
PS：如果有人对视频中的编辑感兴趣，
我最近写了一篇关于他的文章 。