I have a dropdown menu created by select - option.

<select>
  <option value=''>Select an option...</option>
  <option value=1>Option 1</option>
  <option value=2 selected=''>Option 2</option>
  <option value=3>Option 3</option>
  <option value=4>Option 4</option>
</select>

I have a dropdown menu created by select - option.

<select>
  <option value=''>Select an option...</option>
  <option value=1>Option 1</option>
  <option value=2 selected=''>Option 2</option>
  <option value=3>Option 3</option>
  <option value=4>Option 4</option>
</select>

I need to inspect this dropdown menu to do some customer style. I could pause Chrome by below code, but when I move the mouse, the dropdown menu disappears away!

I wonder if there are some ways to pause the screen then inspect the select-option dropdown menu.

setTimeout(function(){debugger;}, 5000)

• javascript
• html
• css

• I faced the same problem and this worked for me. – Priyansh Gaharana Commented Oct 21, 2020 at 2:17

4 Answers 4

I am not exactly sure whether it is possible to keep the drop-down list open while debugging somehow. Maybe you are fine with this workaround:

var debugSelect = document.getElementById('debugSelect');

setTimeout(function() {
  debugSelect.size = debugSelect.length;
  debugSelect.multiple = true;
  debugger;
  debugSelect.multiple = false;
  debugSelect.size = 1;
}, 5000);

<select id="debugSelect">
  <option value="">Select an option...</option>
  <option value="1">Option 1</option>
  <option value="2" selected="selected">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

I believe you can't inspect the dropdown options, even when it's open, you can only inspect the select.

To access inspect mode while the dropdown box is open. Open the Dev Tools, click the dropdown and then use the shortcut to get to inspect mode (Ctrl+Shift+C for chrome).

I believe you can find the solution here

summary: just inspect the parent element and remove the 'blur' and 'mouseout' event listeners

Right Click on the dropdown and select inspect element press CTRL+SHIFT+p type focus select emulate a focussed page click on the drop down and click on the specific elements to inspect which disappear when tried to inspect earlier

Hope this helps