Log all html output in browser

Question

We want to monitor/log the html contents of a webbased Javascript. This html contents might be changed from server side, or triggered by a mouseclick on client side.

I am looking for a way to automatically save each change in html in a log file, or alternatively on every mouseclick, first save the html content and the execute the mousclick. Preferred browser is chrome, but opera or firefox e.g. would also be fine. Do you have any hints how to realize this ?

Regards and a happy new year to all of you Helmut

Answer 1

The JavaScript MutationObserver API will allow you to watch for changes being made to the DOM. You can then launch subroutines/functions to loop through the DOM notes and save them to your log file.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

You can also put a click handler on the body tag and log each element clicked on:

document.querySelector('body').addEventListener('click', e => {
   console.log(e.target.nodeName);
});

document.querySelector('body').addEventListener('click', e => {
   console.log(`Node: ${e.target.nodeName} - Id: ${e.target.id} - Class: ${e.target.getAttribute('class')}`);
});

<div id="d1">Hello world</div>
<!-- Example of comment -->
Text <span>Text</span> Text<br />
<svg height="20" width="20">
  <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" />
</svg>
<hr />
<output id="result" class="bob fred">Has a couple of classes</output>