Focus Drop Downs with DevTools

While working with frontend, often times, you want to play around with the UI, such as the CSS properties of a drop down. The problem arrives when trying to navigated the DOM and clicking in the DevTools hides the drop down.

Emulate a focused page

In Chrome DevTools, you have the option to enable Emulated a focused page, which keeps the drop down open when interacting with devtools.

This option can be found in Elements > Styles, under the .hov table.

This not only work for drop downs but for menus and date pickers etc.

Example

Here's an example of using the feature to show YouTube's search drop down.