所以我有一个元素，它是用JavaScript动态添加到页面的。添加后，它将获得焦点。
我想在chrome开发工具中检查这个元素，但问题是它有一个onblur事件处理程序，可以将它从DOM中删除。所以基本上当我点击开发工具选择元素时，它就被删除了。这里可以看到一个例子：
http://jsfiddle.net/MSZEx/
HTML：
<div id="container">
<button id="the_button">Click me to show field</button>
</div>字符串
JavaScript：
$("#the_button").click(function() {
$elt = $("<input>").attr("type", "text").attr("id", "text_field");
$("#container").append($elt);
$elt.focus();
$elt.blur(function() {
$elt.remove();
});
});型
在示例中，我希望能够检查单击按钮后显示的输入元素。
9条答案
按热度按时间a0x5cqrl1#
所有这些答案对我都不起作用。
在撰写本文时（Chrome 92），您可以使用Chrome开发工具中的
Rendering设置：Open Chrome Dev Tools>Click the kebab menu>More tools dropdown>Rendering>**Check emulate a focused page这将在Chrome开发工具中运行时保持焦点启用
编辑：19/07/2023 -这仍然是Chrome 114的情况
cotxawn72#
我通过右键单击树中没有焦点的父节点&然后
-> Break on. ->子树修改
请注意，页面刷新并不会清除此操作，因此，如果您忘记了断点的位置，可能需要关闭并重新打开检查器
aydmsdu93#
右键单击元素树中的节点-> Break on. ->节点移除。
调试器现在将在删除节点之前中断。
insrf1ej4#
我喜欢用的技巧是
的数据
uurv41yg5#
另一种方法是打开Chrome开发工具，在浏览器视口中聚焦有问题的元素，然后按F8，这将停止所有JS运行（而不会失去焦点），即使元素失去焦点，也会保留该元素，直到您再次启用JS。这样您就可以检查DOM树中的元素并从那里继续。
再次按F8启用JS。
0md85ypi6#
你就模拟一下控制台上的点击声怎么样？
在网站上打开你的f12工具，获取元素id，然后做你自己的
$("#the_button").click()。控制台将保持焦点，因此您的元素不会模糊。然后你可以去elements标签页看看css。2w3rbyxf7#
“但是如果我的JavaScript非常非常长，并且它被缩小了怎么办？”<-在这种情况下，你可以尝试这样做（使用F12触发）：
字符串
in this fiddle
As suggested by this SU question的
我不知道它在chrome中是否有效，但当你已经打开了一个控制台时，它在Firefox中有效。
41ik7eoe8#
根据Chrome DevTools Keyboard Shortcuts页面，Ctrl+Shift+C切换检查元素模式，这允许您将鼠标悬停在元素上而不会消失，这将与DevTools中的Elements视图同步。但是，只要您单击该元素，它仍然会消失。
您可以将其与其他答案组合以立即中断（使用F8或Ctrl+暂停脚本执行）或修改元素/子树（现在应该显示在Elements视图中）。
在Firefox中，这不起作用，但您仍然可以使用设置断点的技巧（调试器->事件侦听器断点->模糊）。然后，可以在暂停页面时选择该元素。
esbemjvw9#
如果放置一个断点对你来说是一个可以接受的解决方案（根据评论看起来是这样的），那么你可以添加一个调试器;语句来自动停止执行。有关详细信息，请检查https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger