检查被删除的元素onblur

Question

所以我有一个使用Javascript动态添加到页面的元素.添加后,它被授予焦点.

我想检查chrome dev工具中的元素,但问题是它有一个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(); 
    });
});

在示例中,我希望能够检查单击按钮后显示的输入元素.

Answer 1

所有这些答案对我来说都不起作用。

在撰写本文时 (Chrome 92)，您可以使用RenderingChrome 开发工具中的设置：

Open Chrome Dev Tools> Click the kebab menu> > More tools dropdown>RenderingCheck emulate a focused page

这可以在使用 Chrome 开发工具时保持焦点启用

编辑：2024年1月20日 - Chrome 120 中仍然是这种情况

Answer 2

我通过右键单击树中没有焦点的父节点来实现它的工作

- > Break on ... - > Subtree Modifications

请注意,页面刷新不会清除这一点,因此如果您忘记了放置断点的位置,可能必须关闭并重新打开检查器

Answer 3

右键单击元素树中的节点 - > Break on ... - > Node Removal.

调试器现在将在节点被删除之前中断.

Answer 4

我喜欢使用的技巧是

• 打开源面板

• 显示工具提示

• 使用键盘快捷键暂停脚本执行。（将鼠标悬停在暂停图标上以查找键盘快捷键）

• 当脚本执行暂停时，返回到 Elements 面板并像往常一样检查工具提示

Answer 5

另一种方法是打开 Chrome 开发工具，将有问题的元素聚焦在浏览器视口中，然后点击F8这将停止所有 JS 运行（不会失去焦点），即使在失去焦点后也会离开该元素，直到您再次启用 JS。通过这种方式，您可以检查 DOM 树中的元素并从那里继续。

F8再次点击启用JS 。