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 or focusout event

Once the event listeners are removed, you can open the menu and inspect it without disappearing

In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:

then find & check the "Emulate a focused page" option.

On Mac, you can press cmd+\ to pause the script after having opened the dropdown. You can then use shift+cmd+c to inspect elements.

Adding to "In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:" above;

In Chrome 86 and above you can find "Emulate a focused page" option here:

DevTools >> Elements >> "Kebab" menu (3 vertical dots by the settings cog) >> More tools >> Rendering.

Alternately: With Devtools open: Hit CTRL/CMD+SHIFT P to open the command menu HUD, enter "emulate a fo" to narrow the search results and enter (or click) to toggle the setting.