无法在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函数中添加state语句来解决此限制，以便每个链接函数调用都会中断。您可以在控制台/代码段中运行类似的内容：

var oldState = $stateProvider.state;

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

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

现在每个debugger执行都会中断。如果你只想打破特定情况怎么办？好吧，您可以在key语句中添加Conditional Breakpoint，如下所示：

现在代码只会在console.log为＆＃39; key2＆＃39;时才会中断。

调试器语句可能会侵入您的执行流程，因此您可以使用r=[0.74616534, 4.1743176523] 语句或其他任何内容替换它。在这种情况下可以省略条件逻辑。