Google chrome 如何监听使用chrome developer工具进行的DOM更改

我需要做一个应用程序，可以检测当我使用ChromeDeveloper工具更新网页上的属性。 例如，如果我打开开发者工具，使用元素选择器并更改特定元素的字体大小（见图）。我应该能够运行一个程序，该程序会被通知页面上更新了哪些元素，以及更改了哪些属性

这怎么可能呢

---

这听起来像是一个突变观察者的工作。看看

范例

示例代码：

var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

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

---

谢谢，但我不确定如何知道我观察到的更新，例如MutationObserver（其他选项可用）是从开发人员工具进行的。可能是网页上运行的javascript导致了dom的更改？@user681814不确定您的意思，但小提琴处理通过点击按钮进行的dom更改，即javascript。我将尝试澄清：我需要知道dom中的更改是否是由使用开发工具的人引起的。如果变更是由其他原因引起的，则不应对事件采取行动。如果我使用你的小提琴通过点击按钮来改变字体大小，那么不应该对事件采取行动（现在是这样）。只有当我用chrome开发工具改变字体大小时，它才会说“你用chrome开发工具改变了字体大小”。你有解决这个问题的办法吗？？？@Tirtha是需要这个功能的网站，由你控制（由你制作）？校验和可以作为可能的解决方案吗？例如，您控制的网站在对DOM进行更改时会更新校验和。当您使用开发人员控制台更改某些内容时，您只是不更新此校验和。或者像这样的问题被认为是无效的解决方法？@Kumar您的链接没有回答这个问题。问题是我们如何检测从开发人员控制台初始化的更新。问题不在于我们通常如何检测DOM更新。