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



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

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

В принципе, в заголовке написано с чем я столкнулся, но если вам нужны детали и решение, прошу под кат, там не будет много буков, а в короткое видео и чуть-чуть текста.

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

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


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

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

Вы можете помочь и перевести немного средств на развитие сайта



Комментарии (7):

  1. noodles
    /#20285728 / +4

    Вот ещё древний лайфхак, когда ещё не было бейкпоинтов на дом-е:

    setTimeout(function(){
      debugger;
    }, 4000);
    

    У вас будет 4 сек, чтобы сделать ховер/фокус на нужном элементе, а потом запустится отладка..)

    • Fi1osof
      /#20285790

      Круто!
      Оставлю себе на заметку.

  2. StSav012
    /#20285730 / +1

    А F8 вручную не останавливала страницу?
    И формальности ради скажу, что ”brakepoint“ ? ”brickpoint“.

    • Koneru
      /#20285750

      Ну если уж правильно, то «Breakpoints», а в DOM это называется «Force/Element State».

    • Fi1osof
      /#20285808 / -1

      А F8 вручную не останавливала страницу?

      Вот этого тоже не знал. Это бы точно меня спасло бы. Теперь буду знать.

      И формальности ради скажу, что ”brakepoint“ ? ”brickpoint“.

      В панели написано break on. Не совпадает ни с brakepoint, ни с brickpoint. Мне кажется, что break по произношению ближе к «брик», поэтому и писал брикпоинты. Но конечно же я совсем не англичанин и могу быть в этом совсем не точен, но мы же поняли друг друга?

  3. Get-Web
    /#20285742 / +2

    Возможно я что-то не так понял, но ведь чтобы отлавливать состояние, достаточно выбрать его в инспекторе:

    Пример
    image

    • Fi1osof
      /#20285838

      Я тоже так сначала думал и пытался так сделать, но не помогало. В итоге вот и дошел до отладки. И решил написать заметку.
      А после вашего комментария решил еще раз перепроверить, вдруг по-разному отрабатывается для обычных инпутов и других тегов в режиме contenteditable, и теперь осознал свою ошибку. У меня на onblur contenteditable=false выставлялось, а css-правило прописано именно для true))

      [contenteditable=true]:empty:before {
          content: attr(data-placeholder);
          color: #131313;
          font-size: inherit;
          display: block;
          /* For Firefox */
      }
      

      Моя невнимательность. Но все равно радует, что больше знать стал.