Browser Developer Tools

Breakpoints on subtree modification

Recently I was in a situation where I wanted to style an html element but the element would disappear from the DOM on blur, so when I went to inspect the DOM in the dev tools inspector, it would get removed from the DOM, preventing me from inspecting it. The solution is to trigger the debugger. On (at least) Firefox and Chrome (and presumably other Chromium-based browsers), you can right-click on an element and select "Break on..." -> "Subtree Modification". This will drop you in to a debugger when, for example, a modal element is inserted into the subtree on the element you set the trigger on. In debugger mode, you will be able to interact with said element, style it, etc.