How to debug chrome extension at such part of code?

Question

The code below is the JavaScript file works with popup.html from a small project.
I use it for chrome extension development learning.
The first part of this code piece is getting two variable from chrome storage, let's call it part1.
The second part is a button-click event function,Let's call it part2.
The button is on popup page and called "spend".
In part2, I can set a breakpoint2 on chrome debugger DevTools,when I click the button on popup page, it will stop at breakpoint2.
But when I place a Breakpoint1 at part1,the code will not stop at that line, even I add one more line "debugger;", the program will not stop there.
So my problem is how to make the debugger stop at places like breakpoint1?
The source code for the extension:https://drive.google.com/file/d/1odxJy9pGnovzox2yXH-6MDO03_T7QIDE/view?usp=sharing

//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('');
    });
});
});

Any assistance is highly appreciated,Thanks in advance.