jQuery.log(msg) 플러그인을 만들어 봤다

,

자바스크립트 디버깅을 할 때 가장 많이 사용하는 것은 alert() 이다. 그러나 alert() 은 확인을 눌러야 하는 번거로움이 있다. 확인을 누르고 나면 내용이 사라져서 여러 개의 alert이 뜰 때는 비효율적인 경우도 있다.

그냥 로그를 뿌려 주는 함수가 있으면 좋을 것 같다는 생각을 하고 검색을 해 봤다. 역시나 나왔다.

jQuery.log(), Logging plugin for jQuery 라는 글[지금은 사라졌다 2012-06-30]에는 어떻게 log 함수를 만드는지 친절하게 설명돼 있다. (저 영어 글에 있는 로그 함수를 갖다 쓰면, $.log.log(msg), $.log.info(msg) 형식으로 써야 한다.)

그런데 위 글에서 재밌는 함수를 발견했다. console.log(msg) 함수다. 크롬에서 해 보니까 크롬의 자바스크립트 콘솔(Ctrl+Shift+J)에 msg가 찍히는 걸 확인할 수 있었다. 이럴 수가. log 함수를 굳이 만들 필요가 없었던 건가;;

여튼 이 글을 참고해서 내가 플러그인을 만들어 봤다.

/* jquery.log.mytory.js ver 1.0 */
(function($) {
  $.log = function(message) {
    if( debug == true )
    {
      //if('console' in window && 'log' in window.console)
      if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
        console.log(message);
      }

      var messageHTML =
        '<pre class="jquery-log-mytory" style="background-color:#000; color:#00ff00; padding:10px; font-size:16px; font-family: 나눔고딕코딩">'
        + '<span class="jquery-log-mytory-number" style="margin-right: 10px;">1</span>'
        + message
        + '</pre>';

      $logDiv = $('.jquery-log-mytory');

      if( $logDiv.length > 0 )
      {
        var number = parseInt( $('.jquery-log-mytory-number:last').text() ) + 1;
        $logDiv.append("\n" + '<span class="jquery-log-mytory-number" style="margin-right: 10px;">' + number + '</span>' + message);
      }
      else
      {
        $('body').prepend(messageHTML);
      }
    }
  }
})(jQuery);

기능은 단순하다. 일단 자바스크립트 콘솔이 있는 경우에는 콘솔에도 메세지를 뿌려 준다. 그리고 HTML 페이지의 맨 위에 까만 바탕에 초록색 글자로 로그를 찍어 준다. 각 로그에는 번호가 붙어 있다. 끝이다.

코드가 가장 깔끔한 건 아닌데 뭐 성능이 엄청 필요하고 그런 플러그인이 아니니까 별 상관 없다고 생각한다. 쓰면서 개선하면 되겠지.

console.log() 를 사용할 때 주의점

내가 소개한 영어 글을 보면 console.log 를 사용할 때 아래처럼 조건문으로 감싸져 있다.

if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
  console.log(message);
}

이유가 있다. 몰랐는데 양파 님이 댓글로 말해 줘서 알았다.

참고로 console 객체는 IE8 이상, 크롬, 파이어폭스, 사파리 모두 지원합니다. 파이어버그나 크롬개발자도구, IE개발자도구(F12) 등등

console.log() 이외에 dir(), info(), error() 등 여러 내장메소드가 존재해서 디버깅시에 유용합니다.

다만 console 객체 사용시 IE에서는 개발자도구를 켜지 않은 상태에서 console 객체를 사용하거나 IE7 이하에서 사용하게 되면 스크립트 에러가 나오니 주의해서 사용해야 합니다.

카테고리 글 목록 👉

,

대표글

“jQuery.log(msg) 플러그인을 만들어 봤다”에 대한 2개의 응답

  1. 로그 플러그인 좋네요.

    참고로 console 객체는 IE8 이상, 크롬, 파이어폭스, 사파리 모두 지원합니다. 파이어버그나 크롬개발자도구, IE개발자도구(F12) 등등

    console.log() 이외에 dir(), info(), error() 등 여러 내장메소드가 존재해서 디버깅시에 유용합니다.

    다만 console 객체 사용시 IE에서는 개발자도구를 켜지 않은 상태에서 console 객체를 사용하거나 IE7 이하에서 사용하게 되면 스크립트 에러가 나오니 주의해서 사용해야 합니다.

    1. 아하! 제가 소개한 영어 글에 보면

      if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
        console.log(message);
      }

      이렇게 console 함수가 조건문으로 감싸져 있는데 그런 이유 때문이었군요! 본문에 반영하도록 하겠습니다.

댓글 남기기