Google chrome extension 如何在代码的这一部分调试chrome扩展？

下面的代码是一个小项目中使用popup.html的JavaScript文件。
我将其用于chrome扩展开发学习。
这段代码的第一部分是从chrome存储器中获取两个变量，我们称之为第1部分。
第二部分是按钮点击事件函数，我们称之为第二部分。
该按钮位于弹出页面上，称为“花费”。
在第2部分中，我可以在chrome debugger DevTools上设置断点2，当我单击弹出页面上的按钮时，它将在断点2处停止。
但是，当我在第1部分放置断点1时，代码不会在该行停止，即使我再添加一行“debugger；”，程序也不会在该行停止。
因此，我的问题是如何使调试器在断点1之类的位置停止？
扩展的源代码：

---

非常感谢您提供的任何帮助。

当弹出窗口加载时会触发第一个断点，因此您需要在devtools中按Ctrl-R或F5键来强制重新加载。@wOxxOm非常感谢您兄弟

//popup.js


$(function(){
    chrome.storage.sync.get(['total','limit'],function(budget){
        //Breakpoint1
        $('#total').text(budget.total);
        $('#limit').text(budget.limit);
    });


    $('#spendAmount').click(function(){
      //Breakpoint2
      chrome.storage.sync.get(['total', 'limit'],function(budget){
        var newTotal = 0;
        if (budget.total){
            newTotal += parseInt(budget.total);
        }
        var amount = $('#amount').val();
        if (amount){
            newTotal += parseInt(amount);
        }
        chrome.storage.sync.set({'total': newTotal}, function(){               
            bla();
            bla();
        }
        });
        $('#total').text(newTotal);
        $('#amount').val('');
    });
});
});