Chrome F8/热键调试器在拖放操作期间中断

Posted 2023-05-08

【中文标题】Chrome F8/热键调试器在拖放操作期间中断

【英文标题】：Chrome F8/hotkey debugger breaking during a drag and drop operation

【发布时间】：2015-08-16 00:08:40

【问题描述】：

在 Chrome 的网络开发工具中，您可以随时按下 F8 中断。

通常我想在拖放操作期间通过按 F8 来中断和检查元素。但是这行不通。

是否有无需运行自定义脚本的原生 Chrome 方式快捷方式？

【问题讨论】：

我已经报告了这个错误here。

【参考方案1】：

不，必须聚焦 devtools 窗口才能使键盘快捷键起作用。拖动元素时，焦点是拖动的元素，而不是 devtools 窗口。您能做的最好的事情就是使用自定义脚本。

尝试在控制台设置超时2s后触发调试器：

setTimeout(function()debugger;, 2000);

然后退出该功能。

【参考方案2】：

是否有无需运行自定义脚本的原生 Chrome 方式快捷方式？

没有。在没有任何额外步骤的情况下，DevTools 必须处于焦点位置，F8 才能暂停执行。

---

如果您想在 DevTools 打开但 处于焦点时调用 debugger，您可以为 F8 键附加一个 event listener方法。当您拖动元素并且想要暂停脚本执行时，这些将起作用。

1)在调试前打开控制台，在目标站点手动运行这个脚本：

window.addEventListener('keydown', function(e) if(e.key === 'F8') debugger; , false);

这将为 F8 键附加一个事件监听器，该键将触发debugger。

2) 为Tampermonkey 创建一个用户脚本，在您允许的网站上运行上述脚本。示例用户脚本：

// ==UserScript==
// @name         F8 to debug
// @version      0.1
// @description  Press F8 when the console is open to trigger 'debugger'
// @author       Drakes
// @grant        none
// @require      none
// ==/UserScript==

console.log("Press F8 when the console is open to trigger 'debugger'");
function KeyCheck(e) 
    if(e.key === 'F8') 
        debugger;
    

window.addEventListener('keydown', KeyCheck, false);

【讨论】：

谢谢。到目前为止，我使用过类似的东西，但可能会干扰调试，因为它直接影响要调试的上下文中的事件侦听器。因此，我将牢记您的第二点，其中上下文应该有所不同。

同意，但是，当您将“false”传递给事件侦听器时，它不会捕获事件。此外，通过使用addEventListener 添加事件侦听器，它会将侦听器添加到侦听器链中（不会覆盖任何侦听器），希望也不会在 F8 上触发逻辑:)

很好，这比超时解决方案要好得多，而且我认为这里的每个人都需要这样做：当您专注于 DOM 时使 F8 工作。不敢相信 5 年后这仍然是一个问题。

这对我帮助很大，比超时解决方案要好得多。谢谢！

【参考方案3】：

我确实有一个更好的解决方案，而无需更改任何代码。 以下技巧在 Chrome Webtools 上有效，对于其他我尚未检查的技巧。

在拖放甚至您选择的任何事件上进行调试的步骤

打开开发工具，跳转到源选项卡，然后查看事件侦听器断点 您会看到拖放事件！但在更进一步之前。停在那里。如果我们使用它，我们将在调用拖放事件的那一刻得到一个断点。我们真的不想要那个权利 我们希望在我选择的时刻暂停 UI 状态，可能是在拖动特定元素时。因此，不要拖放，而是选中键盘事件框。 现在，拖动任何你喜欢的东西，并在适当的时候按键盘上的任意键。 最后我们得到了一个暂停状态。你不能右击来检查元素，但是你可以使用元素选择器工具——点击 Dev Tools 面板左上角的按钮，或者 [Cmd/Ctrl] + [Shift] + [C] 并指向你想要的元素想检查。

注意：不要忘记取消选中事件侦听器断点，当你 完成了

【参考方案4】：

打开开发工具并单击 f8 -> 打开开发工具，跳转到源选项卡，然后检查事件侦听器断点 -> 单击键盘复选框，如下所示

enter image description here

【讨论】：

欢迎来到 Stack Overflow。这似乎是 existing answer from March 8, 2021 的副本。请edit您的答案提供与现有答案大不相同的信息。