AJAX 응용 프로그램 디버깅 및 추적 개요

아티클
10/22/2014

업데이트: 2007년 11월

AJAX 사용 ASP.NET 응용 프로그램에는 서버 코드와 클라이언트 코드가 혼합되어 있습니다. 또한 브라우저에서 추가 데이터를 비동기적으로 요청할 수 있습니다. 이로 인해 AJAX 사용 웹 응용 프로그램의 디버깅이 어려워질 수 있습니다. 이 개요에서는 코드를 보다 쉽게 디버깅하는 데 유용할 수 있는 일부 기술 및 도구에 대해 설명합니다.

참고:
이 항목에서 언급하는 프로그램은 타사 도구이며 Microsoft에서 지원되지 않습니다. 단, Visual Studio와 Internet Explorer의 경우는 예외입니다. 라이선스 및 지원 정보에 대한 자세한 내용은 해당 도구의 웹 사이트를 참조하십시오.

이 항목의 내용은 다음과 같습니다.

시나리오
배경
클래스 참조

시나리오

서로 다른 개발 단계에서 AJAX 사용 ASP.NET 응용 프로그램을 디버깅하려면 다음 방법을 사용하십시오.

구성 파일에서 디버깅을 사용하도록 설정합니다.
서버에서 추적을 사용합니다.
Sys.Debug 클래스의 메서드를 사용하여 중단점을 설정하고 추적 출력을 처리합니다.
브라우저에서 디버깅을 사용하도록 설정합니다.
Visual Studio 2008 디버거를 Internet Explorer 인스턴스에 연결하거나 외부 도구를 사용하여 다른 브라우저에서 디버깅합니다.
외부 도구를 사용하여 HTTP 트래픽을 캡처합니다.

맨 위로 이동

배경

ASP.NET AJAX 아키텍처에서는 릴리스 모드와 디버그 모드에 대한 모델을 제공합니다. 릴리스 모드에서는 스크립트 크기를 최소화하고 성능을 위해 최적화된 오류 검사 및 예외 처리를 제공합니다. 디버그 모드는 형식 및 인수 검사와 같은 보다 강력한 디버깅 기능을 제공합니다. 디버그 버전의 클라이언트 스크립트 파일 또는 스크립트 리소스를 만들면 응용 프로그램이 디버그 모드인 경우 ASP.NET에서 디버그 버전을 실행합니다. 따라서 사용자는 디버그 스크립트에서 예외를 throw할 수 있지만 릴리스 코드의 크기를 최소 크기로 유지할 수 있습니다.

디버그 도우미 클래스인 Sys.Debug는 웹 페이지 끝에서 읽을 수 있는 형식으로 개체를 표시하기 위한 메서드를 제공합니다. 또한 이 클래스는 추적 메시지를 표시합니다. 사용자는 이 클래스를 통해 어설션을 사용할 뿐만 아니라, 실행을 중단하고 디버거를 시작할 수 있습니다. 확장 Error 개체 API는 릴리스 모드와 디버그 모드에서의 유용한 예외 정보를 제공합니다.

다음 단원에서는 디버깅 및 추적에 사용할 수 있는 기술 및 도구에 대한 정보를 제공합니다.

디버깅용으로 응용 프로그램 구성

디버깅을 사용할 수 있게 설정하려면 compilation 요소를 사이트의 루트 Web.config 파일에 추가한 다음 해당 debug 특성을 true로 설정합니다. 자세한 내용은 compilation 요소(ASP.NET 설정 스키마)를 참조하십시오.

다음 예제에서는 디버깅용으로 설정된 debug 특성이 있는 Web.config 파일의 섹션을 보여 줍니다.

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

디버깅이 설정되면 ASP.NET에서는 디버그 버전의 Microsoft AJAX 라이브러리 및 디버그 버전의 사용자 지정 클라이언트 스크립트 파일(사용 가능한 경우)을 사용합니다.

배포를 위해 응용 프로그램을 디버그 모드에서 릴리스 모드로 설정

릴리스 버전의 AJAX 사용 ASP.NET 응용 프로그램을 배포하는 경우 응용 프로그램을 릴리스 모드로 설정합니다. 이렇게 하면 ASP.NET에서 성능이 최적화된 릴리스 버전의 AJAX 라이브러리를 사용하게 됩니다. 디버그 및 릴리스 버전의 사용자 지정 클라이언트 스크립트 파일 및 스크립트 리소스를 만든 경우에는 ASP.NET에서 릴리스 버전도 사용합니다. 응용 프로그램을 릴리스 모드로 설정하려면 다음 작업을 수행합니다.

