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

Question

有没有在chrome控制台中的文件上设置类似"断点"的选项（在文件中的每一行代码上设置断点的快捷方式）？

当你试图理解第三方脚本时，这将非常有用，你知道这些脚本是执行的，但不知道代码的哪一部分以及在哪里执行。

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

Answer 1

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

在这里查看项目。

Answer 2

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

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

具有适当的约束力（如适用）。

Answer 3

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

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

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

这可能会变得有点乏味。

如果你有一系列的功能，你可以做

[function0, function1].map(debug)

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

Answer 4

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

function [^{]*{

带有

$0 debugger;

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

function [^{]*{

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

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

Answer 5

否。您必须在文件所包含的各种函数入口点中添加断点，才能捕获它可能进入的所有位置。

Answer 6

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