日本語에서 번역 • 원문 보기 [caption id="attachment_267" align="alignleft"]
'console'은 선언되지 않았습니다 (IE8)[/caption]
거의 모든 최신 브라우저에는 디버깅을 위한 검증 기능이 있어서 포함된 외부 파일과 적응된 스타일을 볼 수 있고, JavaScript, jQuery 등으로 동적으로 변경된 HTML의 동작도 실시간으로 확인할 수 있어 사이트 생성이 훨씬 쉬워졌습니다.
특히 JavaScript에서는 콘솔 객체가 추가되어, 브라우저 콘솔 측에서 모든 디버깅 출력을 검증할 수 있어 프론트엔드 처리를 중단하지 않고도 모든 디버깅 출력을 검증할 수 있어 매우 편리합니다.
이 콘솔 객체는 꽤 사용하기 쉽습니다. alert() 메서드를 JavaScript 개발에서 사용해본 분들이 공감할 것이라 생각합니다. 모든 것이 백그라운드에서 처리되어 출력이 나타나지 않고, 프로그램의 흐름이 멈추지 않으며, 브라우저 구현에 따라 배열과 객체의 내용을 쉽게 나열할 수 있습니다. 개인적으로 JavaScript 코딩에 필수적인 객체가 되었습니다.
하지만 너무 사용하기 쉬운 '함정'도 있어서, 디버그 코드는 자바스크립트로 남겨두고 사이트를 게시하는 경우도 있습니다... 그런 것들이 정말 많습니다 (... 저만 그런가요? ）。
그리고 디버깅할 수 있는 콘솔 객체가 하나만 남아 있다면, 콘솔 객체가 없는 구형 브라우저에서는 오류가 발생할 것입니다(당연히...).
특히 IE8 브라우저는 문제가 많으며, 콘솔 객체로 IE9 동작을 검증할 때 '함정'에 빠집니다.
이는 IE9에 추가된 개발자 모드([F12]로 시작)가 편리하고 IE7과 IE8의 에뮬레이션 기능을 갖추지만, 원래 IE8에 구현되지 않은 콘솔 객체의 오류를 무시하기 때문입니다. 이는 원래 브라우저인 IE9가 콘솔 객체를 지원하며 에뮬레이션 중 내부적으로 전환하지 않기 때문일 가능성이 큽니다. 하지만 디버깅용 콘솔 객체가 JavaScript에 남아 있어도 정상적으로 처리되기 때문에, "IE8에서 정상적으로 작동하는 JavaScript"로 공개되는 경우도 있습니다(실제로 저는 그렇게 했습니다).
──그래서 출시 후에는 순수 IE8 사용자들이 오류를 보고합니다.
하지만 제 IE9 에뮬레이션 기능은 버그가 없어요... "어? 왜?" 그게 문제예요.
순수 IE8 오류의 내용("'콘솔' 객체가 정의되지 않았습니다")을 알려주면 즉시 알아차리겠지만, 사용자는 오류 세부 사항을 거의 확인하지 않아 "여기서 작동하지 않습니다" 또는 "여기서 오류가 발생한다"와 같은 단편적인 보고를 받게 됩니다. 사실 콘솔 객체 설명 때문에 아래에서 설명한 "일부 기능이 작동하지 않습니다"라고 적혀 있지만, 이 경우 원인을 파악하기 어렵고 꽤 혼란스럽습니다.
콘솔 객체뿐만 아니라 디버깅 설명도 소스 코드에 남기지 마세요! … 이론은 그렇지만, 나중에 줄이거나 기능이 추가되면 다시 디버깅할 생각을 하며 그냥 두는 경우가 있다고 생각합니다.
이런 경우에는 콘솔 객체를 지원하지 않는 브라우저에서 오류 없이 구현해도 안전합니다.
또한, 콘솔 객체의 사용성을 해치지 않도록 자체 함수로 만들어 언제든지 호출할 수 있도록 할 것입니다.
[코드 lang="js"] function debug(string, enable_flag){ if(enable_flag){ if(typeof console != 'undefined'){ console.info(string); } else{ alert(string); } } true를 반환합니다; } [/code] 그리고 호출하려는 곳에서,
[code lang="js"] debug("표시하고 싶은 문자", true); [/code]는 콘솔 객체가 활성화되어 있으면 console.info() 메서드를 실행하고, 브라우저가 유효하지 않으면 alert() 메서드가 실행되어 대화 상자가 표시됩니다. 디버깅 기능을 일시적으로 비활성화하고 싶다면, 두 번째 인자에 "false"를 지정하면 아무 일도 일어나지 않습니다.