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

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

您只能中断所有内联样式（

）使用“元素”面板关联菜单的“断开…”|

属性修改进行更改

您可以通过以下方式进行更改：

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（元素，“样式”）

---

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

样式属性更改很可能是页面布局的一部分。可能没有相关的JavaScript调用堆栈，所以我想知道当这样的breakpoit出现时，您希望看到什么？@YurySemikhatsky在样式属性更改时，您可以看到调用堆栈，这样您就可以确定是什么导致了更改。这似乎对我不起作用：（我看到

style=“overflow:hidden；”

被添加到我的

标记中，该标记有一个属性修改断点，但我什么也没有得到。我最终找到了添加它的原因，虽然是在加载iframe时，所以我猜Chrome无法正确处理这种情况：

iframe.attr（“onload”，“this.style.visibility='可见'；parent.document.body.style.overflow='隐藏'；”）

感谢您的注意！欢迎您在上为此提交一个错误，并提供详细的重编步骤。错误附带的失败案例将非常有用。我有一个带有样式属性的div，当我将此div更改为hidden add by display:none属性时。但断点对我不起作用…要点：您只能在所有内联样式上添加中断。谢谢@AlexanderPavlovOn modern Browser这是迄今为止最好的解决方案，因为它允许您（如果您对上面的代码做一些编辑的话）仅在特定CSS属性更改时中断，而忽略对其他CSS属性的更改。它会触发，这很好！但堆栈跟踪仅显示两个要观察的引用。如何确定在代码中发生的位置？确保在Inspector的设置中没有选中“禁用异步堆栈跟踪”（如果使用Chrome）。