MutationObserver not working properly on localhost

Question

TL;DR: For some reason the MutationObserver doesn't fire at all on my page. The same console snippet works on other pages, but not when run on my localhost.

---

I'm working on a standard react SPA built with webpack and running on localhost.

Right now I'm trying to use https://github.com/KingSora/OverlayScrollbars on my page and they mostly work fine, they just don't seem to be able to automatically detect content changes. With some debugging, I noticed that the MutationObserver used internally doesn't fire at all.

Then I started investigating further and used this code snippet on my page:

let obs = new MutationObserver(changes => console.log('changes:', changes));
obs.observe($0, {
    attributes: true,
    attributeOldValue: true,
    subtree: true,
    childList: true,
    characterData: true,
});

However, no matter how I modify the node ($0) or any other child node, the observer never fires.

However, it's perfectly fine to use the same code snippet on other pages!

Now I have absolutely no idea how this happened, so any help or just ideas would be greatly appreciated!

Answer 1

Well, this is a classic case of "have you tried restarting your computer" - or in this case Chrome.

This same code snippet started working as soon as I restarted Chrome (just opening a new tab wasn't enough - I had to completely restart Chrome).

So I'm guessing some issue in Chrome caused a bug and broke the observer on my page, so I'm hoping it will continue to work fine now :-/