JQuery 小部件和 Chrome 检查器

Question

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

• 我在控制台中输入 recompute
• Chrome 显示函数存根
• 我单击它，它会将我直接发送到包含该函数的正确 VM 中的源选项卡
• 我添加了断点，瞧 :)

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

$.widget( "app.Recomputer", {


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

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

Answer 1

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

然后按 ctrl + shift + F

在搜索文本框中输入函数名并搜索，然后可以在结果中看到函数名并点击。

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

注意：- 在 MVC 局部视图中使用脚本时，有时您无法在搜索结果中获得任何信息，例如这样。所以请将脚本文件放在您的头标签部分或捆绑中。这意味着脚本文件必须在网页的初始加载时加载，这也是一个很好的做法。