패왕넷

A Korean translation of 「JavaScript Debugger and Tracer Tool」

소개

자바스크립트 추적 도구는 간단하게 alert(); 함수로 처리되어 왔다. 하지만 여기서 한 단계 더 나아가서 더욱 유용하도록 함수 몇 가지를 추가해 보았다. 이 어플리케이션은 지속적인 디버깅의 기회와 어플리케이션의 각 단계와 모든 단계를 살펴볼 수 있도록 한다. 이걸 사용한다 하더라도 어플리케이션에 엉뚱한 코드를 추가하거나 하진 않는다.

코드 사용

추적기(Tracer)은 매우 유용한 어플리케이션이다. 때문에, trace.js 파일 하나만 호출하여 작업할 수 있도록 하였다. 이 파일은 자체적으로 실행된다.

<script type="Javascript" src="trace.js"></script>


추적기 함수 목록은 다음과 같다. 각 함수들은 개별적인 요소들을 갖는다.

• trace(): 이 함수는 어플리케이션에서 alert("Helo World"); 대신에 trace("hello world");로 사용할 수 있다. 추적기는 숫자와 색상을 곁들여서 결과를 출력한다.
• traceArr(): 이 함수는 배열을 표시하고 배열의 위치(position)별 요소를 보여준다.
• traceAssoc(): 연관배열(associative array)[注:|associative array은 조합배열, 결합형 배열, 연상 배열로 쓰이기도 한다.]을 위한 함수다. 연관배열에 이 함수를 사용한다면 키(key)와 각 배열 요소의 값을 보여준다.
• traceStr(): 이 함수는 traceArr()과 거의 비슷하지만, 문자열에 동작하고 문자열의 문자들을 보여준다.
• Watch: Watch는 함수(function)가 아닌 기능(functionality)이다.

텍스트 박스에 개체의 ID를 입력할 때, watch는 요소 내용과 프롬프트를 추적한다. 이건 hidden 요소와 자동적으로 변경되는 값을 추적하는데 매우 유용한 기능이다. 게다가, 추적기는 런타임 에러를 잡아내고 해당 파일 이름과 줄 번호를 보여준다. 이 기능은 IE 사용자에게 정말로 유용하다.

게다가, 추적기 위치를 옮길 수 있다. 더 유용한 정보를 원한다면 데모 페이지에 가보도록 한다.

출처 : http://www.codeproject.com/jscript/JavaScriptDebuggerTool.asp


관련 파일 :

trace.zip

 

PDF 다운로드 :

자바스크립트 디버거와 추적 도구.pdf