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

Question

在Chrome的网络开发者工具中,可以通过按下来随时中断F8.

通常,我想通过按下F8来在拖放操作期间断开并检查元素.但这不起作用.

在没有运行自定义脚本的情况下是否有原生的Chrome方式快捷方式？

Answer 1

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

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

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

然后走出那个功能.

Answer 2

在没有运行自定义脚本的情况下是否有原生的Chrome方式快捷方式？

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

如果你想debugger在DevTools打开但没有聚焦时调用,可以通过几种方式为该键附加一个事件监听器F8.当您拖动元素并希望暂停脚本执行时,这些将起作用.

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

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

\n

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

\n

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

\n

\n

注意：完成后，不要\xe2\x80\x99 忘记取消选中事件侦听器断点

\n

\n