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

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

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

파일명: debug.js

1. var _console = null;
2. var IsDebugMode = true;
3. var _counter = 0;
4. //==========================================================
5. // set DEBUG Mode
6. //
7. function setDebug(isEnabled) {IsDebugMode = isEnabled;}
8. 
   
9. //==========================================================
10. // common functions
11. //
12. function _formatDateTime(DateTime){
13. return DateTime.getFullYear() + "/" +
14. DateTime.getMonth() + "/" +
15. DateTime.getDate() + " " +
16. DateTime.getHours() + ":" +
17. DateTime.getMinutes() + ":" +
18. DateTime.getSeconds();
19. }
20. 
    
21. //==========================================================
22. // DEBUG functions declaration
23. //
24. function debugMsg(msg) {
25. if ((_console == null) || (_console.closed)) {
26. //make console window
27. _console = window.open("", "console", "width=600,height=300, resizable,caption='Tester'");
28. 
    
29. _console.document.open();
30. _console.document.writeln("<title>Debug Message</title>");
31. _console.document.writeln("<h2>JavaScript Debug Message Window</h2><br>");
32. _counter = 0;
33. }
34. var now = new Date();
35. var current = _formatDateTime(now);
36. 
    
37. _counter++;
38. _console.document.writeln(current + " #" + _counter.toString() + " >" + msg + "<br>");
39. _console.document.write("\n");
40. 
    
41. return true;
42. }

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

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

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

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

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

관련된 내 블로그:

[연구와 개발] - 웹프로그램 연구(IV) ASP 디버그 방법
[연구와 개발] - 소스코드리뷰(IX) 불필요한 주석을 빼라
[연구와 개발] - 소스코드리뷰(IV) 객체지향 모듈 설계