Select - Option How to Pause browser to Inspect

Question

I have a dropdown menu created by select - option. A sample is HERE

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)

I faced the same problem and [this](https://stackoverflow.com/a/35564736/7455897) worked for me. — Priyansh Gaharana, Oct 21 '20 at 02:17

score 1 · Answer 1 · edited Mar 30 '18 at 08:39

1

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).

edited Mar 30 '18 at 08:39

Xavier Guihot

54,987
21
291
190

answered Feb 07 '18 at 22:51

LoveHateDevelopment

224
2
9

sima ghoreyshi · Answer 2 · 2022-06-19T10:47:40.480

1

I believe you can find the solution here

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

edited Jun 19 '22 at 10:47

answered Jun 19 '22 at 10:33

sima ghoreyshi

379
5
21

score 0 · Answer 3 · answered Feb 07 '18 at 23:56

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>

Select - Option How to Pause browser to Inspect

3 Answers3