Have you ever had trouble debugging an element that is conditionally visible. If it was visible because of a css hover state, this might be quite simple, as most developers will be aware that the inspector allows us to force a state, but sometimes forcing this state does not show the conditionally visible element, and that is because in many cases it is our good friend Javascript who is controlling this visibility via event handlers.
Thankfully there is a way around this, checkout this area of the dev tools:
So let’s say I want to inspect the css for a popup, that shows inside a div, in the first scenario the popup is programatically added to the DOM on a hover, then removed on a mouse leave, I could break on node removal and inspect the css for the popup before it is removed. Let’s take another scenario in which the popup div is always there, but it has no styles because they are programatically added to the pop when the user hovers, and removed on mouse leave – in this case I could break on attribute modification.