Question

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

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

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

Answer 1

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

查看项目here。

Answer 2

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

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

适当绑定到此（如果适用）。

Answer 3

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

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

当您调用该函数时，它将触发断点。这些都不会在页面重新加载时保存，但是一旦你点击了函数断点就可以设置一个断点。

但这可能会有点单调乏味。

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

[function0, function1].map(debug)

如果有某种babel变换在每个函数的开头插入debugger;而不是手动插入，那么

@Tibos在另一篇文章中的回答会很好。

Answer 4

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

function [^{]*{

与

$0 debugger;

您的正则表达式可能会有所不同，具体取决于所需的转义符。例如：

function [^{]*\{

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

这与Chrome控制台无关。

Answer 5

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

Answer 6

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

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

6 个答案: