- 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](/_next/image?url=%2Fstatic%2Fbites%2Ffocus-drop-downs%2Fdevtools.png&w=3840&q=75)
Example
Here's an example of using the feature to show YouTube's search drop down. ![Chrome DevTools](/_next/image?url=%2Fstatic%2Fbites%2Ffocus-drop-downs%2Ffocused-drop-down.gif&w=3840&q=75)
![Chrome DevTools](/_next/image?url=%2Fstatic%2Fbites%2Ffocus-drop-downs%2Ffocused-drop-down.gif&w=3840&q=75)