Published on

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.

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


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