Как я отлавливал стили :before для фокус-элемента
Сегодня столкнулся с интересной задачкой, которая заставила меня узнать больше об отладке в хроме. Хочу поделиться с вами (вдруг кто не знал). Возникшая проблемка не сложная, но оказалась не особо тривиальная.
В общем, сижу натягиваю стороннюю верстку готовую на сайт (этот момент важен, так как проблема залетела оттуда и я не был к этому готов). И на странице собирался ввести текст в спан редактируемый, который с атрибутом contenteditable=true. И вот сто раз так делал и все ОК было, а тут раз, два, и ничего не получается… И визуально элемент измененный в состоянии : focus. Ну, думаю, что-то со стилями, сейчас быстро найду, dev-tools в помощь. Расчехлил dev-tools и… и ничего не нашел… Странно. Открыл в другой вкладке другой сайт с таким же функционалом, там все работает, давай вложенность и стили сравнивать. Один-в-один.
В принципе, в заголовке написано с чем я столкнулся, но если вам нужны детали и решение, прошу под кат, там не будет много буков, а в короткое видео и чуть-чуть текста.
В общем, я конечно же предполагал, что тут явно что-то с элементом в состоянии : focus, но, что интересно, хотя я в dev-tools форсировал элементу это состояние, ничего не менялось. Тем не менее, когда я переходил к редактированию элемента (курсор был внутри тега) я видел, что в панели стилей появляется псевдоэлемент : before. Но я не мог его просмотреть, потому что для этого мне надо было кликнуть по нему мышкой, а значит увести фокус из тега, в результате чего фокус исчезал и соответственно псевдоэлемент : before тоже. Прям как собака, которая гоняется за своим хвостом.
И тут я открыл для себя отладку и брикпоинты. То есть навешиваем на HTML-элемент брикпоинт на изменение поддерева и форсируем фокус. Профит. Появляется : before и документ замораживается. Можно спокойно все изучить. Вот небольшое видео как это было:
Всё, довольно быстро проблема была найдена и исправлена.
P.S. если кому интересно, что это там за редактор такой в видосе, я про него писал недавно.
