How to I find JavaScript source in web page?

问题:

I would like to examine the source code for a JavaScript function in a web page

In Firefox Inspector, I've clicked on

I see:

<a href="/thread/7629335?start=75&amp;tstart=0" title="last" onclick="jspaginate.init('last', '6'); return false;" class="js-pagination-next j-paginate-last">last</a>

I would like to find the source to jspaginate.init. I've clicked on the Debugger tab, but I do not see jspaginate.init. The source should be on the page somewhere, shouldn't it?

I'm running Firefox 48.0 in Mac OS 10.10.5. I'm in the Inspector.

回答1:

In firefox open the desired page, press F12 to open the developer tools. In the "debugger" tab press ctrl + shift + F (Search in files) and search for "jspaginate". It will present you all the files containing that word.

Firefox Developer Tools - Search

Firefox Developer Tools: search for files with the debugger (Video)

---

Or with FireBug that is no longer supported in Firefox >57*

Install firebug, activate it, activate the script panel too and then look for the jspaginate object. In a js file you will find it:

var jspaginate = {
    data:{},
    loading: false,
    init: function(action, last){
        var view = this,
            target, current;
        if(this.loading !== true){
            view.loadingSequence();
            if(action === 'first'){
                target = 0;
                view.update(target, 0);
            }else if(action === 'prev'){
                current = parseInt(view.data.pageIndex)-1;
                target = (current)*view.data.range;
                view.update(target, current);
            }else if(action === 'next'){
                current = parseInt(view.data.pageIndex)+1;
                target = (current)*view.data.range;
                view.update(target, current);
            }else if(action === 'last'){
                current = parseInt(last)-1;
                target = (current)*view.data.range;
                view.update(target, current);
            }
        }
    },
    update: function(target, current){
        this.data.pageIndex = current;
        this.pushState(target, current);
        this.getData(target);
    },
    pushState: function(target, current){
        var state = { 'page_id': current, 'user_id': 2 },
            title = 'Page'+ current,
            url = '?start='+target+'&tstart=0';
        history.pushState(state, title, url);
    },
    loadingSequence: function(){
        this.loading = true;
        $j('.j-pagination').append('<div class="j-loading-big"><span></span></div>');
        $j('.all-replies-container').css('opacity','.5');
    },
    removeLoading: function(){
        $j('.j-loading-big').remove();
        $j('.all-replies-container').css('opacity','1');
        this.loading = false;
    },
    updateUI: function(data){
        $j('.all-replies-container').html(data);
        $j('html, body').animate({
            scrollTop: ($j(".all-replies-container").offset().top -180)
        }, 800);

        this.removeLoading();
    },
    getData: function(target){
        var view = this,
            tId = (this.data.threadId).split('/')[2],
            urlString = jive.app.url({path:'/inline-thread.jspa?thread='+tId+'&start='+target+'&tstart=0'});
        $j.ajax({
            url: urlString,
            cache: true,
            async: true,
            type:'POST',
            dataType : 'html'
        }).success(function(data) {
            view.updateUI(data);
        }).error(function(data) {
            console.log(data);
        });
    }
}
;

回答2:

If you click on the console tab, you will see a bunch os js files are loaded. You probably can find that function in one of them.

Most of them seem to be minified, if not all, so finding this function might be difficult.

It could also be in a <script> tag, but still, might not be easy to find.

回答3:

Here are the steps to find the JavaScript method.

1. Click on the Debugger tab.
2. Press Ctrl+Shift+F to find in files.
3. Enter the name of the method and press Enter.
4. The window will say "No results found".
5. Each time Firefox stops using the CPU and press Enter again.

Firefox 57.0.4 seems to be buggy. It shows no sign that it is doing anything. Eventually, the results will appear. However, each press of Enter will cause that many sets of results to be displayed.