Using Fiddler2 and jsbeautifier to debug minified javascript

You’ve deployed to production, everything is tested. You’re quietly confident your AM and the client will be hitting the publish button on the content, high-fiving with gusto and heading downtown for Martini’s while you trudge to the bus stop in the rain. But no. Ten minutes after you send the email, alarms start ringing – “the compact search isn’t displaying in IE!”. That’s the compact, front-and-centre most highly used feature of home page and gateway to the gazillions in sales we receive every hour, search. And that’s IE, the browser (still?!) with the highest god-damned user base. OK, time to investigate.

The compact search is an ajax-driven form that is displayed on page load, so you’re 99% sure the problem is JavaScript. Firing up IE, you hit F12 to launch the developer console, hit the script tab and start debugging. Refresh.

IE9 JavaScript Error - SCRIPT16385 Not implemented

Oh great. 3rd Party Library. Minified. It’ll be a breeze making sense of that code … <Insert more blasphemy here>.

JavaScript Error Code

But there is light in this tunnel.. just down aways.

Open up Fiddler, says Tony. I’ll show you a trick. Refresh the page. Woila, there’s all the files the browser requested for that page, include the culprit, Modernizr. Now, generally speaking there’s nothing special there – nothing that standard browser developer tools don’t give you. But look a little deeper, and we can do some fancy stuff.

  1. Here is our Modernizr include file
  2. Here is the file output – notice it is Gzipped and encoded, hit the button to convert this stuff: Gzipped code, into your actual minified JavaScript code.
  3. Next let’s look at AutoResponder, home of aforementioned fancy stuff. Hit that tab and let’s have a look.

Fiddler Output

So now that you’ve found your javascript file, decoded it and moved over to the AutoResponder tab, drag that file from the list over into the AutoResponder window. You’ll end up with something like this:

Fiddler AutoResponder 1

OK, so look at that… instead of loading the js file from the server now, Fiddler is going to intercept the request and serve this version of the file. Let’s just right-click that sucker and select Edit Response. That’ll give us this window:

Fiddler AutoResponder 2

OK, now we can edit this code to debug the problem. No need to touch anything on the production server. How about we copy the code from this window, head over to jsbeautifier.org and BANG, readable javascript code. Paste that back into the Fiddler AutoResponse, save it and refresh your page. Check your console now and you’ll have the real line where that error occurred. You now have some context.

JavaScript - CleanError Code

Let’s have a quick Google to see why Modernizr 1.6 is crashing in IE9… oh look at that: https://github.com/Modernizr/Modernizr/issues/224. Windows Server 2008 doesn’t deal with the video tag properly because HTML5 isn’t enabled without setting up “Desktop Experience” on the server. But wait a sec, this is happening on a desktop, not a server. Let’s look at that, oh Windows 7 Enterprise ‘N’ .. what the fuck is ‘N’?! More searching reveals this: http://www.techarp.com/showarticle.aspx?artno=619&pgno=3. So looks like ‘N’ is causing a similar issue because Windows didn’t have Media Player and IE set up properly from the start. Nuts.

Side note (rant)

But why does Windows come with this crazy ‘N’ version that has the messed up Html5 / media player features. Well let’s go back in time a bit kiddies, to when Microsoft was a great ogre, rolling over the top of their competition, selling Windows with the web browser already installed!!! Yes, that’s right, already installed! Netscape the other great browser maker of the time were losing market share rapido. All of Microsoft’s competitors freaked out and thought this giant was going to take over the entire world – all because Windows came with IE (and Windows Media Player) installed.

So up rose the mighty US government, pitchforks in hand, and headed to the courts, in both the US and Europe. George W Bush came along and gave the smack down to the case in the US, but Europe ruled that MS had to split the Windows from IE. Enter ‘N’ version of Windows causing me my headache today.

Ten years later, Internet Explorer is still the most widely used browser. But nobody really cares about whether browsers and operating systems and media players are integrated. In fact just look at what Apple do these days. Mac OS comes with everything you need, from Safari to iPhoto. Look at Google, they’re turning the browser into the OS. What’s going on there? Integration is the way of the future.

So why did we stop Microsoft doing this ten years ago?

Haters gotta hate.


Tagged

2 thoughts on “Using Fiddler2 and jsbeautifier to debug minified javascript

  1. Trevor Sullivan says:

    It seems that hatred of Microsoft is a prerequisite to be “cool.” Kind of sad, really.

    Where’s the “N” version of Mac OS X?

    • chuck says:

      Don’t be a fool Trevor. MS has made some of the worst popular software in the history of PCs. I fully expect to see an episode of engineering disasters dedicated to windows and internet explorer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: