Подтвердить что ты не робот

Перерыв, когда стиль изменился в Chrome Dev Tools

Мне просто интересно, может ли кто-нибудь узнать, можно ли добавить точку перерыва в конкретном свойстве css для определенного элемента в Chrome Dev Tools, т.е. когда значение свойства t20 > height изменилось.

Ответ 1

Вы можете только разбить все изменения стиля inline (<div style="height: 20px; width: 100%">), используя контекстное меню панели "Элементы" Break on... | Attributes modifications.

Ответ 2

Вы можете сделать это следующим образом:

function observe(el, property) {
    var MutationObserver = window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log('old', mutation.oldValue, 'new', mutation.target.style.cssText, 'mutation', mutation);
            if (mutation.attributeName == property) debugger;
        });
    }
    );

    var config = {
        attributes: true,
        attributeOldValue: true
    }

    observer.observe(el, config);
}

Затем вы можете установить точку останова при смене стиля следующим образом: observe(element, "style")

Он сломается при изменении, а также выведет на консоль старое и новое значение.