Como eu peguei: antes de estilos para um elemento de foco

Hoje me deparei com um problema interessante que me fez aprender mais sobre a depuração no chrome. Eu quero compartilhar com você (de repente, quem não sabia). O problema que surgiu não foi difícil, mas não foi muito trivial.

Em geral, estou sentado, puxando um layout de terceiros para o site (este ponto é importante, pois o problema veio de lá e eu não estava pronto para isso). E na página eu ia inserir o texto no espaço editável, que com o atributo contenteditable = true. E então eu fiz isso cem vezes e estava tudo bem, mas aqui uma, duas e nada acontece ... E visualmente o elemento mudou no estado: foco. Bem, acho que algo com estilos, agora vou encontrar rapidamente ferramentas de desenvolvimento para ajudar. Descobri ferramentas de desenvolvimento e ... e não encontrei nada ... Estranho. Abri outro site com a mesma funcionalidade em outra guia, tudo funciona lá, vamos comparar aninhamento e estilos. Um para um.

Em princípio, o título diz o que eu encontrei, mas se você precisar de detalhes e uma solução, peço um recorte, não haverá muitas faias, mas em um pequeno vídeo e um pouco de texto.

Em geral, é claro, eu assumi que havia claramente algo com o elemento no estado: focus, mas, curiosamente, embora eu tenha forçado o elemento a esse estado em dev-tools, nada mudou. No entanto, quando mudei para editar o elemento (o cursor estava dentro da tag), vi que o pseudo-elemento: before aparece na barra de estilos. Mas não pude vê-lo, porque para isso tive que clicar nele com o mouse, o que significa que removeria o foco da tag, como resultado do qual o foco desapareceu e, consequentemente, o pseudo-elemento: antes também. Assim como um cachorro perseguindo seu rabo.

E então eu descobri a depuração e os brickpoints. Ou seja, anexamos um brickpoint ao elemento HTML para alterar a subárvore e forçar o foco. Lucro Aparece: antes e o documento congela. Você pode estudar tudo com segurança. Aqui está um pequeno vídeo de como foi:


É isso, muito rapidamente o problema foi encontrado e corrigido.

PS: se alguém estiver interessado em que tipo de editor é esse no vídeo, escrevi sobre ele recentemente .