Inspect Element shows elements for just a few seconds before all of the rows collapse

Question

It was suggested that this had already been answered and then my question was closed.

I've looked at all of the links and I don't see an answer there. Please don't close my question unless you're absolutely sure it's been answered.

Why XPath does not highlighted the yellow mark in Chrome84? (2 answers) Chrome 84 Inspect element, find results not highlighted in yellow like before (6 answers) Chrome DevTools not find elements not search)

I'm writing some Selenium code and need to get the CSS Selector for an item on a page. So I bring up the page and go into Tools mode. It doesn't matter which browser I use - Chrome, FireFox, Edge - when click on the "Pick an element from the page" button (to the left of the Inspector in FireFox) and then click on the item I need the CSS Selector for I see the element in the tools section, but as I'm right-clicking it and choosing Copy->CSS Selector, the table it's in collapses (in a second or two) and I no longer have access to the item I clicked on. I've tried manually expanding the TR in the tools view and drilling down to the TD I need, but the same thing happens.

Anyone know of a way to stop this from happening? I was quick enough to copy a few yesterday but for some reason it seems to be happening faster today and I'm not able to catch it.

Right-clicking the item and choosing Inspect Element was also suggested but that does the same thing. The item shows up in the tools section for about 2 seconds and then the table collapses.

Answer 1

When the element tree collapses, it is a sign that it got updated. This happens, for example, when an iframe's URL or document is changed or the child tree structure gets replaced via JavaScript.

In order to stop this from happening, you can stop the JavaScript execution on the next execution once you see the element you want to inspect. Then you are able to inspect the element using the inspect button.

Firefox

1. Switch to the Debugger panel.
2. Once you see the element you want to inspect, click the Pause button or press F8.
3. Cause the JavaScript execution to stop (e.g. by interacting with the page). You can see that the JavaScript execution is stopped when there is a white overlay on the page and a hint saying Paused at Execution.
4. Once the execution is stopped, click the Pick an element from the page button in the toolbar or press Ctrl+Shift+C.
5. Click the element you want to inspect.

Chrome/Edge

1. Switch to the Sources panel.
2. Once you see the element you want to inspect, click the Pause script execution button or press F8.
3. Cause the JavaScript execution to stop (e.g. by interacting with the page). You can see that the JavaScript execution is stopped when there is a hint on the page saying Paused in debugger.
4. Once the execution is stopped, click the Select an element in the page to inspect it button in the toolbar or press Ctrl+Shift+C.
5. Click the element you want to inspect.

Answer 2

I found a semi-workable solution. When the item appears in the tools window note it's name before it disappears. Then go to the Search HTML box and type it's name. It still appears and then disappears, but it seems to stay visible longer.