In Material UI, there's an autocomplete. When I focus the input and press up/down, the options are displayed.
I'd like to inspect those options using right click -> Inspect (in Chrome). But as soon as the focus leaves the input, the options disappear (and I can't find them in the DOM), probably because of an onBlur
or similar JavaScript event.
https://material-ui.com/components/autocomplete/
Is there a way to keep the options visible, even when the focus leaves the input, so I can inspect their DOM?
In chrome developer tools->Elements tab add a DOM breakpoint on the input
element or one of it's parents for attribute modifications
(I did it on some parent element). After the event is fired click on resume script execution (or just hit F8) until the dropdown menu appears on the screen but don't finish all script executions, it'll be easier if you remain in debug mode. When the dropdown menu appears simply open the Elements tab again a find the dropdown markup at the bottom of the DOM tree right before the closing </body>
tag