使用 Firebug 调试器解决脚本冲突

Question

我的页面工作正常，突然间，英雄图像没有加载，我在 wine-cheese.js 上的控制台“ReferenceError: imagesLoaded is not defined”中看到错误消息，该错误之前是另一个错误“错误：dojo.js 上的multipleDefine”。自 6 周前内容发布以来，我没有更改文件。

一些外部开发人员一直在网站上做一些工作，我相信他们已经引入了冲突。但我很困惑如何弄清楚。我尝试在 Firebug 中设置断点，但这对我没有帮助，因为我不确定自己在做什么。我找到的所有关于如何使用调试器的教程都集中在页面中的一个脚本上，而不是调试作为 CMS 一部分并与您无法控制的许多其他脚本合并的页面。

当我在本地检查内容时，一切正常（我使用绝对链接来引用所有脚本和文件以确保它们实际上在服务器上），所以我认为与 dojo 存在冲突，甚至可能是什么否则。

我整天都在想办法解决这个问题，感觉自己在绕圈子。

任何帮助或建议将不胜感激。有问题的页面是here。

这是导致错误的 javascript 文件中的代码。我工作的网站有 jQuery 1.3.2，所以我们必须使用 noConflict 来并行运行一个更新的库（因此是 jwc）

    $.fn.tabs = function() {
        return this.each(function() {
            var $el = $(this);
            var $panels = $el.find('> div');
            var $tabs = $el.find('> ul a');
            $tabs.click(function() {
                setTimeout(function() {
                    if (window.location.hash) {
                        window.scrollTo(0, 489);
                    }
                }, 1);

                $tabs.removeClass('active');
                $(this).addClass('active');
                $panels.fadeOut(250);
                $panels.filter(this.hash).animate({
                    opacity:1},
                250, 'linear', function(){
                    $(this).show();
                });

                animateHeader(this.hash);
                //window.location.hash = this.hash;
                //return false;
            });
            if(window.location.hash != 'undefined' && window.location.hash != '') {
                //alert(window.location.hash);
                tabId = '[href*="' + window.location.hash + '"]';
                $tabs.filter(tabId).click();
            } else {
                $tabs.filter('[href*="#party-tips"]').click();
            }
        });
    };

    jQuery.easing.def = "easeInCubic";

    function animateHeader(tab) {
        if (tab == "#party-tips") {
            $('#party-tips #iconcircle').animate({
                left:0
            },750, 'easeInCubic');
            $('#party-tips #mask').animate({
                left:980,
                width:0,
            }, 1200, 'easeInCubic');
        } else if(tab == "#pairing-guide") {
            $('#pairing-guide #iconcircle').animate({
                left:0
            },750, 'easeInCubic');
            $('#pairing-guide #mask').animate({
                left:980,
                width:0,
            }, 1200, 'easeInCubic');
        } else if(tab == "#quick-tips") {
            $('#quick-tips #iconcircle').animate({
                left:0
            },750, 'easeInCubic');
            $('#quick-tips #mask').animate({
                left:980,
                width:0,
            }, 1200, 'easeInCubic');
        }
    }

    function laodAnimation() {
        imagesLoaded('img#sipbg', function(){
            $('#loadblock').hide();
            $('img#sipbg').animate({
                opacity:1
            }, 250, 'linear');
            $('#top-block').delay(250).animate({
                top:0
            }, 350, 'swing', function(){
                $('h1#wc-logo').animate({
                    top:30,
                    left:84
                }, 750, 'linear', function(){
                    $('span#wine-glass').animate({
                        top:105,
                        left:136
                    }, 500, 'swing', function(){
                        $('span#text-sip').fadeIn(250, function(){
                            $('span#text-savor').delay(500).fadeIn(250, function(){
                                $('span#text-repeat').delay(500).fadeIn(350, function() {
                                    $(this).delay(500).fadeOut(350, function(){ 
                                        $(this).delay(500).fadeIn(350, function() {
                                            $(this).delay(500).fadeOut(350, function(){ 
                                                $(this).delay(500).fadeIn(350, function() {
                                                    $('span##text-endless').delay(500).fadeIn(350);
                                                    $('#bottom-block').animate({
                                                        bottom:0
                                                    }, 350, 'swing', function() {
                                                        $('#bottom-block h1').delay(350).fadeIn(750);
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });

            $('#main-grid').delay(400).animate({
                opacity:1
            }, 1200, 'linear');
        });
    }

我插入 CMS 的第一部分内容如下所示； imagesLoaded 在第二个脚本中定义：

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="http://www.lecreuset.com/wcsstore/CVWEB/js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://www.lecreuset.com/wcsstore/CVWEB/js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://www.lecreuset.com/wcsstore/CVWEB/js/retina.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://www.lecreuset.com/wcsstore/CVWEB/js/wine-cheese.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53d6affc389982ed"></script>
        <script type="text/javascript">
            var jwc = jQuery.noConflict(true);
            jwc(document).ready(function() {
                jwc("a#box").fancybox({
                        maxWidth    : 800,
                        maxHeight   : 680,
                        fitToView   : true,
                        width       : '70%',
                        height      : '90%',
                        autoSize    : true,
                        closeClick  : false,
                        openEffect  : 'none',
                        closeEffect : 'none'
                    });
                laodAnimation();    
            }); 
        </script>

Answer 1

我建议在他们的 Web 控制台中使用 chrome/chromium 或 safari。然后，您可以打开 Web 检查器并将检查器设置为捕获所有错误。

那里的工具应该可以帮助您找出问题所在。

更新：

查看您提供的链接，我发现问题出在 imageloader.js 调用上。它似乎多次定义同一个对象。您可以尝试将其包装在 js 检查中。

更新 2：

好的，所以我在 jsfiddle 中测试了您的脚本。我发现问题是基于 dojo 和 imagesloaded 脚本之间的冲突。我设置了一个 jsfiddle 来测试脚本，看看是否定义了类 imagesLoader。在左侧工具栏中，如果您在 jQuery 和 Dojo 框架之间更改左侧的设置，则 imagesLoaded js 脚本将停止工作。问题是，由于它已打包，因此不会发出错误信号。要么从头开始编写新脚本，要么找到替代方案。

if(!alreadyDefined) {
   alreadyDefined=true;
   //Rest of your code.
}