Rev. 2.73

파이어폭스(Firefox)의 자바스크립트 디버그(debug) 도구인 파이어버그(Firebug)를 이용한 트레이스(trace) 방법을 소개한다. 파이어버그는 훌륭한 디버깅(debugging) 콘솔(console)을 가지고 있다. 간략하게 콘솔에 대해 설명하자면 메시지를 출력하거나 문자열(string)을 출력하는 일 외에도 DOM(Document Object Modal) 객체(object)를 표시할 때에는 어떠한 형태인지 분석하고 분석가능한 경우 DOM에 할당(registered)된 클리커블(clickable)한 객체 목록을 표시한다. 만약 엘리먼트(element)라면 'div#IDName.ClassName'과 같이 엘리먼트가 가진 id값, class값 혹은 action, src등 여러정보를 표시하고 클릭시 파이어버그 HTML트리의 해당 노드로 이동시키는 역할까지 하게된다.

firebug-console.gif
파이어버그의 디버깅 콘솔

위 화면은 파이어 버그의 콘솔을 이용해서 트레이스한 예이다. 자바스크립트 코드를 만들면서 지역변수의 값을 실시간으로 확인하거나 산출물에 대한 결과를 리포트할때 사용하면 효과적이다. 지금부터 파이어버그의 콘솔을 활용하는 방법에 대하여 알아보자.

var debug = function(){
  // check browser has console
  if(typeof console != 'undefined' && typeof console.log != 'undefined'){
    console['info'](arguments); // call Firebug's console
  }
}
hello-console.gif

간단하게 디버그 함수를 하나 생성했다. console['info'] 함수에 아규먼트(argument)로 넘긴 값이 파이어버그의 콘솔에 표시된다. 콜솔에 표시되는 메시지의 종류로는 'debug', 'info', 'warn', 'error'가 있다. 이것은 좌측 그림과 같이 메시지의 종류를 시각적으로 표시해준다. debug는 값만을 출력하며, info는 메시지 앞에 파랑색 'i' 아이콘을 붙게되고, warn은 노랑색 'i'아이콘에 라인이 하늘색으로 강조된다. 그리고 error는 빨간색 'x' 아이콘이 붙고 라인이 연노랑색으로 강조된다. 여기서는 트레이스 구분을 위해 일괄적으로 'info'를 사용했다.

자, 이제 위에서 생성한 debug 함수를 활용해보자.

debug('hello world!');
// -> ["hello world!"]
debug(debug, typeof debug);
// -> [function(), "function"]
debug(document.getElementsByTagName('form'));
// -> [[form custom, form#weblog index.php]]
debug('value1', 'value2', 'value3', 'value4', 'value5');
// -> ["value1", "value2", "value3", "value4", "value5"]

파이어버그의 강력한 콘솔기능을 트레이스로 활용함으로써 조금 더 편리한 디버깅환경을 구축할수 있다. 이것은 소스를 분석하거나 조작하는데에도 매우 효과적이다. enjoy it.

Comments

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

  • 플록 플록

    유용한 정보 감사합니다.
    파이어준님의 FloatPhoto를 공부하면서 분석에 어려움을 겪고있었는데 소개해주신 Firebug가 많은 도움이 될것 같습니다.
    설치후 일전에 스크랩해두었던 zoomingphoto 데모파일을 돌리면서 조목조목 들여다 보고있습니다.
    zoomingphoto에서 보여주는 이펙트가 무척 아름답습니다.^^
    언젠가는 파이어준님의 라이브러리를 꽤뚫어 보는날이 오겠죠?!
    열.공해서 꼭 활용해보도록 하겠습니다.

    *에러로그 작성을 위해 editplus에 콘솔내용을 붙여넣던중 발견한 내용인데요.
    콘솔에서는 보이지 않는 관련 파일 및 해당라인등 상세정보가 함께 카피된다는 겁니다.
    그외에도 매우 직관적이어서 저 같은 아마추어가 사용하기에도 큰 불편이 없는듯 합니다.
    뜻하지 않은 행운에 얼떨떨 합니다.^^;

    reply edit

Your Reaction Time!

captcha

avatar