Freeze screen in Chrome debugger / DevTools panel for inspect element that will disappear on hover/click

Today I need to fix a small CSS issue of a time picker component. In order to debug the code, Chrome debugger will be used and I found it is not so straightforward…

Basically the UI will be triggering on click, and if there is any click event outside of the component itself, it will be vanished. Or in the other word, be completely removed from the DOM. The same problem happens if you want to see the style of bootstrap popover, or any component where some UI will be displayed on hover/click, and hidden on hover/click outside.

After crossing this question, I tested these two solutions that looks promising. Sounds easy but why I didn’t think of these in the first place ?!

Solution 1. Run the setTimeout to trigger debugger

1. Run the following javascript setTimeout(function(){ debugger }, 5000) in the console. This will break into the debugger in 5 seconds.
2. Show your element (by hovering on the UI or whatever you need to do0) and wait until Chrome breaks into the Debugger after 5 seconds.
3. Go to the Elements tab in inspector
4. Find your element and have fun modifying the CSS

Solution 2. Trigger the F8 button while the element is displaying

1. Browse to the desired page, open the dev console.
2. Select the Sources tab in Chrome debugger.
3. In the browser window, hover/click over the desired element to initiate the UI to be displayed.
4. And press F8. This step is very important. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
5. Go to the Elements tab in inspector
6. Find your element and have fun modifying the CSS

Noted: If the DOM element uses the focusout event to hide you have no chance to hit F8