Well, I learned something new
How to monitor changes to inline styles in console
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
references: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
const targetNode = document
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
console.log({
mutation,
inline: mutation.target.style[0],
style: mutation.target.style[mutation.target.style[0]]
})
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
This does not solve the problem
but could be used as a starting point for a custom solution to the problem.
custom diffing of each element replacing old values with the latest values you could end up with a diff of all changes up to this point using your own maintained list.
This could be a pr to each of the browsers or created as a chrome extension. Goodluck, wanted to present a possible solution instead of saying it was impossible.
