How can I inspect html element that disappears from DOM on lost focus?

I'm trying to inspect CSS properties from an input into a table cell. The input appears on click and disappears on lost focus, as when I try to inspect it. How can I do it to don't lost focus while I move to another window (the inspector)?

In Chrome browser, open Developer Tools and select Elements tab, then open the contextual menu of the parent node of the element you want to inspect, in the contextual menu click on Break on > Subtree modifications.

Afterwards you just need to click on the page and you'll get on the inspector without losing focus or losing the element you want to inspect.

You can capture the disappearing element if you pause JavaScript execution with a keyboard shortcut without moving the mouse. Here's how you do this in Chrome:

1. Open up Developer Tools and go to Sources.

2. Note the shortcut to pause script execution—F8.

   

3. Interact with the UI to get the element to appear.

4. Hit F8.

5. Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.

This trick works in Firefox and other modern browsers as well.

If all else fails, type this in the Console:

setTimeout(() => { debugger; }, 5000)

Then you've got 5 seconds (or change the value to anything else) to make whatever you want to debug appear.

None of the other answers worked for me - the DOM tree kept getting modified (i.e. stuff I care about disappeared) right before the script paused.

In chrome devtools settings, there is an option named Emulate a focused page. Which is disabled by default. After enabling this option, if you click anywhere on the devtool window, it wouldn't cause loss of focus on any element in the DOM.

UPDATE (Chrome version >= 86):

After chrome 86 update, this option has been moved to Rendering tab. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu. Start typing Rendering in the Command Menu and select Show Rendering. There you can enable Emulate a focused page.

After that, just click on any element to focus, and then click anywhere on the devtool window. You would see that element doesn't lose the focus. So now you can easily inspect or debug.

(For Chrome version < 86)

Go to devtool settings -> preferences and under Global option, enable Emulate a focused page.

Not sure if this works in your situation but normally (and in every case worth to mention in this regard as it is a great tool) in Chrome Developer Tools you can simulate element states and one is also :focus.

To do so go to the Elements tab in the Developer Tools and make sure you are in the Styles section on the right (this should be the default location when you start the Developer Tools). Now just beneth the Styles in the top right corner you have an icon Toggle Element State. When you click it you can simulate :active, :hover, :focus and :visited for the element you selected on the left in your code view.

In Chrome on the developer tools page for the page under test... click the options menu and open settings for preferences... under DevTools enable 'Emulate a focused page'

Then in the test page cause the elements to appear. This worked to keep my popup search results is focused to stay on the screen so I could work with it.

Not a real solution, but it usually works (:

1. Focus the element
2. Right click for context menu
3. Move down to developer tools

I had a very difficult situation and no answer was working from here (I didn't verify the answers changing the container, which is the body for me, or the original event, because I don't know that). I finally found a workaround by breaking via the Control Event Listener Breakpoints in Chrome Inspector. Maybe that is also a cross browser way of breaking for complicated situations where even F8 or right clicking mouse hide the popup again:

Click right of element in chrome devtools ;-)

Paste the following Javascript in the browser developer console:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

I have a quicker fix since I'm not very good with using tools, here's what i do.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

If you open Chrome DevTools and then trigger the element inspector using keyboard shortcuts, it should solve the problem.

Mac: Cmd+Opt+J and then Cmd+Opt+C

Windows: Ctrl+Shift+J and then Ctrl+Shift+C