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.
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().
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 :)