IE9 자바스크립트 이슈 해결 - F12 (개발자도구)를 누를때만 자바스크립트가 실행되는 문제

IE 9의 개발자 도구(F12) 이슈

웹 개발에서 브라우저 호환성은 중요한 이슈다. 

특히, 인터넷 익스플로러(IE)는 웹 표준에 대한 이슈가 꾸준히 제기되고 있다. 

최근 프로젝트를 진행하면서, IE9 브라우저 사용자가 특정 메뉴에 접속할 때, 화면이 나타나지 않는 경우가 있었다. 

HTML 소스를 다른 페이지의 HTML과 비교해도 차이는 없었다. 

한가지 특이한 사항은, 디버깅하려고 개발자 도구에 접속면 페이지가 정상적으로 나온다는 점이었다.  

분명 개발자 도구와 관련이 있는 것이라고 판단했다. 

문제의 원인은 바로 console.log() 함수였다. 

IE9 브라우저에서 console.log()를 인식하지 못해, 자바스크립트 오류가 발생한 것이다. 

예전에는, 자바스크립트 디버깅을 위해 alert() 함수를 주로 사용했다. 

alert() 함수를 사용해도 충분했지만, 계속 확인 버튼을 눌러줘야 한다는 단점이 있었다. 

만약, 실수로 for 문 내부에 alert() 함수를 넣을때의 당황스러움은 한번쯤 느껴봤을 것이다. 

이후 브라우저 개발자 도구가 보편화되면서 window.console 객체가 등장한다. 

IE, 크롬, 파이어폭스 등에서 F12 버튼을 누르면 개발자 도구가 나타나고, 

'콘솔' 메뉴를 선택하면 console.log()의 값들을 확인할 수 있다. 

IE는 window.console 객체를 버전 8부터 지원을 했는데, IE9 버전까지는 한가지 문제점이 있다. 

바로 개발자 도구가 열려있지 않으면, window.console 객체를 null로 인식해 에러가 발생한다는 점이다.

그래서 IE9에서 해당 메뉴를 선택할 때, 자바스크립트 오류로 화면이 열리지 않았고,

디버깅하려고 개발자 도구에 들어갔을 때, 비로소 화면이 나타났던 것이다. 

IE9에서 console.log의 올바른 사용법

이 문제를 해결하는 방법은 간단하다. 

console.log()를 사용하기 전에 window.console 객체가 있는지 확인하면 된다.

if (window.console != null) { console.log(".. some text .."); }

한 줄로 간단히 사용하려면 다음과 같이 쓸 수 있다. 

window.console && console.log('.. some text ..');

"콩 심은 데 콩 나고 팥 심은 데 팥 난다."는 속담처럼, 원인이 없는 결과는 없다. 

문제점을 찾고 해결하는 것도 개발자의 중요한 능력중의 하나가 아닐까.