Web.config 파일에서 compilation 요소에 debug 특성이 포함되어 있는 경우 debug 특성이 false로 설정되어 있는지 확인합니다.
ScriptManager 컨트롤이 포함되어 있는 웹 페이지의 ScriptMode 속성이 Release로 설정되어 있는지 확인합니다.

@ Page 지시문의 debug 특성은 ASP.NET AJAX 응용 프로그램에 영향을 주지 않습니다. ScriptManager 컨트롤은 Web.config 파일 및 해당 IsDebuggingEnabled 및 ScriptMode 속성의 설정만 사용하여 디버그 스크립트의 렌더링 여부를 결정합니다.

서버에서 추적 사용

부분 페이지 렌더링을 사용하는 웹 페이지를 디버깅하기 위해 서버에서 추적을 사용하는 경우 추적 뷰어(Trace.axd)를 사용하여 추적 출력을 표시해야 합니다. 추적 출력을 페이지 끝에 추가하면 페이지가 처음 렌더링될 때 추적 출력이 표시됩니다. 그러나 새로 고쳐야 할 UpdatePanel 컨트롤 내용만 변경되므로 비동기 포스트백의 결과로 추적 표시가 업데이트되지는 않습니다. 추적 뷰어를 사용하는 방법에 대한 자세한 내용은 ASP.NET 추적 개요를 참조하십시오.

참고:
EnablePartialRendering 속성이 true로 설정된 ScriptManager 컨트롤이 페이지에 있으면 부분 페이지 렌더링을 사용할 수 있습니다. 또한 페이지에는 하나 이상의 UpdatePanel 컨트롤이 포함되어야 합니다.

디버그 도우미 클래스

ASP.NET에서는 클라이언트 응용 프로그램 디버깅을 위한 Sys.Debug 클래스를 제공합니다. Sys.Debug 클래스의 메서드를 호출하여 페이지 끝에서 읽을 수 있는 형식으로 개체를 표시하고, 추적 메시지를 표시하고, 어설션을 사용하고, 실행을 중단하고 디버거를 시작할 수 있습니다.

Visual Studio 및 Internet Explorer를 사용하는 경우 Visual Studio 디버거를 브라우저에 연결하고 출력 창에서 디버거 추적 메시지를 볼 수 있습니다. Visual Studio를 사용하지 않는 경우에는 페이지에 textarea 요소를 만들고 해당 ID를 TraceConsole로 설정하면 Internet Explorer에서 디버거 추적 메시지를 볼 수 있습니다. Mozilla Firefox에서는 확장 기능으로 제공되는 도구를 사용하여 디버거 추적 메시지를 볼 수 있습니다. Apple Safari 및 Opera 브라우저의 경우 추적 메시지는 각각의 해당 디버깅 콘솔에 표시됩니다.

다음 표에서는 Sys.Debug 클래스의 메서드를 보여 줍니다.

Sys.Debug.assert(condition, message, displayCaller)
조건을 확인하고 조건이 false이면 실행을 중단하고 디버거를 시작하라는 메시지를 사용자에게 표시합니다.
Sys.Debug.clearTrace()
TraceConsoletextarea 요소의 모든 추적 메시지를 지웁니다.
Sys.Debug.traceDump(object, name)
디버거 콘솔 및 TraceConsoletextarea 요소(사용 가능한 경우)에 개체를 덤프합니다.
Sys.Debug.fail(message)
디버거의 출력 창에 메시지를 표시한 다음 실행을 중단하고 디버거를 시작합니다.
Sys.Debug.trace(text)
디버거 콘솔 및 TraceConsoletextarea 요소(사용 가능한 경우)에 텍스트 줄을 추가합니다.

다음 예제에서는 Sys.Debug 클래스의 메서드를 호출하는 방법을 보여 줍니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

디버깅용으로 Internet Explorer 구성

기본적으로 Internet Explorer에서는 JavaScript에서 발생하는 문제를 무시합니다. 다음 절차를 수행하여 디버깅을 설정할 수 있습니다.

Internet Explorer에서 디버깅을 설정하려면

