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

2 minute read

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.

Freeze screen in Chrome debugger

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. 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

Solution 1

Solution 2. Run the setTimeout to trigger debugger.

  1. Run the following javascript in the console. This will break into the debugger in 5 seconds.
setTimeout(function(){debugger;}, 5000)
  1. Go show your element (by hovering or however) and wait until Chrome breaks into the Debugger.
  2. Go to the Elements tab in inspector
  3. Find your element and have fun modifying the CSS

Solution 2

Leave a Comment