Useful DevTools snippets

dom-mutation-logger.js

function logMutation(mutation) {
    console.log(mutation);
}

const mutationObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // Build a reason object that will let the user know what exactly happened
      let details = null;
      if (mutation.type === "attributes") {
        details = {
          name: mutation.attributeName,
          oldValue: mutation.oldValue,
          value: mutation.target.getAttribute(mutation.attributeName)
        };
      } else if (mutation.type === "childList") {
        details = {
          addedNodes: mutation.addedNodes.length,
          removedNodes: mutation.removedNodes.length
        };
      } else {
        // TODO: add more specific mutation details types.
        details = mutation;
      }

      logMutation({
        target: mutation.target,
        type: mutation.type,
        date: new Date(),
        details
      });
    }
});

mutationObserver.observe(document, {
    attributes: true,
    attributeOldValue: true,
    childList: true,
    subtree: true
});