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

Question

当我使用 chrome 开发人员工具设置断点时，它不会准确地设置在我想要设置的行中。它将其更改为另一行。为什么会这样？如果我想在我想要的行中设置断点，我该怎么办？

这是视频：https://drive.google.com/file/d/0B7NuLgKMVzkgUHhaclM0YW1BSEU/view?usp=sharing

Answer 1

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

例子

以下代码是您视频中 Angular 代码的模型：

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

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

注入 debugger/trace 语句

您可以通过将 debugger 语句添加到 state 函数中来解决此限制，这样它会在每次链式函数调用时中断。你可以 运行 类似的东西进入 Console/Snippet:

var oldState = $stateProvider.state;

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

这将保存对旧函数定义的引用，然后用 debugger 语句覆盖当前定义。如果你不关心真正的功能，你可以在那里结束它。但是，要继续正常执行，我们可以使用 apply 调用 origin 函数，它指定了要传入的上下文和参数。您可以阅读详细解释 here.

现在这将在每次 state 执行时中断。如果您只是想针对特定情况中断怎么办？那么你可以在 debugger 语句中添加一个 Conditional Breakpoint，如下所示：

现在代码只会在 key 为 'key2' 时中断。

调试器语句可能会干扰您的执行流程，因此您可以将其替换为 console.log 语句或其他任何语句。在这种情况下可以省略条件逻辑。