웹프로그램 연구(V) Javascript 디버그 방법

연구개발 이야기

웹프로그램 연구(V) Javascript 디버그 방법

금메달.아빠 2010. 5. 23. 00:56

자바스크립트(Javascript)의 로그를 표시하는 예

스크립트의 중간에 debugMsg(S)를 실행시키면 별도의 창에 S를 표시한다.

파일명: debug.js

var _console = null;
var IsDebugMode = true;
var _counter = 0;
//==========================================================
// set DEBUG Mode
//
function setDebug(isEnabled) {IsDebugMode = isEnabled;}
//==========================================================
// common functions
//
function _formatDateTime(DateTime){
return DateTime.getFullYear() + "/" +
DateTime.getMonth() + "/" +
DateTime.getDate() + " " +
DateTime.getHours() + ":" +
DateTime.getMinutes() + ":" +
DateTime.getSeconds();
}
//==========================================================
// DEBUG functions declaration
//
function debugMsg(msg) {
if ((_console == null) || (_console.closed)) {
//make console window
_console = window.open("", "console", "width=600,height=300, resizable,caption='Tester'");
_console.document.open();
_console.document.writeln("<title>Debug Message</title>");
_console.document.writeln("<h2>JavaScript Debug Message Window</h2><br>");
_counter = 0;
}
var now = new Date();
var current = _formatDateTime(now);
_counter++;
_console.document.writeln(current + " #" + _counter.toString() + " >" + msg + "<br>");
_console.document.write("\n");
return true;
}

애써 여기까지 찾아오신 분들을 위하여 해설을 조금 추가합니다. var IsDebugMode를 항상 True로 사용하고 있지만 function debugMsg(msg) 부분에 이 변수를 보고 밖으로 빠져나가게 하면 디버그 후에도 원치 않는 메시지를 릴리스하더라도 표시되지 않도록 할 수 있습니다. 물론 대개의 경우 한번 보고 다시 스크립트를 원래대로 고쳐 두게되겠지요.

(유치원 액자에서: 보이지 않는 곳에 있는 것을 보는 것, 그것이 디버그다. 어린아이와 같은 마음으로 소스코드를 보면 버그가 잘 보이지 않을까?)

새로운 윈도에 시간 계열로 문자열을 표시해 두는것이 이 디버그 스크립트인데, 좀더 고급기능을 원하는경우에는 David Flanagan씨의 Javascript책의 인터넷 사이트에 가면 debug.js가 공개되어 있는데 이것은 오브젝트를 인수로 받아서 표 형식으로 HTML본문 중에 표시해주는 스크립트 기능입니다. 여기 공개한 소스는 이 책에 나온 일부를 응용하여 단순 문자열을 새창에 표시하도록 간략화하고 입맛에 맞게 고친 것입니다.

힘든 디버그 힘내세요! 잘 안되면 댓글이나 방명록에 질문을 남겨 두세요.

자바스크립트의 해설 사이트(일본어): www.openspc2.org 자바스크립트의 예제가 많다