웹프로그램 연구(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. // common functions
  10. //
  11. function _formatDateTime(DateTime){
  12. return DateTime.getFullYear() + "/" +
  13. DateTime.getMonth() + "/" +
  14. DateTime.getDate() + " " +
  15. DateTime.getHours() + ":" +
  16. DateTime.getMinutes() + ":" +
  17. DateTime.getSeconds();
  18. }

  19. //==========================================================
  20. // DEBUG functions declaration
  21. //
  22. function debugMsg(msg) {
  23. if ((_console == null) || (_console.closed)) {
  24. //make console window
  25. _console = window.open("", "console", "width=600,height=300, resizable,caption='Tester'");

  26. _console.document.open();
  27. _console.document.writeln("<title>Debug Message</title>");
  28. _console.document.writeln("<h2>JavaScript Debug Message Window</h2><br>");
  29. _counter = 0;
  30. }
  31. var now = new Date();
  32. var current = _formatDateTime(now);

  33. _counter++;
  34. _console.document.writeln(current + " #" + _counter.toString() + " >" + msg + "<br>");
  35. _console.document.write("\n");

  36. return true;
  37. }

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

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

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

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

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

관련된 내 블로그:

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

by 금메달.아빠 on 2010.05.23 00:56 주요 단어: , , ,
  • BlogIcon 금메달.아빠 2010.08.29 12:27 신고 주소 수정/삭제 답글

    관련자료/트랙백 주소:
    http://www.openspc2.org ---본문중의 주소 예제가 많이 등장(일본어 사이트)
    http://www.openspc2.org/reibun/javascript/ --- 자바스크립트 예제
    http://mudchobo.tomeii.com/tt/461 js개발 시 alert대신 쓸 수 있는 디버그메세지창 - Blackbird

체크하면 비공개 댓글이 됩니다