Not able to inspect/debug Autocomplete option elements

Question

I have an autocomplete dropdown box for city names as,

When i try to inspect one of the option elements using right click and Inspect Element, the dropdown menu disappears and inspect element takes me to the original page's dom.

How can one inspect dropdown menus using firebug inspect element?

Jehad

Possible duplicate of What's the trick to inspect popout / dropdown menu style with Firebug? – Tohubohu

Answer 1

Edit HTML right click menu Chrome Dev Tool

In Chrome Dev Tool you can Right Click on the input where you type the adress, Scroll down to "Break On..." and select subtree modifications.

Go back to your input and start typing. It should Pause the app leaving you with the open suggestions dropdown.

Horwath

Great tip, in my case is was not "subtree" but "attribute" .. anyway great suggestion. – Encounter

Answer 2

With the suggestions dropdown visible and DevTools opened, press F8 and switch to the DevTools. You will immediately break at the JS blur handler for the field, so the dropdown will not be removed, thus you'll be able to inspect its DOM.

Commitment

Answer 3

Just right click on Input and click on Inspect and then go to Event Listeners tab and find focusout and remove listeners.

look at this picture

Pennon

Answer 4

The most simple way is to turn on Emulate a focused page checkbox to true. It's in the devTools in Rendering Tab. Now your dropdown doesn't dissapear

Testaceous

Wow... great tip!! – Hesperidin

Answer 5

Can't speak for Firefox, but in Chrome developer tools you can trigger a state on an element manually by right-clicking on the element in the developer window, and choosing the appropriate item (i.e. ':hover').

Waring

autocomplete will never wait for hover. And PS: OP is not asking for that! – Acicula

Answer 6

Inspect the dropdown/input element and remove the "Blur" event from the "Event Listeners"

Delibes