如何在Developers控制台中暂停脚本执行

Question

我正在尝试创建一个旋转横幅(JavaScript和CSS).为了在开发人员控制台中对CSS等进行调试和更改,我想在进行更改时暂停JavaScript执行,然后运行它等等.那么,有没有办法在浏览器中暂停脚本执行？

Answer 1

您正在寻找"断点".

您使用的是哪种浏览器？

Chrome在其开发人员工具中立即支持断点:
F12(或Ctrl-Shift-I),"脚本"选项卡,从下拉列表中选择脚本,单击行号.
更新:
在PC上:F12或Ctrl-Shift-I /在Mac上:Cmd-Alt-I
选择"Sources"选项卡,从左侧的文件窗格中选择脚本,单击行号.

在Firefox中使用Firebug扩展:
在PC和Mac上:F12,
"脚本"选项卡,根据需要激活并重新加载,从下拉列表中选择脚本,单击行号.

当您的Javascript在断点处暂停时,两个浏览器都会为您提供常用的调试工具来单步执行代码,检查和更改变量值,观察表达式,...

Answer 2

正如katspaugh在评论中提到的那样:

F8

这仅适用于Chrome 59.0.3071.115(在Mac OS X上)的" 开发人员工具"窗口的" 来源"选项卡中.

Answer 3

您可以自己编写暂停代码。使用调试器暂停 javascript 执行。在 Chrome 控制台中，运行：

window.addEventListener('keydown', function(event) { 
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }
  let handled = false;
  if (event.keyCode == 121) {
    handled = true;
    debugger;  // 121 is the keyCode of F10
  }
  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
});

使用检查器突出显示元素

按F10