Google chrome devtools 无法在chrome开发者工具中设置断点

当我使用chrome开发者工具设置断点时，它不会完全按照我想要设置的行设置断点。它把它换成另一行。为什么会发生这种情况？如果我想在我想要的行中设置一个断点，我应该怎么做

---

以下是视频：

调试器允许您在语句上添加断点。这是通过单击语句开始处的行号来实现的。不能在中的表达式上添加断点

例子 以下代码是视频中角度代码的模型：

$stateProvider.state("key1", {
    url: "url1",
    controller: "controller1",
    templateUrl: "templateUrl1"
}).state("key2", {
    url: "url2",
    controller: "controller2",
    templateUrl: "templateUrl2"
});

只有一个语句，从第1行开始，到第9行结束。您可以调用两个链接在一起的函数，但它们是一条语句

注入调试器/跟踪语句 您可以通过将

调试器

语句添加到

状态

函数中来绕过此限制，以便每次链式函数调用都会中断该语句。您可以在控制台/代码段中运行类似的操作：

var oldState = $stateProvider.state;

$stateProvider.state = function() {
    debugger;
    return oldState.apply(this, arguments);
}

这将保存对旧函数定义的引用，然后使用

调试器

语句覆盖当前函数定义。如果你不在乎真正的功能，你可以到此为止。但是，为了继续正常执行，我们可以使用

apply

调用origin函数，它指定要传入的上下文和参数。你可以阅读详细的解释

现在，这将打破每一个

state

执行。如果你只是为了一个特殊的案子而分手呢？您可以在

调试器

语句中添加一个，如下所示：

现在，只有当

键

为“key2”时，代码才会中断

调试器语句可能会干扰您的执行流，因此您可以将其替换为

console.log

语句或其他任何语句。在这种情况下，可以省略条件逻辑