How to globally track property changes and DOM mutations in JavaScript?

Question

I am working on a project where I need to monitor changes in the DOM, specifically tracking any and all JavaScript property changes that affect the DOM elements. My goal is to listen for any 'set' operations on properties (including direct assignments, method calls, etc.) that would result in a modification in the DOM.

Here's what I'm trying to achieve:

1. Global Tracking: I want a mechanism that allows me to keep track of any property that is set anywhere in my JavaScript code that affects the DOM. This includes properties on DOM elements themselves or any other objects that ultimately modify the DOM.

2. DOM Mutations: In addition to tracking property changes, I also need to observe modifications to the DOM structure, including elements being added, removed, attributes changing, etc.

From my understanding I can not Proxy the entire DOM element and I am not sure on how to use Object.defineProperty() for intercepting property changes. MutationObserver for watching DOM alterations seems a good solution.

Is there a recommended approach or existing library that facilitates this kind of global DOM monitoring? Additionally, how can I ensure that this process is performance-efficient, considering the potentially large overhead of tracking all these changes?

Thank you in advance for your suggestions!

I began by experimenting with the Proxy object to intercept JavaScript property changes.