Question

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

我想检查chrome dev工具中的元素，但问题是它有一个onblur事件处理程序，可以从DOM中删除它。所以基本上当我点击开发工具来选择元素时，它就被删除了。这里可以看到一个例子：

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

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

- ＆GT;打破...... - ＆gt;子树修改

请注意，页面刷新不会将其清除，因此可能需要关闭＆amp;如果你忘记了断点的位置，请重新打开检查员

Answer 2

右键单击元素树中的节点 - ＆gt;打破...... - ＆gt;节点删除。

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

Answer 3

另一种方法是打开Chrome开发工具，将有问题的元素集中在浏览器视口中，然后点击 F8 ，这将阻止所有JS运行（不会失去焦点），甚至在它会失去焦点，直到你再次启用JS。这样，您可以检查DOM树中的元素并从那里继续。

再次点击 F8 启用JS。

Answer 4

你如何从控制台模拟点击？

在网站上打开您的f12工具，获取元素ID并自行执行$("#the_button").click()。控制台将保持焦点，因此您的元素不会模糊。然后，您可以转到元素选项卡并查看css。

Answer 5

根据在Chrome DevTools Keyboard Shortcuts页面上， Ctrl + Shift + C 切换“检查元素模式”，它使您可以将鼠标悬停在元素上而不会消失，这将与DevTools中的“元素”视图同步。但是，只要您单击该元素，它仍然会消失。

您可以将其与其他答案结合起来以立即中断（使用 F8 或 Ctrl + \ 暂停脚本执行）或修改元素/子树（应该现在显示在“元素”视图中。

Answer 6

我想使用的技巧是

打开源面板
显示工具提示
使用键盘快捷键暂停脚本执行。（将鼠标悬停在暂停图标上可以找到键盘快捷键）
暂停脚本执行后，返回到“元素”面板并按照习惯检查工具提示

Answer 7

如果给你一个断点是一个可接受的解决方案（它似乎是根据评论），那么你可以添加一个调试器;自动暂停执行的语句。有关详细信息，请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

Answer 8

＆＃34;但是，如果我的Javascript非常长，并且它被缩小了＆＃34; ＆lt; - 在这种情况下，你可以试试这个：

$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

in this fiddle

As suggested by this SU question

我不知道它是否适用于chrome，但是当你已经打开控制台时它会在Firefox中运行。

检查被删除的元素onblur

8 个答案: