Skip to content

Instantly share code, notes, and snippets.

@captainbrosset
Last active November 14, 2022 13:03
Show Gist options
  • Save captainbrosset/c68ca3d6699f77a34e8a46dd3a0776af to your computer and use it in GitHub Desktop.
Save captainbrosset/c68ca3d6699f77a34e8a46dd3a0776af to your computer and use it in GitHub Desktop.
Useful DevTools snippets
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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment