如何在网页中找到JavaScript源代码？

Question

我想检查一个网页中的JavaScript函数源代码。 在Firefox检查器中，我点击了。 我看到：

<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>

我想找到 jspaginate.init 的源代码。 我已经点击了调试器选项卡，但是我没有看到 jspaginate.init。 源代码应该在页面上的某个地方，不是吗？

我在 Mac OS 10.10.5 中运行 Firefox 48.0。 我正在使用检查器。

- historystamp

Answer 1

在Firefox中打开所需页面，按F12打开开发者工具。 在“调试器”选项卡中按下Ctrl + Shift + F（在文件中搜索）并搜索“jspaginate”。它将向您展示包含该单词的所有文件。 Firefox开发者工具-搜索 Firefox开发者工具：使用调试器搜索文件（视频）

---

或者使用FireBug，在Firefox >57中不再受支持*

安装firebug，激活它，也激活脚本面板，然后查找jspaginate对象。您将在一个js文件中找到它：

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);
        });
    }
}
;

- aldebaran-ms

Answer 2

如果你点击控制台标签，你会看到一堆JS文件被加载。你可能可以在其中一个文件中找到那个函数。

它们中的大多数似乎都被压缩了，如果不是全部的话，所以可能很难找到这个函数。

它也可能在一个<script>标记中，但是仍然可能不容易找到。

- Guilherme Vasconcelos

Answer 3

以下是查找JavaScript方法的步骤。

1. 点击 Debugger 选项卡。
2. 按下 Ctrl+Shift+F 查找文件。
3. 输入方法名称并按下 Enter。
4. 窗口将显示 "未找到结果"。
5. 每次Firefox停止使用CPU并再次按下 Enter。

Firefox 57.0.4似乎存在缺陷。它没有显示任何正在进行的迹象。最终，结果将出现。但是，每次按下 Enter 都会导致显示相应数量的结果集。

- Nathan