Javascript 如何调试和检查因鼠标点击或焦点更改而更改的内容？

我目前正在玩弄一些自动完成表单字段，发现很难检查生成的下拉项。只要我单击“inspect element”按钮或尝试右键单击下拉列表，原始的autocomplete输入就会运行onclick事件（或在焦点更改时触发的事件），并隐藏、删除或以其他方式修改我试图检查的元素

有没有一种方法可以使用调试器，这样我给它的mouseclick和其他命令就不会被我试图调试的脚本截获

---

我目前在Firebug和Chrome的inspector上都有这种问题。我现在能想到的唯一解决方案是在适当的事件处理程序中设置一些智能断点，但如果我不知道要查找什么事件处理程序或它们在原始代码中隐藏在哪里，那么这很难做到…

您需要使用断点。至于追踪哪里发生了什么，Chrome的“调用堆栈”窗口会非常有用

---

Cheers

您可以设置断点并在触发后进行检查，我注意到这会冻结DOM。

如果您在选择元素时遇到问题，您可以尝试在Mac上使用cmd+shift+c来选择元素，而无需右键单击它

---

如果它的DOM操作有问题，您可以通过右键单击“元素”面板中的元素并将“强制状态”设置为“焦点”，尝试强制输入元素的状态。

在Firebug中，您在

脚本

面板中的下一个

项上有一个
中断。自Firebug 1.10以来，在Windows上有一个选项：Ctrl+Alt+B（即使焦点在页面中，而不是Firebug中，它也可以工作）

您可能需要将
Script
面板集中在Firebug中，因为这是
Break on…
的共享快捷方式，在每个面板中都有所不同

它通常会冻结DOM，尽管它不是100%可靠的

它也不理想，因为它会在任何JavaScript执行时停止，如果在后台有一些激进的轮询，或者全局捕获键盘事件，它也不会有帮助。不管怎样，总比什么都没有好

首先打开停靠的DevTools（由于操作系统的限制，取消停靠的方法将不起作用。）
显示“自动完成”框后，右键单击它并在关联菜单中选择“检查元素”。焦点将移到DevTools，但自动完成框仍将显示（这在Linux上对我有用，tip of tree Chromium，M25。您的里程可能会有所不同。）
Chrome在
F8上暂停Javascript执行；这需要一点重复，但在正确的时间按F8键可以防止JS对元素进行散焦。
如果我没有编写脚本并且不知道将断点放在哪里，设置断点是很困难的。是否有一种方法可以在不使用断点的情况下暂停整个脚本执行？如果您没有使用它们，请阅读Chrome的
XHR断点
和
事件侦听器断点
，您可能能够利用其中一个/两个…这取决于具体情况。如问题中所述，如果我必须多次设置断点，或者我不知道正在调试的代码的结构，那么设置断点是非常重要的。有没有更直接的方法来冻结DOM？@missingno例如，您可以将一个虚拟事件处理程序附加到hover上的所有元素，然后在其中设置一个断点。每次都要继续执行会很烦人，但断点可以是有条件的。它冻结DOM，但也禁用右键单击，因此不能使用“检查元素”。不过，如果您知道要查找什么，仍然可以在“元素”视图中进行探索。至少这样，当您在元素中将鼠标悬停在它上方时，可以看到它高亮显示，当你把鼠标移离那些东西时，它们就消失了。我也遇到了同样的问题，所以我创建了这个程序，在处理从DOM中消失的结果列表时，效果出奇地好，而你无法控制1。查找已编译的JS和2。添加额外的内联JS
/**
 * Utility to freeze actual DOM state, for example dropdown menu
 */
function easyBreak() {
    function doBreak() {
        // put breakpoint here to freeze actual dom and write to console easyBreak()
        // you have 3 seconds to get to desired state
        var a = 0;
    }

    window.setTimeout(doBreak, 3000);
}