how would you debug this javascript problem?

Question

I've been travelling and developing for the past few weeks. The site I'm developing was running well.

Then, the other day, i connected to a network and the page 'looked' fine, but it turns out the javascript wasn't running. I checked firebug, and there were no errors, as I was suspecting that maybe a script didn't load (I'm using the google api for jQuery and jQuery UI, as well as loading google maps api and fbconnect). I would suspect that if the issue was with one of these pages not loading I would get an error, and yet there was nothing.

Thinking maybe i didn't connect properly or something, i reconnected to the network and even restarted my computer, as well as trying to run the local version. I got nothing. The local version not running also hinted to me that it was the loading of an external javascript which caused the problem.

I let it pass as something strange with that one network. Unfortunately now I'm 100s of miles away.

Today my brother sent me an e-mail that the network he was on at the airport wouldn't load my page. Same issue. Everything is laid out properly, and part of the layout is set in Javascript, so clearly javascript is running.

he too got no errors. Of course, he got on his plane, and now he is no longer at the airport. Now the site works on his computer (and i haven't changed anything).

How on earth would you go about figuring out what happened in this situation? That is two of maybe 12 or so networks. But I have no idea how i would find a network that doesn't work (and living in a small town, it could be difficult for me to find a network that doesn't work).

Any ideas? The site is still in Dev, so I'd rather not post a link just yet (but could in a few days). What I can see not working is the javascript functions which are called on load, and on click. So i do think it is a javascript issue, but no errors.

This wouldn't be as HUGE an issue if I could find and sit on one of these networks, but I can't. So what would you do?

EDIT ---------------------------------------------------------- the first function(s - their linked) that doesn't get called is below. I've cut the code of at the .ajax call as the call wasn't being made.

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

EDIT 2 -----------------------------------------------------------------------------

Please keep in mind that the problem is not that I can't load the site, the site works fine on most connections, but there are times when the site doesn't work, and no errors are thrown, and nothing changes. My brother couldn't run it earlier today while I had no problems, so it was something to do with his location/network. HOWEVER, the page loads, he had a connection, it was his first time visiting the site, so nothing could have been cashed. Same with when I had the issue a few days before. I didn't change anything, and I got to a different network and everything worked fine.

Answer 1

Two things: first -- get the javascript local to your site when developing. Loading it from elsewhere to take advantage of caching is an optimization that I'd leave to the end. I'd also only load it from highly available remote sites, like Google, to minimize problems. Second, make your site at least minimally usable without javascript enabled. Use form postbacks that get replaced with Ajax functionality from javascript that runs when the page is loaded, for example. You might not be able to get everything, but I've found that I can make most things work without javascript in at least a workable, if not elegant fashion.

I realize this doesn't solve your immediate problem, but I think it would help your site to remain available in the face of situations like this.

Answer 2

If some of the JS is being hosted by a different server (eg: if you are including something like jQuery from the jQuery site instead of hosting a copy of it yourself) then maybe one of these sites is down temporarily.

You could try use something like "Live HTTP Headers" (available at the Mozilla Addons site) to watch HTTP headers in real-time, which can be really useful when doing web development. You should be able to determine very quickly if all your JS is in fact loading correctly or not.

You could also use something like Ethereal or Wireshark, but that is probably a little heavy-handed when all you need is to see the request/response headers. Using an Addon is far less hassle.

Answer 3

A few things:

1.) where you include your scripts... make sure you have a separate closing tag! DO NOT self close them.

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

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

2.) is there a reason why you are using jQuery() rather than $() ?

3.) does your SERVER specify a DOCTYPE that your local environment didn't?

4.) what browser are you testing in? in particular are you testing in IE, if so does it work in Firefox?

5.) can you post some of the generated code if you can't supply a URL?

Answer 4

Once you're sure that all the scripts are loading as expected in the dev environment you could try either removing them one-by-one from the page and see which one recreates the issue you were having - then that's the script that wasn't loading.

Firebug has a Net Tab which does something very similar to what Live HTTP Headers does, even tracking the timings of the load and any ajax requests.

Answer 5

I almost always recommend Firefox plugin, "Firebug" for this.

Firstly, you can inspect the scripts to check that they have loaded, which will rule out the "it didn't load from a remote source" problem.

Secondly, it will display errors that occur in the JavaScript console, which may point out something that appeared to be silently previously.

Lastly, keep an eye out for cross-site-scripting problems when using JavaScript from another domain.

Answer 6

Turns out the problem with this was in assuming that google map could find any lat/long within north america reliably via ip address.

I add a

if(!google.loader.ClientLocation)

function for the instances where google cannot find the location via ip.

The strangest bit was that I was hitting this error in an office in downtown Palo Alto which I thought would have been heavily mapped by the google geocoder.