你将如何调试这个 javascript 问题？

Question

过去几周我一直在旅行和发展。 我正在开发的网站运行良好。

然后，前几天，我连接到网络并且页面“看起来”很好，但事实证明 javascript 没有运行。我检查了萤火虫，没有错误，因为我怀疑可能没有加载脚本（我正在使用 jQuery 和 jQuery UI 的 google api，以及加载 google maps api 和 fbconnect）。 我怀疑如果问题是其中一个页面未加载，我会收到错误消息，但什么也没有。

想也许我没有正确连接或其他什么，我重新连接到网络，甚至重新启动了我的计算机，并尝试运行本地版本。我什么都没有。 本地版本未运行也向我暗示，是加载了外部 javascript 导致了问题。

我让它在那个网络中作为奇怪的东西传递。不幸的是，现在我在 100 英里之外。

今天我的兄弟给我发了一封电子邮件，说他在机场的网络无法加载我的页面。同样的问题。一切都布局妥当，部分布局是用 Javascript 设置的，因此很明显 javascript 正在运行。

他也没有错误。当然，他上了飞机，现在已经不在机场了。现在该站点在他的计算机上运行（我没有更改任何内容）。

你究竟会如何弄清楚在这种情况下发生了什么？那是大约 12 个网络中的两个。但我不知道如何找到一个不起作用的网络（而且住在一个小镇，我可能很难找到一个不起作用的网络）。

有什么想法吗？ 该站点仍处于开发阶段，因此我宁愿暂时不发布链接（但可以在几天后发布）。 我可以看到不起作用的是在加载和点击时调用的 javascript 函数。所以我认为这是一个javascript问题，但没有错误。

如果我能找到并坐在其中一个网络上，这不会是一个大问题，但我不能。那你会怎么做呢？

编辑 ---------------------------------- ------------ 第一个没有被调用的函数（s - 它们的链接）在下面。 由于未进行调用，因此我已在 .ajax 调用中删除了代码。

function getResultsFromForm(){

    jQuery('form#filterList input.button').hide();
    var searchAddress=jQuery('form#filterList input#searchTxt').val();
    if(searchAddress=='' || searchAddress=='<?php echo $searchLocation; ?>'){
        mapShow(20, -40, 0, 'areaMap', 2);
        jQuery('form#filterList input.button').show();
        return;
    }

    if (GBrowserIsCompatible()) {
        var geo = new GClientGeocoder(); 
        geo.setBaseCountryCode(cl.address.country);

        geo.getLocations(searchAddress, function (result) 
                {    

                if(!result.Placemark && searchAddress!='<?php echo $searchLocation; ?>'){
                jQuery('span#addressNotFound').text('<?php echo $addressNotFound; ?>').slideDown('slow');
                jQuery('form#filterList input.button').show();

                } else {
                jQuery('span#addressNotFound').slideUp('slow').empty();
                jQuery('span#headerLocal').text(searchAddress);
                var date = new Date();
                date.setTime(date.getTime() + (8 * 24 * 60 * 60 * 1000));
                jQuery.cookie('address', searchAddress, { expires: date});
                var accuracy= result.Placemark[0].AddressDetails.Accuracy;

                var lat = result.Placemark[0].Point.coordinates[1];
                var long = result.Placemark[0].Point.coordinates[0];
                lat=parseFloat(lat);
                long=parseFloat(long);
                var getTab=jQuery('div#tabs div#active').attr('class');

                jQuery('div#tabs').show();
                loadForecast(lat, long, getTab, 'true', 0);
                var zoom=zoomLevel();
                mapShow(lat, long, accuracy, 'areaMap', zoom );

                }
                });
    }


}


