javascript - 如何以编程方式在 Chromium 中添加 HTML DOM 断点？

Question

我从这个post about Chromium DevTools看到了存在添加 DOM 断点的可能性。考虑到我要监视所有元素，我试图找到一种方法来以编程方式添加此类断点。我也读过这个question about DOM breakpoints但它似乎没有给我任何有用的提示。

为了获得类似的结果，我使用了检测此类 DOM 元素的 setAttribute() 函数，将其替换为使用调试器的包装器；触发调试器的指令。无论如何，这种方法在处理 innerHTML 或 innerText 赋值时失败了，因为在 js 中无法实现运算符重载。

有人可以建议我一个实用的解决方案吗？

Answer 1

您可能想使用 MutationObserver , 以观察给定根元素对 DOM 的任何更改。您也可以将调试器放在那里，如果 devTools 打开它应该会中断。

const targetNode = document.getElementById('observed-element');
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    console.log(mutation.type);
    console.log(mutation.target);
    debugger; 
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// change class
setTimeout(()=>{
  targetNode.setAttribute('class', 'some-class')
}, 0);

// change innerText
setTimeout(()=>{
  targetNode.innerText = 'some text';  
}, 0);

<div id="observed-element">
</div>