在 chrome 开发工具中更改 属性 时，有什么方法可以触发事件？

Question

我重新发布这个问题试图更具体，请注意这与

非常相似

但我正在努力寻找一种超级简单的方法来跟踪元素属性的变化以触发事件。

特别是，我要跟踪的元素是一个 play/pause 按钮，当按下该按钮时，属性“标题”从“播放”变为“暂停”。在按钮及其所有属性下方。

<canvas class="playbarBigButton" width="48" height="28" title="Play" tabindex="10002" role="button" style="margin-top: 4px; margin-left: 8px;" id="Play" aria-labelledby="PlayaccStr"><div id="PlayaccStr" class="cp-accessibility" style="transform: translate3d(0px, 0px, 0px);"><p style="transform: translate3d(0px, 0px, 0px);">Play</p></div></canvas>

我想做的是在“标题”属性 发生变化时触发按钮上的“点击”事件，这样我就可以强制播放视频，即使它自动停止.

到目前为止，这是我的代码，我正在使用控制台，因为这是我以有限的知识所能处理的唯一事情

let a = document.getElementById('Play');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes") {
      a.click()
    }
  });
});

observer.observe(element, {
  attributes: true
});

此代码的问题在于它会生成无限循环，因为它会跟踪每次更改，当调用点击函数时，观察者会调用另一个点击，依此类推。 我想专门跟踪标题 属性 更改为“暂停”。

Answer 1

已解决

var element = document.getElementById('Play');

var b = 'Play';

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes") { if (element.title == b) {
      element.click()
    }}
  });
});

observer.observe(element, {
  attributes: true
});