도구 메뉴에서 인터넷 옵션을 클릭합니다.
고급 탭에서 스크립트 디버깅 사용 안 함(Internet Explorer) 확인란 및 스크립트 디버깅 사용 안 함(다른 응용 프로그램) 확인란의 선택을 취소합니다.
모든 스크립트 오류에 관련된 알림 표시 확인란을 선택합니다.
오류 메시지를 표시하지 않으려면 HTTP 오류 메시지 표시 확인란의 선택을 취소합니다.

오류 메시지를 표시하도록 설정하고 서버로부터의 HTTP 500 오류 응답 길이가 513바이트 이하인 경우 Internet Explorer에서 콘텐츠를 마스킹합니다. Internet Explorer에서는 오류 정보를 대신해서 개발자가 아닌 최종 사용자를 위한 메시지를 표시합니다.

Internet Explorer에 Visual Studio 디버거 연결

클라이언트 스크립트를 디버깅하려면 Internet Explorer에 디버거를 연결해야 합니다. Visual Studio에서 F5 키를 누르거나 디버그 메뉴에서 디버깅 시작 명령을 사용하여 디버깅을 위해 응용 프로그램을 시작하면 디버거가 자동으로 연결됩니다.

또한 응용 프로그램이 이미 실행 중인 경우 Internet Explorer에 Visual Studio 디버거를 연결할 수 있습니다. 이렇게 하려면 디버그 메뉴에서 **프로세스에 연결...**을 클릭합니다. 프로세스에 연결 대화 상자에서 디버거를 연결할 Internet Explorer(iexplore.exe) 인스턴스를 선택합니다.

참고:
Internet Explorer를 디버깅용으로 구성하면 Internet Explorer의 관련 인스턴스에 대한 형식 열에 스크립트, x86이 표시됩니다. 형식 열에 x86만 표시되면 Internet Explorer가 디버깅용으로 구성되었는지 확인합니다.

Internet Explorer에 스크립트 오류가 발생하고 Internet Explorer가 스크립트 디버깅용으로 구성되어 있지만 현재 디버거에 연결되지 않은 경우 브라우저에서는 디버거를 선택하라는 메시지를 사용자에게 표시합니다. 디버깅 없이 계속하거나 디버거를 연결하고 코드를 단계적으로 실행할 수 있습니다.

Internet Explorer의 알려진 디버깅 문제 및 해결 방법

Internet Explorer를 사용하는 ASP.NET AJAX 응용 프로그램을 디버깅할 때 다음과 같은 문제 및 해결 방법에 주의하십시오.

Visual Studio 디버거가 Internet Explorer에 연결되면 스크립트 탐색기 창에서 디버깅되는 스크립트 목록을 볼 수 있습니다. 이 창을 표시하려면 디버그 메뉴에서 창을 클릭한 다음 스크립트 탐색기를 클릭합니다. ASP.NET AJAX 클라이언트 라이브러리는 서버가 ASP.NET AJAX 어셈블리에서 동적으로 생성하는 **ScriptResource.axd?...**로 시작하는 리소스로 표시됩니다. Visual Studio의 알려진 문제로 인해 파일을 열 수 없을 수 있습니다. Visual Studio에서 이러한 문제에 대한 오류 메시지를 표시하거나 파일 이름에 대한 클릭을 무시하는 경우 열린 모든 스크립트 파일을 닫습니다. 그런 다음 페이지를 열고 디버깅할 스크립트 파일을 선택할 수 있습니다.
디버거에서 ASP.NET 페이지의 JavaScript 코드를 단계적으로 실행해야 해당 페이지의 script 요소 내에 있는 JavaScript 코드에서 중단점을 설정할 수 있습니다. 이 문제를 해결하려면 호출이 속하는 함수에서 중단점을 설정하고 ASP.NET 웹 페이지의 코드를 단계적으로 실행합니다. 페이지의 JavaScript 코드 줄에서 디버거가 중지되면 정상적으로 중단점을 설정할 수 있습니다. 디버거가 ASP.NET 페이지에서 스크립트를 인식하는 다른 방법은 Sys.Debug.fail 메서드를 호출하는 ASP.NET 페이지 파일에서 메서드를 만드는 것입니다. 이 메서드를 호출하면 디버거가 Sys.Debug.fail에 대한 호출에서 중지하고 사용자가 다른 곳에서 중단점을 설정할 수 있습니다. 세 번째 다른 방법은 모든 사용자 지정 코드를 외부 JavaScript 파일에 두는 것입니다.
Visual Studio를 사용하면 ASP.NET에서 AJAX 라이브러리에 사용하는 익명 메서드의 첫째 줄이 아닌 일반적인 JavaScript 함수의 첫째 줄에 중단점을 설정할 수 있습니다. 익명 메서드에 코드 한 줄만 포함되어 있거나 사용자가 익명 메서드의 첫 번째 줄에서 중단점을 설정해야 하는 경우에는 코드의 더미 줄을 삽입합니다. 이런 경우 메서드의 두 번째 줄에서 중단점을 설정할 수 있습니다.

