Recently I had a client reach out to me about an issue with a project another dev had done for them but wasn't around to debug. They were having a problem with part of the page not showing up at all.
This being a code base I had never seen before I started to dig around. I found that the div in question was there on page load but then was randomly removed from the DOM. I checked a few Javascript files but couldn't find any reference to the div and quickly realized this was a job for DevTools.
The case of the disappearing div
We can tell DevTools to pause the rendering of a page when there are certain changes to the DOM. Let's tell DevTools to stop rendering when a child element is removed from the body tag.
To open Chrome DevTools press Ctrl+Shift+J (on Windows) or Ctrl+Option+J (on Mac).
- Make sure you're on the Elements tab at the top of DevTools.
- Right click the body tag, go to Break on and select subtree modifications
After refreshing the page DevTools has paused the rendering when the div is removed from the DOM. Make sure you're in the Sources tab of DevTools...
In the Call Stack module I can click the function just below jQuery's remove and DevTools will bring me to the code that called $(...).remove().
As you can imagine if this code was buried in some random Javascript file or a giant app.js file it could be pretty hard to track down if you're not familiar with the code base.
Note: You can also have DevTools break on attribute modifications (i.e. a class was added or removed from the element) and node removal (when a specific element is removed from the DOM).
See you soon :)
