파이어폭스(Firefox)의 자바스크립트 디버그(debug) 도구인 파이어버그(Firebug)를 이용한 트레이스(trace) 방법을 소개한다. 파이어버그는 훌륭한 디버깅(debugging) 콘솔(console)을 가지고 있다. 간략하게 콘솔에 대해 설명하자면 메시지를 출력하거나 문자열(string)을 출력하는 일 외에도 DOM(Document Object Modal) 객체(object)를 표시할 때에는 어떠한 형태인지 분석하고 분석가능한 경우 DOM에 할당(registered)된 클리커블(clickable)한 객체 목 록을 표시하한다. 만약 엘리먼트(element)라면 'div#IDName.ClassName'과 같이 엘리먼트가 가진 id값, class값 혹은 action, src등 여러정보를 표시하고 클릭시 파이어버그 HTML트리의 해당 노드로 이동시키는 역할까지 하게된다.
위 화면은 파이어 버그의 콘솔을 이용해서 트레이스한 예이다. 자바스크립트 코드를 만들면서 지역변수의 값을 실시간으로 확인하거나 산출물에 대한 결과를 리포트할때 사용하면 효과적이다. 지금부터 파이어버그의 콘솔을 활용하는 방법에 대하여 알아보자.
var debug = function(){
// check browser has console
if(typeof console != 'undefined' && typeof console.log != 'undefined'){
console['info'](arguments); // call Firebug's console
}
출처 : http://firejune.com/1079
}

자, 이제 위에서 생성한 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.
반응형
'Developer > JavaScript' 카테고리의 다른 글
30 Scripts For Galleries, Slideshows and Lightboxes (0) | 2007.05.21 |
---|---|
JS, CSS파일 압축전송으로 페이지 로딩속도 향상 (0) | 2007.05.03 |
JavaScript Object Table (0) | 2007.05.03 |