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

Question

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

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

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

Answer 1

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

Answer 2

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

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

对此进行适当的绑定（如果适用）。

Answer 3

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

Answer 4

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

查看项目 here。

Answer 5

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

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

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

虽然这可能有点乏味。

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

[function0, function1].map(debug)

@Tibos 如果有某种 babel 转换在每个函数的开头插入 debugger; 而不是手动插入，post 中的答案会很好。

Answer 6

对我来说最快的方法是对源代码中的函数声明进行全局替换，在开头添加 "debugger;"。换句话说，替换

function [^{]*{

和

[=11=] debugger;

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

function [^{]*\{

您可能还需要不止一种模式来处理您拥有的所有函数声明。

虽然这与 Chrome 控制台无关。

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

Chrome console - breakpoint over whole file

javascript

google-chrome

developer-console