4

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

有没有办法使用调试器，以便我给它的鼠标点击和其他命令不会被我试图调试的脚本截获？

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

4

8 回答 8

5

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

于 2012-11-08T20:17:38.827 回答
2

您需要使用断点。至于追踪发生的事情，Chrome 的“调用堆栈”窗口非常有用。

干杯

于 2012-11-08T20:16:48.667 回答
2

在 Firebug 中，您在面板中有一个Break on next项目。Script从 Firebug 1.10 开始，有一个键盘快捷键： Windows 上的Ctrl++ （即使焦点在页面中，它也可以工作，而不是在 Firebug 中）Alt。B

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

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

它也不理想，因为它会在任何 JavaScript 执行时停止，并且如果在后台有一些激进的轮询或键盘事件的全局捕获，它将无济于事。不管怎样，总比没有好。

于 2012-11-15T21:08:35.377 回答
2

Chrome 暂停 Javascript 的执行F8；它需要一些重复，但F8在正确的时间按下阻止了 JS 散焦元素。

于 2018-03-08T01:03:44.757 回答
0
  1. 首先打开停靠的 DevTools（由于操作系统限制，未停靠的方法将不起作用。）
  2. 显示自动完成框后，右键单击它并在上下文菜单中选择“检查元素”。焦点将移至 DevTools，但仍会显示自动完成框（这对我在 Linux、树尖 Chromium、M25 上有效。您的里程可能会有所不同。）
于 2012-11-16T09:37:49.920 回答
0

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

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

于 2012-11-09T06:42:52.047 回答
0 
/**
 * 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);
}
于 2016-11-08T09:11:51.873 回答
0

您可以使用DOM 断点。

我在这里遇到了类似的情况：我想检查仅在输入具有焦点时才显示的下拉项。

在 Chrome 上，我右键单击父元素并选择Break on> Subtree modifications。
它会暂停——就像它对 JS 断点所做的那样——只要 DOM 在该父级中发生更改。然后，您可以在 DOM 冻结时检查子项。

于 2021-11-05T16:21:21.913 回答