How I caught the styles: before for the focus element
Today I ran into an interesting puzzle that made me learn more about debugging in chrome. I want to share with you (suddenly someone did not know). The problem posed is not complicated, but it turned out to be not very trivial.
In general, I sit on the third-party layout ready for the site (this moment is important, since the problem flew from there and I was not ready for it). And on the page I was going to enter text into the editable span, which with the attribute contenteditable = true. And here I did it a hundred times and everything was OK, but here one, two, and nothing happens ... And the visual element changed in the state: focus. Well, I think, something with styles, now quickly find dev-tools to help. Uncovered the dev-tools and ... and found nothing ... Strange. I opened another site in another tab with the same functionality, everything works there, let's compare nesting and styles. One-to-one.
Basically, the title says what I’ve encountered, but if you need details and a solution, I’ll ask that there’s not a lot of beeches there, and in a short video and a bit of text.
In general, I certainly assumed that there was clearly something with an element in the state of: focus, but what is interesting, although I forced this element into the dev-tools, nothing changed. However, when I went to edit the element (the cursor was inside the tag), I saw that the pseudo-element: before appeared in the styles panel. But I could not see it, because for this I had to click on it with the mouse, which means take the focus away from the tag, as a result of which the focus disappeared and, accordingly, the: before pseudo-element too. Just like a dog chasing its tail.
')
And here I discovered debugging and bricpoint. That is, we hang the bricpoint on the HTML element to change the subtree and force the focus. Profit Appears: before and the document is frozen. You can safely study everything. Here is a short video like this:
Everything, rather quickly, the problem was found and fixed.
PS If anyone is interested, what kind of editor is there in the Vidos, I wrote about him recently .
In general, I sit on the third-party layout ready for the site (this moment is important, since the problem flew from there and I was not ready for it). And on the page I was going to enter text into the editable span, which with the attribute contenteditable = true. And here I did it a hundred times and everything was OK, but here one, two, and nothing happens ... And the visual element changed in the state: focus. Well, I think, something with styles, now quickly find dev-tools to help. Uncovered the dev-tools and ... and found nothing ... Strange. I opened another site in another tab with the same functionality, everything works there, let's compare nesting and styles. One-to-one.
Basically, the title says what I’ve encountered, but if you need details and a solution, I’ll ask that there’s not a lot of beeches there, and in a short video and a bit of text.
In general, I certainly assumed that there was clearly something with an element in the state of: focus, but what is interesting, although I forced this element into the dev-tools, nothing changed. However, when I went to edit the element (the cursor was inside the tag), I saw that the pseudo-element: before appeared in the styles panel. But I could not see it, because for this I had to click on it with the mouse, which means take the focus away from the tag, as a result of which the focus disappeared and, accordingly, the: before pseudo-element too. Just like a dog chasing its tail.
')
And here I discovered debugging and bricpoint. That is, we hang the bricpoint on the HTML element to change the subtree and force the focus. Profit Appears: before and the document is frozen. You can safely study everything. Here is a short video like this:
Everything, rather quickly, the problem was found and fixed.
PS If anyone is interested, what kind of editor is there in the Vidos, I wrote about him recently .
Source: https://habr.com/ru/post/456248/
All Articles