A Classical design-flaw

Image Courtesy: businessdirect
I hear people talk about design and architecture and when we look at the code some of them write, find that they end up implementing all the possible anti-patterns. Recently, we found an issue with one of our single page, large-javascript-webapp. This app works just fine in all browsers. However, when it comes to IE 9, it does not load the page. Developer thought something was quirky with the javascript and opened the IE Developer Tools. Alas! the app loaded just fine. 

How does simply opening the Developer Tools make the web app load? As it turned out, the javascript had one console.log statements added by the developer for debugging. Apparently in IE 9, the app containing any console.log statements in javascript does not load unless you open the Developer Tools.

Here's where you find a classical design or architectural flaw. Why would anyone with the right frame of mind couple a web page loading with its presence of developer tool loaded? It appears that whenever IE's Javascript engine loads the page and encounters a console.* statement, it looks for a place to find the console object. In IE, this console object is part of the Developer Tools and hence, it waits until the Developer Tools is loaded to process the console.* statements. 

What should have been the ideal behavior? You may have guesses it right by now. IE should have continued to load the page irrespective of whether console object is available or not. I particularly liked the fact that our web page looked a lot nicer on IE 9, but then these silly niggles are really a dampener. Mr. Nadella, ping, ping...!