Getting the DOM to Debug for You

0

The diversified day, as section of per week lengthy effort to squash a couple of bugs our crew had in our backlog, I got here throughout something that promised to be a genuine wretchedness in the ass.

It used to be a form of ones where once in a while, something has had some facet enact where something has made the hide un-scrollable when a modal used to be opened. In general what makes our modal scrollable is a modal-start class getting appended to the physique, however in some cases, it staunch wasn’t there. Assuredly, because it wasn’t straightforward to reproduce, it realized its means to the very inspire of our backlog.

But this week, I made up my mind I would fix it. It wasn’t except leisurely on Friday that I realized time to even start taking a see into the topic.

Now, in most cases my modus operandi when debugging something adore here’s to search out the code where the modal is opened and work my means backward from there; shopping for the rest apparent that would be triggering this.

This time, I did now not hang time for that shit. It used to be 5: 30 on a Friday, and I wanted to begin my weekend. So I made up my mind to let the browser attain the work for me.

We are in a position to now not scroll the modal because a category is getting remote from the physique? Let’s work our means inspire from there. So I threw the following snippet as early as I’m in a position to also in my utility and pressed “continue” once or twice except I had reproduced the malicious program.

const observer = contemporary MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'class') {
      console.impress(doc.physique.className);
    }      
  });    
});
observer.gape(doc.physique, { attributes:  staunch });

And what greeted me? A stack impress that suggested me exactly what used to be altering the physique class, including all the pieces main as a lot because it (thanks console.impress).

// first log where the category used to be added as expected
overrideMethod @ react_devtools_backend.js
eval @ bootstrapAngularApp.ts
attributes (async)		
addClass @ jquery.js

// 2d log where the category used to be removed with out observe 
overrideMethod @ react_devtools_backend.js
eval @ bootstrapAngularApp.ts
attributes (async)		
removeModalOpenBodyClass @ DOMOperations.js
i @ Dimmer.js
eval @ Dimmer.js
requestAnimationFrame (async)		
requestFrame @ renderprops.cjs.js
frameLoop @ renderprops.cjs.js

I was instantly ready to behold that the category used to be getting added, however it completely used to be additionally getting removed. I’m in a position to also additionally behold what used to be casting off it and some of the diversified calls that hang been in the chain, painting an extremely sure relate:

  • An unrelated component in a definite library occurred to be mounted – however now not visible

  • This component had an unmount handler which removed the modal-start class

  • The component wasn’t getting unmounted except an animation completed working, which occurred to enact after the category had been added by the start modal

What would hang in most cases been a reasonably onerous direction of of monitoring down what used to be altering the category changed into accurate into a ten minute job attributable to a MutationObserver and a stack impress.

Clearly debugging a grief adore this can also now not work whenever. However the subsequent time I’m caught attempting to settle out why something is altering the DOM, I’m for sure going to be reaching for this trick earlier than later.

Read More

Leave A Reply

Your email address will not be published.