June 16, 2019 at 12:21How I caught: before styles for a focus element
Today I came across an interesting problem that made me learn more about debugging in chrome. I want to share with you (suddenly, who did not know). The problem that arose was not complicated, but it turned out to be not particularly trivial.
In general, I'm sitting pulling a 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 the text into the editable span, which with the attribute contenteditable = true. And so I did it a hundred times and everything was OK, but here one, two, and nothing happens ... And visually the element changed in the state: focus. Well, I think something with styles, now I will quickly find dev-tools to help. I uncovered dev-tools and ... and didn’t find anything ... Strange. I opened another site with the same functionality in another tab, everything works there, let's compare nesting and styles. One to one.
In principle, the title says what I came across, but if you need details and a solution, I ask for a cut, there will not be many beeches, but in a short video and a little bit of text.
In general, of course, I assumed that there was clearly something with the element in the state: focus, but, interestingly, although I forced the element to this state in dev-tools, nothing changed. However, when I switched to editing the element (the cursor was inside the tag), I saw that the: before pseudo-element appears in the style bar. But I could not view it, because for this I had to click on it with the mouse, which means that I would remove the focus from the tag, as a result of which the focus would disappear and, accordingly, the pseudo-element: before too. Just like a dog chasing its tail.
And then I discovered debugging and brickpoints. That is, we attach a brickpoint to the HTML element to change the subtree and force the focus. Profit Appears: before and the document freezes. You can safely study everything. Here is a short video of how it was:
That's it, pretty quickly the problem was found and fixed.
PS if anyone is interested in what kind of editor it is in the video, I wrote about him recently .
In general, I'm sitting pulling a 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 the text into the editable span, which with the attribute contenteditable = true. And so I did it a hundred times and everything was OK, but here one, two, and nothing happens ... And visually the element changed in the state: focus. Well, I think something with styles, now I will quickly find dev-tools to help. I uncovered dev-tools and ... and didn’t find anything ... Strange. I opened another site with the same functionality in another tab, everything works there, let's compare nesting and styles. One to one.
In principle, the title says what I came across, but if you need details and a solution, I ask for a cut, there will not be many beeches, but in a short video and a little bit of text.
In general, of course, I assumed that there was clearly something with the element in the state: focus, but, interestingly, although I forced the element to this state in dev-tools, nothing changed. However, when I switched to editing the element (the cursor was inside the tag), I saw that the: before pseudo-element appears in the style bar. But I could not view it, because for this I had to click on it with the mouse, which means that I would remove the focus from the tag, as a result of which the focus would disappear and, accordingly, the pseudo-element: before too. Just like a dog chasing its tail.
And then I discovered debugging and brickpoints. That is, we attach a brickpoint to the HTML element to change the subtree and force the focus. Profit Appears: before and the document freezes. You can safely study everything. Here is a short video of how it was:
That's it, pretty quickly the problem was found and fixed.
PS if anyone is interested in what kind of editor it is in the video, I wrote about him recently .