如何在开发人员控制台中暂停脚本执行

Posted 2023-03-06

【中文标题】如何在开发人员控制台中暂停脚本执行

【英文标题】：How to pause script execution in Developers console

【发布时间】：2012-01-13 20:34:39

【问题描述】：

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

【问题讨论】：

F8.

你要找的答案在这里***.com/questions/17931571/…

【参考方案1】：

您可以自己编写暂停代码。 使用调试器暂停 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

【讨论】：

F12 是一个不好用的键码，它是原生开发工具

就好像他/她离得太近，然后在他们胜利前的舞蹈中摔倒并撞倒了自己

特别感谢@dwjohnston。我更新了键码以使用 F10。

【参考方案2】：

您正在寻找“断点”。

你用的是什么浏览器？

Chrome 立即在其开发人员工具中支持断点：F12（或 Ctrl-Shift-I），“脚本”选项卡，从下拉列表中选择脚本，单击行号。 更新： 在 PC 上：F12 或 Ctrl+Shift+I / 在 Mac 上：Cmd +Alt+I 选择“Sources”选项卡，从左侧的文件窗格中选择脚本，单击行号。

在 Firefox 中使用 Firebug 扩展： 在 PC 和 Mac 上：F12、 “脚本”选项卡，根据需要激活并重新加载，从下拉列表中选择脚本，单击行号。

当您的 Javascript 在断点处暂停时，两种浏览器都会为您提供常用的调试工具，以单步执行代码、检查和更改变量值、监视表达式……

【讨论】：

我的 javascript 会自动缩小。有没有像 console.pause(); 这样的函数我可以输入javascript代码，它会停止执行吗？

@TravisHeeter：大多数浏览器都支持在 JS 代码中使用 debugger; 关键字来触发它们的调试器。这相当于在代码中设置断点。

什么Mac相当于打开脚本标签？

@Jpsy 谢谢 :-) 我也在其他地方找到了来源说明。 F12 映射到我 Mac 上的音量按钮，所以我对此感到有点困惑。我确信有一种方法可以重新映射它（或一些神秘的组合键来访问它）。

@KatharineOsborne：您必须按住 Fn 键才能访问上方键行的 F1 到 F12 功能。键盘设置中还有一个复选框，可让您反转该行为。如果激活 F1 到 F12 功能将是默认功能，您需要按 Fn 键来访问音量、亮度等。

【参考方案3】：

正如katspaugh 在their comment 中提到的那样：

F8

这仅适用于 Chrome 59.0.3071.115（在 Mac OS X 上）开发者工具窗口的 Sources 选项卡。