Swapping out JQuery with Fiddler

This morning, someone asked me to look into a site-compatibility problem on a HTML5 demo site. When loading the site into IE9 and IE10, the F12 Developer Tools’ Script Debugger showed the following error:

Now, obviously, IE does support getElementsByTagName, and I confirmed that the page is running in IE9 and IE10 Standards Modes in each respective browser version. The next thing that stood out to me is the filename: jquery-1.5.min.js, which indicates that this is version 1.5.0 of the popular JQuery JavaScript library. Back in March, Tony Ross celebrated the release of JQuery 1.5.1 on the IEBlog, noting that 1.5.1 was the first version of the library to fully support IE9.

So, it looks like this site might be using an outdated version of the library. But is it the outdated library that's causing this script error, and is upgrading to the latest JQuery enough to make the site work properly?

In an earlier case, I had thought that a different site might have been broken because it was using JQuery 1.4.4, but the developer upgraded to the latest JQuery and it didn’t help-- it turned out that developer's code was doing a User-Agent check and bailing out if it saw MSIE.

So, before I got in touch with the owners of today’s demo site, I wanted to make sure that upgrading JQuery was all they needed to do.

Fortunately, Fiddler makes this task super easy. First, visit Jquery.com and download the JQuery library. If you plan on debugging into JQuery, get the Development version; since I’m hoping a simple upgrade will alone suffice, I downloaded the smaller minified version and saved it to my desktop:

Now, I booted Fiddler, and activated the AutoResponder tab. Using the Add… button, I created a new rule to map requests for JQuery-1.5.min.js to the newly downloaded jquery-1.6.2.min.js file I had just put on my desktop:

Be sure to set the Unmatched requests passthrough option to ensure that Fiddler doesn’t automatically generate 404s for requests that don’t match any of the rules.

Now, I went back to the site in IE and hit CTRL+F5 in the browser to force it to reload all of the content from the network. Fiddler intercepts the request for the older JQuery and returns the newer one instead. Fiddler shows the AutoResponse line in blue in the WebSessions list:

I was in luck-- with the new version of JQuery in place, the site ran correctly without any script errors, and the demo content worked beautifully! I could then confidently contact the site’s owner and request that they update their libraries, knowing that doing so will resolve the compatibility problem.

-Eric