除了轮询之外，还有其他方法可以检测 Chrome 的开发工具中更改了哪些类样式？答案

【问题标题】：Is there another way aside from polling to detect which class styles are changed in Chrome's dev tools?除了轮询之外，还有其他方法可以检测 Chrome 的开发工具中更改了哪些类样式？
【发布时间】：2017-01-15 17:06:25
【问题描述】：

我知道我可以将MutationObserver 用于内联样式，但我想知道是否有一种方法可以检测外部类样式是否已被 chrome 的开发工具更改以及更改是什么。在此示例中，将字体颜色更改为绿色：

这是我能想到的最好的。 https://jsfiddle.net/cotssc7e/

var elem1 = document.getElementById("elemId");
var this_id = $('#elem-container').attr('id');
var style = window.getComputedStyle( document.getElementById(this_id), "")

  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("color");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  setInterval(function() { getTheStyle() }, 1000)

我用过这样的 MutationObserver：

var MutationObserver = window.MutationObserver;

var target = document.querySelector('#page');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });    
});
var config = { attributes: true, childList: true, characterData: true, attributeOldValue: true, subtree:true, attributeOldValue:true, characterDataOldValue:true  }
observer.observe(target, config);

但是如果您查看原始照片，MutationObserver 不会从开发工具中检测到类样式更改，因为我认为 DOM html 没有更改。我尝试在 css 本身上运行 MutationObserver，但 chrome 并没有真正改变 css，它们只改变了 computedStyle。以及如何以及发生了什么变化是我想要弄清楚的。

【问题讨论】：

那么问题到底是什么？你知道你可以使用 MutationObserver 并且你有每秒轮询的代码......你实际上想解决什么？
轮询是最好的选择吗？
我试图简单地返回更改的类以及更改的方式。
轮询可能是检测所有变体中 CSS 更改的唯一方法。
有没有办法检测选择了哪个元素，所以我至少可以检测到该元素中的 CSS 更改？

标签： javascript css google-chrome

【解决方案1】：

如果您只是想知道 Chrome 的开发工具是否具有检查节点/属性是否已更改的机制，那么答案是肯定的！导航到 Elements 窗格，右键单击所需节点并选择 Break on... > Attributes Modifications。

如果您想以编程方式执行此操作，可以使用MutationObserver，这里是MDN example 的略微修改版本：

var target = document.getElementById('example');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if(mutation.attributeName === 'class') {
    	console.log('Class changed!!', target.classList.value)
    }
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: false, characterData: false };

// pass in the target node, as well as the observer options
observer.observe(target, config);

setTimeout(function() {
	target.classList.add('two');
}, 3000);

.one {
  width: 200px;
  padding: 20px;
  background-color: green;
}

.two {
  color: white;
}

<div id="example" class="one">
  Hello
</div>

您可以在某些父元素（例如<body>）上设置MutationObserver，而不是轮询样式更改，并将{ subtree: true, attributes: true } 添加到您的配置中而不是轮询。您可以使用突变事件（并且仍然注意 attributes 类型突变）来触发您的代码，而不是每 100 毫秒轮询一次。

【讨论】：

有没有办法用我的javascript检测到这个？我最终想要一些返回元素的函数，并且属性发生了变化。（即.dog{ 'height':'200%'}
用程序化变更检测示例更新了我的答案
不，这只会检测 DOM 中的物理变化，因此它可以使用内联样式或添加像你一样的类，jsfiddle.net/0c99dbkw 但 MutationObserver 不会检测到 computedStyles 的变化，我想是 chrome 的做法。我认为如果我对开发工具进行扩展，或者如果我循环遍历所有类属性以寻找更改，我可能只能检测到诸如 .someClass{'color':'red'} 之类的更改。这是真的吗？
再次更新了我的答案，提供了绕过轮询的选项。
非常感谢，但是如果您查看我更新的答案，我认为 MutationObserver 不会在开发工具更改计算样式时触发。