24

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

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

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

4

6 回答 6

6

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

在这里查看项目。

于 2016-05-06T18:01:58.433 回答
2

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

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

对 this 进行适当的绑定（如果有的话）。

于 2016-05-06T16:42:40.520 回答
1

对我来说最快的方法是对源代码中的函数声明进行全局替换，添加“调试器；” 在开始时。换句话说，替换

function [^{]*{

和

$0 debugger;

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

function [^{]*\{

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

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

于 2018-09-03T14:03:47.280 回答
1

如果您知道被调用的函数，则可以使用函数断点

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

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

不过，这可能会有点乏味。

如果你有一系列函数，你可以做

[function0, function1].map(debug)

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

于 2017-12-04T20:30:49.867 回答
0

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

于 2016-05-06T16:18:43.183 回答
-1

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

于 2016-05-06T16:52:40.960 回答