Web Laboratory: Observing Mutations

Mad science is not just giant robots, sharks with laser beams strapped to their heads and test tubes. It can be doing things far out of the ordinary just to see if it'll work. That's how I felt about a certain Web API I was told about by the name of MutationObserver.

What is MutationObserver? According to MDN, the MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification. It may not sound like a lot for ordinary web development but you'll be surprised when you think outside the box.

Walking up behind me on ordinary days while doing design and development work, you'll see Chrome's Inspector tools window up on my screen. I prefer to do my visual editing right in the browser using that inspector and copying over the changes to the source code because I can get instant feedback on changes. At times, this can be a pain because I'll forget one or two things that I changed when transferring over and I reload the page, scratching my head about what went wrong. With MutationObserver being well supported across the browsers, a light bulb went off in my head!

One of my common complaints about CMSes is that the feedback is never quite as instant as changing things with inspector tools. You're still going back and forth between pages to make updates and reviewing it. Every time you do so, it saps precious seconds. If MutationObserver listens and can execute things in JavaScript when things happen in the DOM, wouldn't this allow me to do real work from inspector tools?

Quick experimenting confirms my suspicions! MutationObserver is capable of detecting three kinds of events: Changes to attributes on elements, insertion/deletion/rearrangement of elements and changes to the text inside of an element. These three events would cover the majority of CMS activity and with a headless CMS, you could easily hook up MutationObserver to creating API calls after a short delay or sending the records of changes upon saving.

There is one minor downside to this, MutationObserver is not able to detect -indirect- changes to things on the screen. That means if I add a new CSS selector rule as opposed to editing inline styles through the inspector panel, it wouldn't be picked up. This is usually not a problem though as we have themes we're building on top of. Naturally, most of our style changes would be explicit overrides of the theme in places anyway.

If you want to learn more about MutationObserver, you can read the specifications from MDN here.