如何检查在失去焦点时从 DOM 中消失的 html 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28963272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I inspect html element that disappears from DOM on lost focus?
提问by Rogelio
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)?
我正在尝试从输入到表格单元格中检查 CSS 属性。输入在单击时出现并在失去焦点时消失，就像我尝试检查它时一样。当我移动到另一个窗口（检查员）时，我怎样才能不失去焦点？
回答by Rogelio
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.
在 Chrome 浏览器中，打开 Developer Tools 并选择Elements tab，然后打开要检查的元素的父节点的上下文菜单，在上下文菜单中单击Break on> Subtree modified。
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.
之后，您只需单击页面，即可进入检查器，而不会失去焦点或丢失要检查的元素。
回答by mxxk
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:
如果在不移动鼠标的情况下使用键盘快捷键暂停 JavaScript 执行，则可以捕获消失的元素。以下是您在 Chrome 中执行此操作的方法：
- Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8.
Interact with the UI to get the element to appear.
- Hit F8.
- How you can move your mouse around, inspect the DOM, whatever. The element will stay there.
- 打开开发人员工具并转到来源。
请注意暂停脚本执行的快捷方式— F8。
与 UI 交互以显示元素。
- 击中F8。
- 如何移动鼠标，检查 DOM，等等。该元素将留在那里。
This trick works in Firefox and other modern browsers as well.
这个技巧也适用于 Firefox 和其他现代浏览器。
回答by Nick Farina
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.
然后您有 5 秒的时间（或将值更改为其他任何值）来显示您想要调试的任何内容。
None of the other answers worked for me - the DOM tree kept getting modified (i.e. stuff I care about disappeared) rightbefore the script paused.
其他答案都不为我工作- DOM树不断得到修改（即我所关心的消失的东西），右脚本暂停之前。
回答by Dumba F.
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.
不确定这是否适用于您的情况，但通常情况下（在这方面值得一提，因为它是一个很棒的工具）在 Chrome 开发人员工具中您可以模拟元素状态，其中一个也是:focus.
To do so go to the Elementstab in the Developer Tools and make sure you are in the Stylessection 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, :focusand :visitedfor the element you selected on the left in your code view.
为此，请转到Elements开发人员工具中的选项卡，并确保您位于Styles右侧的部分（这应该是您启动开发人员工具时的默认位置）。现在就在右上角的样式下方，您有一个图标Toggle Element State。当你点击它，你可以模拟:active，:hover，:focus和:visited为元素你在代码视图左侧选择。
回答by user10864281
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'
在 Chrome 中被测试页面的开发人员工具页面上...单击选项菜单并打开首选项设置...在 DevTools 下启用“模拟焦点页面”
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.
然后在测试页中导致元素出现。这有助于使我的弹出式搜索结果集中在屏幕上，以便我可以使用它。
回答by Dmitry Vyprichenko
Not a real solution, but it usuallyworks (:
不是一个真正的解决方案，但它通常有效（：
- Focus the element
- Right click for context menu
- Move down to developer tools
- 聚焦元素
- 右键单击上下文菜单
- 向下移动到开发人员工具
回答by EdC
Paste the following Javascript in the browser developer console:
在浏览器开发者控制台中粘贴以下 Javascript：
// 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);
回答by jan
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:
我遇到了一个非常困难的情况，这里没有任何答案（我没有验证更改容器的答案，这是我的主体，或原始事件，因为我不知道）。我终于通过 Chrome Inspector 中的 Control Event Listener Breakpoints 中断找到了一个解决方法。也许这也是一种跨浏览器的方式来打破复杂的情况，甚至 F8 或右键单击鼠标再次隐藏弹出窗口：
回答by Himanshu Pant
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();
