IE9 과 window.console 객체


오늘은 ie9 와 window.console 객체에 대하여 포스팅 해 보도록한다.

근무중인 회사에 OO 편집기에서 3개월만에 신규 배포한 버전이 IE9 에서 실행되지 않는다는 버그 리포트를 갑작스레 받게되었다.

처음엔 굉장히 당혹스러웠다. 내부 QA에서 잘 동작하는걸 확인하고 배포하였으나 클라이언트에서 초기화가 되지않는다니!!!

클라이언트 환경 문제라 생각하였지만 이슈화되고 디버깅을 시작하니 vmware native ie9 에서 편집기가 구동조차 되지 않는 심각한 문제인 것을 확인하였다.

이전 버전과의 code diff 를 통해 알아보니 튜닝작업을 진행하면서 편집기 시작시간을 체크했던  console.log 가 말썽을 부리고있었다.

개발도중에는 항상 개발자모드를 켜놓고 개발을 진행하니 당연히 window.console. 객체가 생성되어있는 상태였고 클라이언트가 개발자모드를 켜놓고 편집기를 실행하진 않으니 말이다...


IE9(and ie8) 에서 console 객체는 개발자도구를 따로 열었을 경우에만 노출된다.

개발자도구를 켰다가 껏더라도 console 객체는 노출된채로 남아있게 된다.

만약 ie9 혹은 ie8을 가지고 있다면 아래 링크를 한번 실행해 보면 알 수 있다.

http://jsfiddle.net/Hmmim/6ouacgoy/

소스코드

1
2
3
console.log("first console.log");

alert("hi?????");

예제 코드는 굉장히 간단하다.

ie9 혹은 ie8 로 개발자도구를 실행한적 없이 위 코드를 실행하면 "hi?????" 라는 alert 창은 띄워지지 않는다.

console 객체가 생성되지 않아 오류가 발생한다고 ie9 에서는 따로 알려주지 않는다.

그래서 더욱 헛짓거리 삽질 하기 쉬워진다.


해결책은 전역 컨텍스트 위치에 wiondow.console 객체를 찾는 if 문을 두고 없다면 만들어주거나 다른 함수로 window.console 을 만들면 된다.


참고링크

http://stackoverflow.com/questions/5472938/does-ie9-support-console-log-and-is-it-a-real-function

http://stackoverflow.com/questions/10183440/console-is-undefined-error-in-ie9