Friday, September 12, 2014

IE9 and the case of the console.logs

detective I recently worked on a software release for approximately 3 months.  I took a number of feature requests and open defects and packaged them up into one, tidy “.1” release.  I had everything tested, awaiting the production “go ahead”, and a few weeks later things went live.  Then, things got goofy.

I received a call from a customer, indicating that they couldn’t proceed through the “checkout” portion of the site. Oddly enough, when looking at my error logging, I could see the error.. but not re-produce it.  “Clear cookies and try again!” I shout (ok, spoke softly.. trying to build some drama here), “Sorry, still got an error”.  I look more deeply at my code, and it’s pretty straightforward stuff, user selects an item, javascript assigns that item to a hidden var, hidden var is posted when user clicks Next.  Yet, my logs show that no value was passed over.  I run some more queries on my logging and I see more of these errors sprinkled throughout my logs.  Not all the time.. but some of the time for sure.  I ask the customer what their PC is.. Operating System, web browser, etc.  “I have Windows” is the response.. OK, that clears things up.  “Can you install Chrome and try again?”

Trust-but-verify

“Sorry, same issue” the customer replies, even after trying Chrome.  Now my head is spinning, why can’t I reproduce this issue, but she can very easily do so.. with the same few steps every time?  Eventually the customer tries from another PC in her office, and things work fine.. so it’s not some sort of weird proxy issue I start thinking.  I finally jump in and perform a remote sharing session to SEE what the user is doing.  Sure enough, they get an error.  I requested access to the PC, turn on developer tools and refresh the screen to see what files their browser is using.. I have this sneaky suspicion that the javascript is old or not loading properly somehow.  I go ahead and progress through the screen, and to our dismay.. no error message.  The customer sings my praises to the high heavens, I’m a little let down because I can’t figure the exact issue, but I happily accept her praise and go on my way.

I look at more error logs and find another recent error belonging to a sales rep.  I reached out and found they had the same exact issue, and performed a screen sharing session.  This time, I turn on dev tools in the browser, and once again, it works!  I was sure to not “hard refresh” the screen to pull down new files, I really wanted to see if there was some script files cached somewhere, but all was well.  The only thing that caught my attention was that this second user was running Windows 7, but only had IE9.. much like my first customer.

th03_log

At this point I’m still stumped… those who program know.. things don’t just fix themselves.  God doesn’t come down from the heavens and patch code, much like gremlins don’t appear from the depths and break it (apparently they all have more important things to do). Still, what gives here?  I spent a little time at night looking at the page, comparing code in source control, refreshing screens, etc.  Then.. like a lightning bolt, it hit’s me.  While running my developer tools, and walking through the breaking scenario, I see 3 little lines appear in my browser.  Three console.log’s.  Three lines that should have been commented out, but weren’t, and while invisible.. were causing a problem.

Quickly, I run to the Google machine and look up “IE9 console.log”, and my trusty sidekick StackOverflow give’s me an answer (http://stackoverflow.com/a/5473193) – console.log’s are fine  when using developer tools.. without them they break a page!  Every time I ran through the scenario with a customer, the first thing I did was open up the developer tools.  I quickly go through my code and comment out all console.log’s, push updated script, and rejoice as my error logs remain clean.

So what’s the moral of this story?  Look to the graphic above.. trust but verify.  The first customer said they tried Chrome, but they didn’t even know what Chrome was (shame on me).  They probably installed it, but didn’t think to use it.  They probably figured that they could still use IE, thinking Chrome “updated” it somehow.  It’s always good to have customers test and try things for you, but even if they say something did or didn’t work for them.. try it yourself!