我只是想知道是否有人知道是否可以在 Chrome 开发工具中特定元素的特定 css 属性上添加断点,即当#mydiv's
height 属性发生更改时,中断。
问问题
13601 次
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 回答