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

Question

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

我经常想在按下F8的拖放操作中断开并检查元素。但是，这不会起作用。

是否存在原生的Chrome方式快捷方式而不运行自定义脚本？

Answer 1

不，必须关注devtools窗口才能使键盘快捷键正常工作。在拖动元素时，拖动的元素是焦点，而不是devtools窗口。您可以做的最好的事情是使用自定义脚本。

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

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

然后退出该功能。

Answer 2

  

是否存在原生的Chrome方式快捷方式而不运行自定义脚本？

没有。没有任何额外的步骤，DevTools必须成为焦点， F8 才能暂停执行。

如果您想在DevTools处于打开状态时调用debugger但不处于焦点，则可以为 F8附加event listener 有几个关键。当您拖动元素并希望暂停脚本执行时，这些将起作用。

1）打开控制台并在调试之前在目标站点上手动运行此脚本：

window.addEventListener('keydown', function(e){ if(e.keyCode === 24) {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) {
    // Key code 24 is 'F8'
    if(e.keyCode === 24) {
        debugger;
    }
}
window.addEventListener('keydown', KeyCheck, false);

Answer 3

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

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

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

<块引用>

注意：不要忘记取消选中 Event Listener Breakpoint 完成