Fi1osof Jun 16 2019 at 12:21

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

2 min

4.4K

JavaScript*

Comments 7

noodles Jun 16 2019 at 13:15

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

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

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

Fi1osof Jun 16 2019 at 13:42

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

StSav012 Jun 16 2019 at 13:16

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

Koneru Jun 16 2019 at 13:26

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

Fi1osof Jun 16 2019 at 13:45

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

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

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

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

-1

Get-Web Jun 16 2019 at 13:22

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

Пример

Fi1osof Jun 16 2019 at 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 */
}

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

Show the best of all time