function zoomLevel(){

    var zoomarray= new Array();
    zoomarray=jQuery('span.viewDist').attr('id');
    zoomarray=zoomarray.split("-");
    var zoom=zoomarray[1];
    if(zoom==''){
        zoom=5;
    }
    zoom=parseFloat(zoom);
    return(zoom);

}
function loadForecast(lat, long, type, loadForecast, page){

    jQuery('div#holdForecast').empty();
    var date = new Date();
    var d  = date.getDate();
    var day = (d < 10) ? '0' + d : d;
    var m = date.getMonth() + 1;
    var month = (m < 10) ? '0' + m : m;
    var year='2009';
    toDate=year+'-'+month+'-'+day;

    var genre=jQuery('span.genreblock span#updateGenre').html();


    var numDays='';

    var numResults='';


    var range=jQuery('span.viewDist').attr('id');
    var dateRange = jQuery('.updateDate').attr('id');
    jQuery('div#holdShows ul.showList').html('<li class="show"><div class="showData"><center><img src="../hwImages/loading.gif"/></center></div></li>');

    jQuery('div#holdShows ul.'+type+'List').livequery(function(){
            jQuery.ajax({
type: "GET",
url: "processes/formatShows.php",
data: "output=&genre="+genre+"&numResults="+numResults+"&date="+toDate+"&dateRange="+dateRange+"&range="+range+"&lat="+lat+"&long="+long+'&page='+page,
success: function(response){

编辑 2 --------------------------------------------- --------------------------------

请记住，问题不在于我无法加载站点，站点在大多数连接上都可以正常工作，但有时站点无法正常工作，并且没有抛出任何错误，并且没有任何变化.我的兄弟今天早些时候无法运行它，而我没有问题，所以这与他的位置/网络有关。然而，页面加载，他有一个连接，这是他第一次访问该网站，所以没有任何东西可以兑现。和我前几天遇到这个问题的时候一样。我没有改变任何东西，我进入了不同的网络，一切正常。

Answer 1

两件事：第一——在开发时获取本地的 javascript。从其他地方加载它以利用缓存是我将保留到最后的优化。我也只会从高度可用的远程站点（如 Google）加载它，以尽量减少问题。其次，在不启用 javascript 的情况下，让您的网站至少具有最低限度的可用性。例如，使用在页面加载时运行的 javascript 中的 Ajax 功能替换的表单回发。你可能无法获得所有东西，但我发现我可以让大多数事情在没有 javascript 的情况下以一种可行的方式运行，即使不是优雅的方式。

我知道这并不能解决您当前的问题，但我认为这将有助于您的网站在面对此类情况时保持可用。

Answer 2

事实证明，问题在于假设谷歌地图可以通过 IP 地址可靠地找到北美境内的任何纬度/经度。

我加了一个

if(!google.loader.ClientLocation)

函数用于 google 无法通过 ip 找到位置的实例。

最奇怪的是，我在帕洛阿尔托市中心的一个办公室里遇到了这个错误，我认为这会被谷歌地理编码器大量映射。

Answer 3

如果某些 JS 由不同的服务器托管（例如：如果您从 jQuery 站点包含类似 jQuery 的东西，而不是自己托管它的副本），那么这些站点中的一个可能会暂时关闭。

您可以尝试使用类似“Live HTTP Headers”（可在the Mozilla Addons site 获得）来实时观看 HTTP 标头，这在进行 Web 开发时非常有用。您应该能够非常快速地确定您的所有 JS 是否实际上都正确加载。

您也可以使用 Ethereal 或 Wireshark 之类的东西，但是当您只需要查看请求/响应标头时，这可能有点笨拙。使用插件的麻烦要少得多。

Answer 4

一些事情：

1.) 在您包含脚本的地方...确保您有一个单独的结束标记！不要自行关闭它们。

<script src="..."/><!--self-closing will fail, -->

<script src="..."></script><!--this will work -->

2.) 你使用 jQuery() 而不是 $() 有什么原因吗？

3.) 您的 SERVER 是否指定了本地环境未指定的 DOCTYPE？

4.) 你测试的是什么浏览器？特别是您是否在 IE 中进行测试，如果是的话，它是否可以在 Firefox 中运行？

5.) 如果您无法提供 URL，您可以发布一些生成的代码吗？

Answer 5

一旦您确定所有脚本都在开发环境中按预期加载，您可以尝试从页面中逐个删除它们，然后查看哪个脚本会重现您遇到的问题 - 那么这就是脚本没有加载。

Firebug 有一个 Net Tab，它的功能与 Live HTTP Headers 的功能非常相似，甚至可以跟踪加载时间和任何 ajax 请求。

Answer 6

我几乎总是为此推荐 Firefox 插件“Firebug”。

首先，您可以检查脚本以检查它们是否已加载，这将排除“它不是从远程源加载”的问题。

其次，它会显示在 JavaScript 控制台中发生的错误，这可能会指出以前似乎无声的东西。

最后，在使用来自其他域的 JavaScript 时，请注意跨站点脚本问题。