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

Question

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

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

是否有没有运行自定义脚本的本机 Chrome 方式快捷方式？

Answer 1

不，devtools window 必须聚焦才能使键盘快捷键起作用。当你拖动一个元素时，焦点是被拖动的元素，而不是 devtools window。最好的办法是使用自定义脚本。

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

setTimeout(function(){debugger;}, 2000);

然后跳出那个函数。

Answer 2

Is there a native Chrome-way shortcut without running a custom script?

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

如果您想在 DevTools 打开时调用 debugger 但不是焦点，您可以为 F8 有几种方式。当您拖动元素并想暂停脚本执行时，这些将起作用。

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);

Answer 3

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

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

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

NOTE: Don’t forget to uncheck the Event Listener Breakpoint when you are done

Answer 4

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

enter image description here

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

Chrome F8/hotkey debugger breaking during a drag and drop operation

debugging

drag-and-drop

google-chrome

google-chrome-devtools

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