Сегодня столкнулся с интересной задачкой, которая заставила меня узнать больше об отладке в хроме. Хочу поделиться с вами (вдруг кто не знал). Возникшая проблемка не сложная, но оказалась не особо тривиальная.
В общем, сижу натягиваю стороннюю верстку готовую на сайт (этот момент важен, так как проблема залетела оттуда и я не был к этому готов). И на странице собирался ввести текст в спан редактируемый, который с атрибутом contenteditable=true. И вот сто раз так делал и все ОК было, а тут раз, два, и ничего не получается… И визуально элемент измененный в состоянии :focus. Ну, думаю, что-то со стилями, сейчас быстро найду, dev-tools в помощь. Расчехлил dev-tools и… и ничего не нашел… Странно. Открыл в другой вкладке другой сайт с таким же функционалом, там все работает, давай вложенность и стили сравнивать. Один-в-один.
В принципе, в заголовке написано с чем я столкнулся, но если вам нужны детали и решение, прошу под кат, там не будет много буков, а в короткое видео и чуть-чуть текста.
В общем, я конечно же предполагал, что тут явно что-то с элементом в состоянии :focus, но, что интересно, хотя я в dev-tools форсировал элементу это состояние, ничего не менялось. Тем не менее, когда я переходил к редактированию элемента (курсор был внутри тега) я видел, что в панели стилей появляется псевдоэлемент :before. Но я не мог его просмотреть, потому что для этого мне надо было кликнуть по нему мышкой, а значит увести фокус из тега, в результате чего фокус исчезал и соответственно псевдоэлемент :before тоже. Прям как собака, которая гоняется за своим хвостом.
И тут я открыл для себя отладку и брикпоинты. То есть навешиваем на HTML-элемент брикпоинт на изменение поддерева и форсируем фокус. Профит. Появляется :before и документ замораживается. Можно спокойно все изучить. Вот небольшое видео как это было:
Всё, довольно быстро проблема была найдена и исправлена.
P.S. если кому интересно, что это там за редактор такой в видосе, я про него писал недавно.
В общем, сижу натягиваю стороннюю верстку готовую на сайт (этот момент важен, так как проблема залетела оттуда и я не был к этому готов). И на странице собирался ввести текст в спан редактируемый, который с атрибутом contenteditable=true. И вот сто раз так делал и все ОК было, а тут раз, два, и ничего не получается… И визуально элемент измененный в состоянии :focus. Ну, думаю, что-то со стилями, сейчас быстро найду, dev-tools в помощь. Расчехлил dev-tools и… и ничего не нашел… Странно. Открыл в другой вкладке другой сайт с таким же функционалом, там все работает, давай вложенность и стили сравнивать. Один-в-один.
В принципе, в заголовке написано с чем я столкнулся, но если вам нужны детали и решение, прошу под кат, там не будет много буков, а в короткое видео и чуть-чуть текста.
В общем, я конечно же предполагал, что тут явно что-то с элементом в состоянии :focus, но, что интересно, хотя я в dev-tools форсировал элементу это состояние, ничего не менялось. Тем не менее, когда я переходил к редактированию элемента (курсор был внутри тега) я видел, что в панели стилей появляется псевдоэлемент :before. Но я не мог его просмотреть, потому что для этого мне надо было кликнуть по нему мышкой, а значит увести фокус из тега, в результате чего фокус исчезал и соответственно псевдоэлемент :before тоже. Прям как собака, которая гоняется за своим хвостом.
И тут я открыл для себя отладку и брикпоинты. То есть навешиваем на HTML-элемент брикпоинт на изменение поддерева и форсируем фокус. Профит. Появляется :before и документ замораживается. Можно спокойно все изучить. Вот небольшое видео как это было:
Всё, довольно быстро проблема была найдена и исправлена.
P.S. если кому интересно, что это там за редактор такой в видосе, я про него писал недавно.
Комментарии (7)
StSav012
16.06.2019 13:16+1А
F8вручную не останавливала страницу?
И формальности ради скажу, что ”brakepoint“ ? ”brickpoint“.
Koneru
16.06.2019 13:26Ну если уж правильно, то «Breakpoints», а в DOM это называется «Force/Element State».
Fi1osof Автор
16.06.2019 13:45-1А F8 вручную не останавливала страницу?
Вот этого тоже не знал. Это бы точно меня спасло бы. Теперь буду знать.
И формальности ради скажу, что ”brakepoint“ ? ”brickpoint“.
В панели написано break on. Не совпадает ни с brakepoint, ни с brickpoint. Мне кажется, что break по произношению ближе к «брик», поэтому и писал брикпоинты. Но конечно же я совсем не англичанин и могу быть в этом совсем не точен, но мы же поняли друг друга?
Get-Web
16.06.2019 13:22+2Возможно я что-то не так понял, но ведь чтобы отлавливать состояние, достаточно выбрать его в инспекторе:
Пример
Fi1osof Автор
16.06.2019 13:57Я тоже так сначала думал и пытался так сделать, но не помогало. В итоге вот и дошел до отладки. И решил написать заметку.
А после вашего комментария решил еще раз перепроверить, вдруг по-разному отрабатывается для обычных инпутов и других тегов в режиме contenteditable, и теперь осознал свою ошибку. У меня на onblur contenteditable=false выставлялось, а css-правило прописано именно для true))
[contenteditable=true]:empty:before { content: attr(data-placeholder); color: #131313; font-size: inherit; display: block; /* For Firefox */ }
Моя невнимательность. Но все равно радует, что больше знать стал.
noodles
Вот ещё древний лайфхак, когда ещё не было бейкпоинтов на дом-е:
У вас будет 4 сек, чтобы сделать ховер/фокус на нужном элементе, а потом запустится отладка..)
Fi1osof Автор
Круто!
Оставлю себе на заметку.