IIS 7.0의 알려진 문제

Windows Vista에서 IIS 7.0을 사용하여 ASP.NET AJAX 사용 페이지를 실행하고 관리되는 파이프라인 모드가 통합으로 설정된 경우 ScriptResourceHandler 클래스를 사용하여 처리된 스크립트는 캐시되지 않습니다. 그러나 관리되는 파이프라인 모드가 기본으로 설정된 경우 스크립트가 캐시됩니다.

IIS 7.0의 관리되는 파이프라인 모드에 대한 자세한 내용은 Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode를 참조하십시오.

HTTP 트래픽 캡처

웹 응용 프로그램을 개발할 때 서버와 클라이언트 간의 HTTP 트래픽을 모니터링하는 것이 유용한 경우가 종종 있습니다. 이 작업을 수행할 수 있는 도구는 Fiddler입니다. 이 도구는 MSDN 웹 사이트의 Fiddler PowerToy 페이지에서 구할 수 있습니다. Fiddler는 모든 HTTP 트래픽을 기록하는 프록시로 실행하며 Internet Explorer 및 기타 브라우저를 지원합니다. Fiddler를 사용하면 헤더, 쿠키 및 메시지 내용을 포함하는 각 요청 및 응답을 검사할 수 있습니다.

Mozilla Firefox에서 디버깅

Mozilla Firefox는 Visual Studio 디버거와 통합되지 않습니다. 따라서 Visual Studio 디버거를 사용하여 Firefox에서 실행 중인 클라이언트 코드를 단계적으로 실행할 수 없습니다. 그러나 Firefox에서는 JavaScript 콘솔과 같은 일부 디버깅 기능을 지원합니다. 또한 디버깅 기능을 향상시킬 수 있도록 Mozilla에서 구할 수 있는 다음과 같은 확장 기능을 설치할 수 있습니다.

FireBug를 사용하면 클라이언트 스크립트를 단계적으로 실행하고 HTML DOM 요소를 검사할 수 있습니다. FireBug는 스크립트 콘솔, 명령줄 및 기타 도구도 제공합니다.
JavaScript Debugger("Venkman"이라고도 함)는 소스 코드 브라우저 및 기타 기능을 포함하는 JavaScript 디버깅 환경을 제공합니다.
Web Developer 확장 기능을 사용하면 DOM 및 CSS 스타일을 검사할 수 있습니다.

또한 Fiddler는 Firefox와 함께 작동합니다. 그러나 로컬 컴퓨터의 포트 8888에서 실행되는 프록시를 통해 HTTP 요청을 라우트하도록 Firefox를 구성해야 합니다. 자세한 내용은 Fiddler 웹 사이트의 "Configuring Clients" 페이지를 참조하십시오.

맨 위로 이동

클래스 참조

Sys.Debug 클래스
중단점을 정의하고 추적 출력을 처리하는 메서드를 제공합니다.

맨 위로 이동

참고 항목

작업

구성 요소 라이브러리에 대한 리소스 지역화 개요

개념

ASP.NET AJAX 개요

AJAX 및 클라이언트 기능 추가

Share via

AJAX 응용 프로그램 디버깅 및 추적 개요

시나리오

배경

디버깅용으로 응용 프로그램 구성

배포를 위해 응용 프로그램을 디버그 모드에서 릴리스 모드로 설정

서버에서 추적 사용

디버그 도우미 클래스

디버깅용으로 Internet Explorer 구성

Internet Explorer에서 디버깅을 설정하려면

Internet Explorer에 Visual Studio 디버거 연결

Internet Explorer의 알려진 디버깅 문제 및 해결 방법

IIS 7.0의 알려진 문제

HTTP 트래픽 캡처

Mozilla Firefox에서 디버깅

클래스 참조

참고 항목

작업

개념

추가 리소스