Log all mutations to a particular node

log_mutations.js

// Select the node that will be observed for mutations
// Options for the observer (which mutations to observe)
const config = {attributes: true, childList: true, subtree: true};

const htmlify = xs => xs && [...xs].map(x => x.innerHTML)

let counter = 0

// Callback function to execute when mutations are observed
const callback = function (mutationsList, observer) {
    for (let mutation of mutationsList) {
        console.log(counter)
        counter++
        if (mutation.type === 'childList') {
            console.log('%c Modified:', 'color: #bada55')
            console.log(mutation.target.innerHTML);
            
            console.log('%c Added:', 'color: #bada55');
            console.log(htmlify(mutation.addedNodes))
            
            console.log('%c Removed:', 'color: #bada55');
            console.log(htmlify(mutation.removedNodes))
        } else if (mutation.type === 'attributes') {
            console.log('%c Changed ' + mutation.attributeName + ' of: ', 'color: #bada55');
            console.log(mutation.target.innerHTML)
        }
    }
};

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

// Start observing the target node for configured mutations
const log_mutations = () => observer.observe(document.body, config);
export default log_mutations