Хабрахабр

Как я отлавливал стили :before для фокус-элемента

Сегодня столкнулся с интересной задачкой, которая заставила меня узнать больше об отладке в хроме. Хочу поделиться с вами (вдруг кто не знал). Возникшая проблемка не сложная, но оказалась не особо тривиальная.

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

Тем не менее, когда я переходил к редактированию элемента (курсор был внутри тега) я видел, что в панели стилей появляется псевдоэлемент :before. В принципе, в заголовке написано с чем я столкнулся, но если вам нужны детали и решение, прошу под кат, там не будет много буков, а в короткое видео и чуть-чуть текста.
В общем, я конечно же предполагал, что тут явно что-то с элементом в состоянии :focus, но, что интересно, хотя я в dev-tools форсировал элементу это состояние, ничего не менялось. Прям как собака, которая гоняется за своим хвостом. Но я не мог его просмотреть, потому что для этого мне надо было кликнуть по нему мышкой, а значит увести фокус из тега, в результате чего фокус исчезал и соответственно псевдоэлемент :before тоже.

То есть навешиваем на HTML-элемент брикпоинт на изменение поддерева и форсируем фокус. И тут я открыл для себя отладку и брикпоинты. Появляется :before и документ замораживается. Профит. Вот небольшое видео как это было: Можно спокойно все изучить.

Всё, довольно быстро проблема была найдена и исправлена.

S. P. если кому интересно, что это там за редактор такой в видосе, я про него писал недавно.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть