282

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

4
  • 2
  • 3
    is not, the solution on this question is not suitable here Mar 10, 2015 at 19:09
  • 1
    The solution is very suitable
    – Jonathan
    Mar 10, 2015 at 22:43
  • 2
    There are other questions resolved with this answer, and it was my first try, but in this situation, the :focus state is lost when you change from the browser to the Chrome Developer Tools window, and the desired item to check desappears too. I'm talking about DOM elements that appears on click, and disappears on lost focus. Mar 11, 2015 at 7:59

12 Answers 12

243

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.

enter image description here

6
  • 9
    Is there a way in FF too?
    – dude
    Feb 6, 2018 at 8:44
  • 4
    thanks, after hours blocked I got this solution, and decided to write the question and solution here, over time is my main source of reputation here, you know, I don't have time to questions like "how can you do 2+2 on java?" Mar 30, 2019 at 20:02
  • How do you find the parent node of the element you want to inspect? I have the button I click on to open the element in the inspector, but the pop-up is apparently unrelated in the DOM.
    – Michael
    Jan 3, 2020 at 19:51
  • 1
    yes, sometimes javascript create new elements directly under body or related top DOM elements. If is your code no problem, you must know where your javascript is creating the thing, if not, maybe you must break on BODY subtree modifications and check on dev tools where exactly is creating new dom elements (don't have to be the direct parent) Jan 4, 2020 at 11:30
  • For those confused about the contextual menu, it is the three dots menu at the far left of the dom node.
    – palerdot
    Jan 31, 2020 at 6:48
177

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.

For Chrome version >= 86:

Open devtools and then 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.

Chrome DevTools rendering tab

For Chrome version < 86

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

Old Chrome settings/preferences panel

8
  • 4
    It's no longer there in Chrome 86
    – basin
    Oct 18, 2020 at 9:35
  • 10
    @basin Thanks for letting me know. I've updated the answer with the solution for chrome 86. Oct 19, 2020 at 7:34
  • 6
    This should be the accepted answer. By far the best answer.
    – Jamie
    Apr 13, 2021 at 21:26
  • 5
    THIS is the only answer that works among this page full of garbage responses. Sep 13, 2021 at 22:18
  • 3
    This answer has solved a problem I've encountered so many times and that causes so much frustration each and every time. Thanks! Sep 22, 2022 at 10:33
123

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.

5
  • 14
    This solution is pretty hacky, but it actually does the work! Thank you!
    – Manjar
    Jul 24, 2018 at 12:20
  • 3
    The most reliable simple solution of them all.
    – James
    Apr 22, 2020 at 13:51
  • 1
    I love how dumb and yet effective this is. Mar 1, 2021 at 18:25
  • You sir, are my hero.
    – Eagl3
    Sep 27, 2022 at 20:04
  • This is the only solution what worked for me. Thanks!
    – Trevor
    Oct 10, 2022 at 21:12
119

You can capture the disappearing element if you pause JavaScript execution without moving the mouse. You can do so with a keyboard shortcut or by triggering a debugger statement. This works for elements whose appearance is controlled by JavaScript, rather than CSS :hover (if CSS, see Dumba F.'s answer).

Keyboard shortcut

This approach works for pages which don't use JS to trigger special behavior on keypresses. These instructions are for Google Chrome, but can be adapted to other modern browsers:

  1. Open up Developer Tools and go to Sources.

  2. Note the shortcut to pause script execution—F8 (there may also be another shortcut depending on your OS).

    Pause script execution

  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.

debugger statement

To trigger a debugger statement which executes while the hovered element is visible, use setTimeout:

  1. Open the JS console, and enter:

    // Pause script execution in 5 seconds
    setTimeout(() => { debugger; }, 5000)
    
  2. Cause the hover to open and wait for the script execution to be paused.

(Same as Nick Farina's answer)

7
  • 15
    This is great for many things - but some scripts will still trigger before the debugger is locked. For example my autocomplete select box hides all the choices before scripts are paused - making it very difficult to tweak styles interactively.
    – Mir
    Aug 17, 2016 at 22:29
  • Unfortunately this is a chrome only hint, but solved it why i tried it myself.
    – webwake
    May 10, 2017 at 18:13
  • 2
    @webwake, yes this particular example is in Chrome, but most modern browsers will let you pause script execution using a keyboard shortcut.
    – mxxk
    May 14, 2017 at 0:30
  • 1
    Good to hear @JordanGray. Did you mean -backslash? For me it says both it as well as F8 work.
    – mxxk
    Jul 27, 2018 at 0:07
  • 1
    I've found that Control-backslash (⌘-backslash mac) often works even when F8 triggers a script before pausing. Jan 19, 2022 at 12:38
18

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.

enter image description here

1
  • 3
    There are other questions resolved with this answer, and it was my first try, but in this situation, the :focus state is lost when you change from the browser to the Chrome Developer Tools window Mar 10, 2015 at 13:53
13

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.

1
11
+50

Not a real solution, but it usually works (:

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

Inspecting focusable input

1
  • 1
    still works on Chrome as of January 2020, thanks for this! nice workaround
    – manroe
    Jan 24, 2020 at 0:03
5

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:

enter image description here

2

Click right of element in chrome devtools ;-)

enter image description here

1
  • 4
    The question author asked about an element that wouldn't be in the elements panel once the devtools was opened. Also, make sure you include instructions outside of a screenshot so it's easily readable and accessible. May 28, 2021 at 16:39
1

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);
0

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();
-2

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

[1]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.