Chrome 控制台 - 整个文件的断点

Posted 2023-04-15

【中文标题】Chrome 控制台 - 整个文件的断点

【英文标题】：Chrome console - breakpoint over whole file

【发布时间】：2016-09-01 18:55:59

【问题描述】：

是否有任何选项可以在 chrome 控制台中的文件上设置类似“断点”的内容（在文件中的每一行代码上设置断点的快捷方式）？

在尝试了解您知道已执行但不知道代码的哪一部分以及何时执行的第 3 方脚本时，这将非常有用。

我当前的示例用例：我下载了一个无法按预期工作的脚本（表单验证）。解决问题的最快方法是在 JS 运行时进入此文件时暂停执行并从那里开始探索。

【参考方案1】：

我认为这对你有用。我最近一直在对 Matt Zeunert 创建的javascript Breakpoint Collection Chrome Extension 做一些工作，它允许您在运行时将断点注入到您的代码中 - 包括中断属性访问/修改、函数、滚动事件等。您可以中断任何任意对象以及使用控制台 API 的预定义对象。

查看项目here。

【参考方案2】：

如果您可以枚举第三方脚本公开公开的函数（例如，如果它们都是对象的所有属性，或者它们的名称是否具有模式），则可以创建另一个脚本来动态替换所有这些函数并强制断点：

thirdpartfunc = (function () 
  var oldfunc = thirdpartfunc; 
  return function () 
    debugger;
  oldfunc.call(null, arguments);
());

通过适当的绑定到 this（如果有的话）。

【参考方案3】：

如果你知道被调用的函数，你可以使用function breakpoints

debug(function);
function(...args);

当你调用函数时，它会命中断点。这些不会在页面重新加载时保存，但您可以在遇到函数断点后设置行断点。

不过这会有点乏味。

如果你有一个函数数组，你可以这样做

[function0, function1].map(debug)

@Tibos 如果在每个函数的开头插入debugger;，而不是手动插入，那么在另一篇文章中的回答会很好。

【参考方案4】：

对我来说最快的方法是全局替换源代码中的函数声明，添加“debugger;”在开始时。 也就是说，替换

function [^]*

与

$0 debugger;

您的正则表达式可能会因您需要的转义而有所不同。例如：

function [^]*\

您可能还需要多个模式来处理您拥有的所有函数声明。

不过，这与 Chrome 控制台无关。

【参考方案5】：

没有。您必须向文件包含的各种函数入口点添加断点，以捕获它可以进入的任何地方。

【参考方案6】：

你不能在感兴趣的文件中每个函数的第一行放置一个断点吗？

【讨论】：

我当然可以，但它仍然太烦人和不优雅的解决方案