JQuery 小部件和 Chrome 检查器

Question

Chrome inspector调试功能非常强大。我经常使用控制台来搜索特定功能。例如，当我有一个 recompute() javascript 函数时，我想在函数中添加一个断点：

• 我在控制台输入重新计算
• Chrome 显示函数存根
• 我点击它，它直接将我发送到包含函数的正确 VM 中的源选项卡
• 我添加了断点和 Voilà :)

我现在正在使用这样的 Jquery 小部件：

$.widget( "app.Recomputer", {


    recompute: function () {
        // Code where I want to break
    }
};

有没有办法让 Chrome Inspector 打开此代码所在的“源代码”选项卡？

Answer 1

请打开您的 HTML 页面或站点并转到调试器 window（按 ctrl + shift + I OR F12 )

然后按ctrl + shift + F

在搜索文本框中输入函数名进行搜索，即可在搜索结果中看到函数名，点击即可。

可以在函数上加个断点继续调试

注意：- 有时在 MVC 局部视图中使用脚本时，您无法在搜索结果中获得任何内容，就像这样。因此，请将脚本文件放在您的 head 标记部分或捆绑中。这意味着脚本文件必须在网页的初始加载时加载，这也是一个很好的做法。