Stop dropdown menu from closing while debugging CSS

CSS debugging tool is awesome. We normally use the Chrome CSS inspectors to try out quick experiments and quickly find out what certain page or components look like when certain styles are applied.

However, you may find CSS inspection impossible if your component is a dropdown menu, which closes every time you click away for inspection…

To stop the dropdown menu from closing:

  1. Set a break point on the parent node of the dropdown menu

2. Click on the parent node to open the dropdown menu. You will notice that the debugger may pause a few times before the menu is opened

3. Time to investigate and play around the styles on the dropdown menu now that it does not close as soon as you click away!



A software engineer passionate about learning and growth

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store