Chrome控制台 - 在整个文件上设置断点

Question

有没有在Chrome控制台中为文件设置“断点”之类的选项（一种快捷方式，在文件的每一行代码上设置断点）？

当尝试理解第三方脚本时非常有用，您知道它们被执行，但不知道从哪个部分和从哪里执行。

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

- amik

Answer 1

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

在这里查看该项目。

- Gideon Pyzer

Answer 2

如果您可以公开列举第三方脚本公开的函数（例如，它们全部是对象属性或具有一定的命名规则），那么您可以编写另一个脚本，动态替换所有这些函数并强制中断：

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

通过适当的绑定（如果有适用的话），实现此功能。

- Regis Portalez

Answer 3

如果您知道正在调用的函数，可以使用function breakpoints。

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

当您调用该函数时，它将触发断点。这些断点不会在页面重新加载时保存，但是您可以在触发函数断点后设置行断点。

然而，这可能会变得有点繁琐。

如果您有一个函数数组，可以执行以下操作：

[function0, function1].map(debug)

@Tibos在另一个帖子中的答案很好，如果有一种类似于Babel转换的方法可以自动在每个函数的开头插入debugger;，而不是手动插入它，则会更好。

- dosentmatter

Answer 4

最快的方法是在源代码中全局替换函数声明，在开头添加"debugger;"。 换句话说，将以下内容替换为：

function [^{]*{

带有。

$0 debugger;

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

function [^{]*\{

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

这与Chrome控制台无关。

- xtian

Answer 5

不行。您需要在该文件包含的各种函数入口点添加断点，以便捕获它可能进入的所有位置。

- Collin Grady

Answer 6

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

- Jeff Lowery

---

当然可以，但这仍然是一种很麻烦且不够优雅的解决方案。 - amik