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

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

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

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

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


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

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

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


  1. noodles
    16.06.2019 13:15
    #20285728
    +4

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

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

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


    1. Fi1osof Автор
      16.06.2019 13:42
      #20285790

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


  1. StSav012
    16.06.2019 13:16
    #20285730
    +1

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


    1. Koneru
      16.06.2019 13:26
      #20285750

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


    1. Fi1osof Автор
      16.06.2019 13:45
      #20285808
      -1

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

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

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

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


  1. Get-Web
    16.06.2019 13:22
    #20285742
    +2

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

    Пример
    image


    1. Fi1osof Автор
      16.06.2019 13:57
      #20285838

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

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

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