Rev. 2.73

console.png

클라이언트 사이드 웹개발에 유용하게 사용되는 자바스크립트 디버그 콘솔은 더이상 없어서는 안될 매우 중요한 요소가 되었습니다. 최근에는 브라우저 자체적으로 디버그 콘솔을 제공하거나 부가 기능으로 제공하여 개발을 이롭게하고 있습니다. IE에서도 이와 비슷한 Companion.JS라는 플러그인이 있지만 파이어버그보다는 다소 기능이 떨어지거나 사용법이 다르고 특히, 변수 출력의 디테일면에서 차이를 보이기 때문에 사용하는데 불편함이 있었습니다. 그래서 자바스크립트를 이용한 자바스크립트 디버그 콘솔을 만들게 되었습니다.

Prototype 기반이고, 파이어버그의 콘솔과 유사하게 만들려고 노력했습니다, 타입이 object인 경우 이를 분석하여 배열/노드/객체를 구분하고, 커맨드 라인을 사용할 수 있으며, 약소하지만 Ajax 통신하는 모습을 모니터링 할 수도 있어요. 단점은 콘솔의 호출 수와 작동 속도가 반비례 한는 것입니다. 호출이 많을수록 브라우저의 작동속도가 떨어지는 것이죠. 때문에 개발과정에서만 사용하는 것을 권장하며, 되도록이면 간격을 두어 콘솔을 호출하는 것이 좋습니다. console.js는 아래와 같은 방법으로 응용할 수 있습니다.

<script type="text/javascript">
  if (Prototype.Browser.IE && !window.console) 
    document.write('<script type="text\/javascript" src="console.js"><\/script>');
</script>

<script type="text/javascript">
  (function() {
    var set = function(type) {
      var func = (typeof console != 'undefined' && typeof console.log != 'undefined')?
        !!(console[type])? console[type] : console.log : Prototype.emptyFunction;
      /* fix for the firebug less than or equal to version v1.1 */
      return (typeof func.bind == 'function') ? func.bind(console) : func; 
    };
    ["debug", "log", "info", "warn", "error"].each(function(type, i) {
      (i)? debug[type] = set(type) : debug = set(type);
    });
  })();
</script>

위 코드는 제가 즐겨 사용하는 디버그 콘솔 호출 함수입니다. debug 함수를 만들어 사용하는데 파이어버그 콘솔 API를 따르는 디버그 콘솔을 제공하는 대부분의 브라우저들(파이어폭스, 크롬, 사파리 등)에서 사용할 수 있습니다. console 메서드들을 오버라이딩하여 사용하는 방식으로 통합적으로 사용할 수 있게 만든 것이죠. 물론 console.log 메서드를 그대로 사용해도 무방합니다.

다운로드 :

* original - console.js (14.1kb)
* minified - console.js (10.1kb)

업데이트 :

* 2008.10.08 - IE6에서도 Ajax 통신을 모니터링 할 수 있습니다.
* 2008.10.08 - Object 분석 결과 처리가 개선되었습니다.
* 2008.10.08 - Ajax 통신에 소요된 시간을 표시합니다.
* 2008.10.09 - Ajax 통신 결과물(responseText)을 표시합니다.
* 2008.10.09 - Ajax 통신 상황(status)의 오류를 표시합니다.
* 2008.10.10 - 자동으로 스크롤 위치를 계산합니다.

Comments

Got something to add? You can just leave a comment.

  • 조나영 조나영

    이런 걸 다 만드시다니....대단하시네요..
    잘 사용하겠습니다. 그런데 구현하신 디버그 콘솔을 북마트릿으로 만드실 수 있나요?
    어떻게 해보려고 했더니.. 화면이 하얗게 되버리더군요....

    reply edit

  • 굿 아이디어군요! 짬짬이 시도해 보도록 하겠습니다.

    reply edit

  • 이길호 이길호

    어떻게 사용하는건지 잘 모르겠습니다..

    reply edit

Your Reaction Time!

captcha

avatar