Today I found a super annoying issue about IE. Our website works perfectly in any browser except IE. The page isn’t rendered properly in IE 9. Well, this is common, this is the nature of IE. The mysterious issue I found is that once you opened or ever opened the developer tool, open the page or refresh the page, the problem is gone magically!!!!
As a conclusion, opening the developer tool changes the browser behavior!!!!! What a hell! So you know there is something wrong, but once you try to figure out the error message, you have to open developer tool. Once you open the developer tool, the bug is gone! DEAD END!!!
Because I cannot open developer tool, so I have to debug with
alert. It is really a horrible experience to me, and feels like inspecting nuclear reaction with a plain optical magnifier or fixing a high-tech spacecraft with stones and clubs.
During the process I invalidated a couple of assumptions, some of them are seems very close to the “right answer”, such as “some script is loaded and executed before its dependencies, and developer tool load all the scripts first because it displays all the scripts”.
After spending a couple of hours on it, I put on eye on a line of code that is really out of my expectation:
I displays a warning message to console when a workaround is applied. But a tricky fact about IE 9 is that
console isn’t available until developer tool is opened (MSDN reference here))!!!
There is another pitfall here, and I saw someone really post it as answer on StackOverflow:
We usually access
console.log, feels like
console is a global instance to access. But actually console is an member of
window, its full name should be
console exists, we can definitely reference to it via
console. But if it doesn’t exist, the statement
console cause script error! So the following code doesn’t work:
console issue, a ployfill could be very useful. Here is a great implementation available as
bower package: console-polyfill