I'm looking for a solution to track when an HTML element (tag, like a textarea input box) changes from attribute 'readonly' to being not read-only (having the attribute removed as far as I can tell). I'm not yet finding a way to do this in Chrome Dev Tools or vanilla JavaScript or jQuery (I haven't used Firefox for web dev in a long time, sorry).
If I can catch that, and print it out to console.log, that would be great so then I could trace when it's happening, since I'm unable to reproduce a bug the user is reporting under some circumstance.
I've seen some things about MutationObserver though that appears to be an abandoned project and I'm not sure that's a good path to go down. I know I can look up some events in Chrome Dev Tools, but maybe I'm just not seeing what I'm looking for.
MutationObserver isn't abandoned all, it's a modern browser API and could do the job for you. There is an example on that page, that you could use almost of the box.
This is the part you would need to work with:
// modify this to check if `mutation.attributeName` === `readonly`
if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}