如何侦听您使用chrome开发人员工具所做的DOM更改 [英] How to listen in on DOM changes that you make with chrome developer tool
问题描述
我需要制作一个可以检测到何时使用chrome开发人员工具更新网页属性的应用程序. 例如.如果我调出开发人员工具,请使用元素选择器并更改特定元素的字体大小(请参见图片).我应该能够运行一个程序,通知该页面上更新了哪些元素以及更改了哪些属性.
I need to make an application that can detect when I use chrome developer tool to update attributes on a webpage. E.g. if I bring up the developer tool, use the elements selector and change the font size of a specific element (see picture). I should be able to have a program running that is notified with what element was updated on the page, and what attributes was changed.
那怎么办?
推荐答案
这听起来像是变异观察者作业.看看 https://developer.mozilla.org/en/docs/Web /API/MutationObserver
It sounds like a mutation observor job. Have a look at https://developer.mozilla.org/en/docs/Web/API/MutationObserver
示例 http://jsfiddle.net/3y3rpfq5/1/
示例代码:
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);
这篇关于如何侦听您使用chrome开发人员工具所做的DOM更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!