JQuery 小部件和 Chrome 檢查器

Question

Chrome 檢查器在調試方面非常強大。 我經常使用控制台搜索特定的 function。 例如，當我有一個 recompute() javascript function 時，我想在 function 中添加一個斷點：

• 我在控制台中輸入重新計算
• Chrome 顯示 function 存根
• 我單擊它，它直接將我發送到包含 function 的正確 VM 中的源選項卡
• 我添加斷點和 Voilà:)

我現在正在使用這樣的 Jquery 小部件：

$.widget( "app.Recomputer", {


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

有沒有辦法讓 Chrome Inspector 打開此代碼所在的 Source 選項卡？

Answer 1

請打開您的 HTML 頁面或站點和 go 到調試器 window （按ctrl + shift + I OR F12 ）

然后按ctrl + shift + F

在搜索文本框中輸入 function 名稱並搜索，然后您可以在結果中看到 function 名稱並單擊它。

可以在function上加斷點繼續調試

注意：-在 MVC 局部視圖中使用腳本時，有時您無法在搜索結果中獲得任何信息，就像這樣。 所以請將腳本文件放在您的頭標簽部分或捆綁中。 這意味着腳本文件必須在網頁的初始加載中加載，這也是一個很好的做法。