Cant right click to inspect drop down menu

[yebubu]

Is there a way one can find the xpath for a particular drop down list that cant be inspected because each right click the list disappears.

<div class="Select react-select has-outline has-value is-clearable is-searchable Select--single"><input name="form-field-name" type="hidden" value="7"><div class="Select-control" style="max-width: 300px;"><span class="Select-multi-value-wrapper" id="react-select-testcases-workspace-select-item--value" aria-label="Select Menu. (ID: 7) selected."><div class="Select-value"><span class="Select-value-label" role="option" aria-selected="true" id="react-select-testcases-workspace-select-item--value-item">(ID: 7)</span></div><div class="Select-input" style="display: inline-block;"><input id="react-select-testcases-workspace-select-item" aria-activedescendant="react-select-testcases-workspace-select-item--value" aria-expanded="false" aria-haspopup="false" aria-owns="" class="Select-input datagrid-row-actions" role="combobox" tabindex="0" value="" autocomplete="off"></div></span><span aria-label="Clear value" class="Select-clear-zone" title="Clear value"><span class="Select-clear">×</span></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div></div>

[joseilton (Joseilton Correia)]

If you are using Chrome you can move from Elements tab to Sources, than you can click on F8 to pause the execution (Chrome will enter in debugger mode), after that you can return to Elements tab and inspect your element normal.

Don’t forget to open the element you want to inspect firts, it needs to be in the page before pauses the Chrome.

[damies13 (Dave)]

Hi @yebubu,

Open dev tools first, have the dev tools window open near the browser window so that thIs part is visible:

Then open the option list, while it’s open click the select button (

) (or use it’s shortcut key) and then select the option you want.

Hope that helps,

Dave.

[Timo]

You can set the “Emulate a focused page” setting on. It can be found from More tools → Rendering menu of the Chrome and Edge. After that the drop down menu remains open and you can inspect the code.