How to programmatically add HTML DOM breakpoints in chromium?

Question

I've seen from this post about Chromium DevTools that there exists the possibility to add DOM breakpoints. Given that I've a full range of elements to monitor I was trying to find a way to programmatically add such breakpoints. I also read this question about DOM breakpoints but it doesn't seem to give me any useful hint.

To achieve a similar result I've used to instrument the setAttribute() function of such DOM elements replacing it with a wrapper that uses the debugger; instruction to trigger the debugger. Anyway this approach fails when dealing with innerHTML or innerText assignments given that there is no way of achieving operator overloading in js.

Can someone suggest me a practical solution?

Answer 1

You may want to use MutationObserver, to observe for any change to a DOM at given root element. Also you can put debugger there and if devTools is open it should break.

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>