检查在blur 上删除的元素

Question

所以我有一个使用 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(); 
    });
});

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

Answer 1

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

在撰写本文时（Chrome 92），您可以使用 Chrome 开发工具中的

Rendering

设置：

Open Chrome Dev Tools

>

Click the kebab menu

>

More tools dropdown

>

Rendering

>

Check emulate a focused page

这可以让焦点在 Chrome 开发工具中保持启用状态 🎉

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

Answer 2

我通过在没有焦点的情况下右键单击树中的父节点然后

使其工作

-> 中断... -> 子树修改

请注意，页面刷新不会清除此问题，因此如果您忘记了断点的放置位置，可能需要关闭并重新打开检查器

Answer 3

右键单击元素树中的节点 -> 中断... -> 节点删除。

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

Answer 4

我喜欢使用的技巧是

• 打开源面板

• 显示工具提示

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

• 脚本执行暂停时，返回到“元素”面板并按照习惯检查工具提示

Answer 5

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

再次按F8启用JS。

Answer 6

您只需模拟控制台的点击怎么样？

在网站上打开您的 f12 工具，获取元素 id 并执行您自己的操作

$("#the_button").click()

。控制台将保持焦点，这样您的元素就不会模糊。然后您可以转到 elements 选项卡并查看 css。

Answer 7

“但是如果我的 Javascript 非常非常长，并且被缩小了怎么办”<- In this case, you could try this (use F12 to trigger):

$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
// Or in vanilla JS:
window.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })

在这个小提琴中

正如这个SU问题所建议的

我不知道它在 Chrome 中是否有效，但当你已经打开控制台时，它在 Firefox 中可以。

Answer 8

根据 在 Chrome DevTools 键盘快捷键 页面，Ctrl+Shift+C 切换检查元素模式，该模式允许您将鼠标悬停在元素上而不使其消失，这将与 DevTools 中的元素视图同步。然而，一旦你点击该元素，它仍然会消失。

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

在 Firefox 中这不起作用，但您仍然可以使用设置断点的技巧（调试器 -> 事件监听器断点 -> 模糊）。然后，您可以在页面暂停时选择该元素。

Answer 9

如果设置断点对您来说是可以接受的解决方案（根据评论似乎是这样），那么您可以添加调试器；语句自动停止执行。有关更多信息，请查看 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger