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

[noodles]

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

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

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

[Fi1osof]

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

[StSav012]

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

[Koneru]

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

[Fi1osof]

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

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

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

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

[Get-Web]

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

Пример

[Fi1osof]

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

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

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