Saturday, 26 November 2011

Debugging errors that don't exist

This morning I was still trying to debug my problematic google maps page. In Firefox on Ubuntu, I was getting tons of errors, so I tried cutting the page down bit by bit, making it more and more basic. The idea being that when I remove a bit and then the page starts working properly, I know that it must have been something in the bit of code I just removed that was causing the errors.

However, I cut the page down to almost as basic as you can get, and was still getting the same errors. Then I tried the Google Maps tutorial map, and found that had the same issue. I thought I should post on the Google Groups maps API v3 about the issue, but first should check if the issue only occurs in Firefox on Ubuntu.

After opening the page in IE6, I found that all the layout of the images in the info bubble was all messed up. I used the Web Developer Tools to check the properties of the <span> that was meant to make the images display correctly in IE6, and it looked like it didn't have any style set by stylesheets.

So I Ctrl-clicked on a link on the page to open in a new window the main photos area of my website. This uses the same html and stylesheets for displaying images as I have inside the info bubble in Google maps, so I wanted to see if the image display was messed up there as well. But rather than opening the page in a new window, it opened it in the same window. So I clicked the back button to get back to the map, and opened up the info window again, but this time the images were all displayed correctly. I checked the <span> using Web Developer Tools, and now it had the correct styles applied to it. It makes it very difficult to debug real problems when browsers change their behaviour on each page load.

When testing in Google Chrome, I had erratic behaviour with that as well. For example, one time the map loaded up blank so I checked the developer tools, and the first part of the page was shown to be:





















                       <script>
$.ajaxSetup(("async" : true});

i.e. the first 21 lines of the html were blank, and the 22nd line is missing it's type="text/javascript" attribute. I refreshed the page, and still got a blank screen, but now the HTML code was showing correctly in the Developer tools.

After this I had a problem with the text inside a noscript tag not being styled correctly. I found this forum thread: NoScript - css background? and if you scroll about half way down the page, you can find a post by penders that lists the way different browsers deal with styling content inside noscript tags. Some browsers ignore rules applied to a noscript element in css, but will honour rules if you instead apply them to a containing element, such as a div, within the noscript tag. Seems very strange behaviour to me.

After finishing testing on the different browsers, I wrote a post to put on the Google Maps API v3 group:

I am having the same issue as detailed in this thread: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/9fce9c1a493b3413?pli=1

But, only on Firefox in Ubuntu. The other browsers I have tested (Chrome Win7, IE6 Win XP, IE7 Win XP, IE8 Win XP, IE9 Win7, Firefox Win7, Safari Win7, Opera Win7, K-Meleon Win7) do not have this problem.

The errors happen on any google map, including the example tutorial map: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

Both when the map is loading and when the cursor is moved over the map, thousands of errors will occur, e.g.

Warning: reference to undefined property a[oo]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 68

Warning: reference to undefined property this[a]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 26

Warning: reference to undefined property this[a]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 26

Warning: reference to undefined property a[pc]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 53

Warning: reference to undefined property a[oo]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 68

Warning: reference to undefined property this[a]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 26

Warning: reference to undefined property this[a]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 26

Warning: reference to undefined property a[pc]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 53

Warning: reference to undefined property a[oo]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 68

Warning: reference to undefined property this[a]
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/7/2/main.js
Line: 26

The version number of Firefox for Ubuntu is 3.6.24. I have disabled all extensions and add-ons and still have the same problem.

However, after writing this, but thankfully before I posted it, I found out what the problem was. I had javascript strict error checking set to true in Firefox on Ubuntu, but not on any of the other browsers. Sure enough, I turned strict error checking off (type about:config into the address bar to get to the settings), and now didn't get any errors other than one mismatched mime type error. Likewise, I set strict error checking to true on Firefox in Win7, and started to get the stream of near constant errors.

I am unsure if I originally turned strict error checking on, whether Ubuntu Firefox comes with it turned on by default, or if one the extensions e.g. firebug turned it on. But at least with it turned off I now won't get a constant stream of error messages and can hopefully debug why my page isn't working correctly in Ubuntu Firefox.

I also tried to see if I could turn strict error checking on in Chrome. I found this post Re: [chromium-dev] Re: enabling javascript strict warnings and errors?, which suggested using --strict when starting chrome to turn on strict error checking. Unfortunately that didn't seem to make any difference.

Interestingly, after turning off strict error checking in Firefox, I found that my Google Maps page now worked correctly. So all of my work yesterday and today has been mostly debugging errors that don't exist.

The rest of the afternoon and first part of the evening I made a lemon & coconut cake with Belly. Then most of the evening I spent listing my communist santa hats on ebay. I also went to see KK on Animal Crossing as well.

No comments: