Inspecting drop down menus in new Chrome
Hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you. If you're on a Mac, you may have to open system preferences and check off "Use all F1,F2,etc" check box (Or simply use fn + F8).
Sometimes it only works if you are in the Sources tab of the inspector.
*Yes, you should be in the source tab and MOST IMPORTANT is you should close all the opened tabs in the Sources tab before you press F8(win) or Fn+F8(mac). *
Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a blur
or focusout
event is always triggered on the element when I click anywhere outside the element.
One way I was able to inspect the element is to prevent these events from being triggered is by removing their event listeners:
- Inspect the input element on Chrome
- Go to the Event Listeners tab and remove the
blur
orfocusout
event
Once the event listeners are removed, you can open the menu and inspect it without disappearing