在Chrome开发工具中更改样式时中断

Question

我只是想知道是否有人知道是否可以在Chrome开发工具中的特定元素的特定css属性上添加断点，即当#mydiv's高度属性发生更改时，中断。

Answer 1

您只能使用“元素”面板上下文菜单<div style="height: 20px; width: 100%"> |来中断所有内联样式（Break on...）更改。 Attributes modifications。

Answer 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")

它会在更改时中断，并在控制台的新旧值中打印。