For the dropdown menu on one of my webpage, after I click to do Inspect element on one of menu items, the dropdown menu would collapse and disappear, and such that I couldn't check the content of the dropdown menu in the html and neither really check the corresponding css styles (and further play with the styles). Is there a way to freeze the dropdown menu after clicking to do the Inspect element operation?
To make drop-down visible and inspect the elements under the drop-down, In the automation testing company we use to set drop-down-content { display: none; } to "block" in HTML while inspecting element, So that drop-down did not disappears. or set display none check box to uncheck under DOM. Hope this solution works for you.
First of all we need to open a Chrome DevTool. We can do it in multiple ways: Click on DevTool’s Elements Tab. Right Click on <body> HTML element. That’s it. Now when you start typing in Google search box.
So to work around this in the Developer Tools inspector, right click on the element that is driving the elements to appear/disappear (kendo-dropdownlist) and select Break on | subtree modifications. Now go to the web page and click on the dropdown to show the dropdown options.
Show activity on this post. On Windows, press F12 first, at the page with the menu, then point your mouse to the element menu (the menu will drop down), then press CTRL + Shift + C. Now you can inspect all the elements.
After clicking on the menu, press F8 to pause script execution. That should keep your menu open so you can inspect it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With