48

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

4

2 回答 2

40

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

于 2012-11-09T08:07:57.687 回答
14

你可以这样做:

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

它会在更改时中断,并且还会在控制台中打印旧值和新值。

于 2019-06-11T18:34:21.203 回答