ASP.NET AJAX 디버깅 기능 이해

2023-06-25

코드를 디버그하는 기능은 사용 중인 기술에 관계없이 모든 개발자가 무기고에 있어야 하는 기술입니다. 많은 개발자가 Visual Studio .NET 또는 Web Developer Express를 사용하여 VB.NET 또는 C# 코드를 사용하는 ASP.NET 애플리케이션을 디버그하는 데 익숙하지만 일부 개발자는 JavaScript와 같은 클라이언트 쪽 코드를 디버깅하는 데 매우 유용하다는 것을 인식하지 못합니다. .NET 애플리케이션을 디버그하는 데 사용되는 동일한 유형의 기술을 AJAX 지원 애플리케이션 및 더 구체적으로 ASP.NET AJAX 애플리케이션에도 적용할 수 있습니다.

AJAX 애플리케이션 ASP.NET 디버깅

Dan Wahlin

코드를 디버그하는 기능은 사용 중인 기술에 관계없이 모든 개발자가 무기고에 있어야 하는 기술입니다. 사용할 수 있는 다양한 디버깅 옵션을 이해하면 프로젝트에 엄청난 시간을 절약할 수 있으며 심지어 몇 가지 골칫거리가 될 수도 있습니다. 많은 개발자가 Visual Studio .NET 또는 Web Developer Express를 사용하여 VB.NET 또는 C# 코드를 사용하는 ASP.NET 애플리케이션을 디버그하는 데 익숙하지만 일부 개발자는 JavaScript와 같은 클라이언트 쪽 코드를 디버깅하는 데 매우 유용하다는 것을 인식하지 못합니다. .NET 애플리케이션을 디버그하는 데 사용되는 동일한 유형의 기술을 AJAX 지원 애플리케이션 및 더 구체적으로 ASP.NET AJAX 애플리케이션에도 적용할 수 있습니다.

이 문서에서는 Visual Studio 2008 및 기타 여러 도구를 사용하여 AJAX 애플리케이션을 ASP.NET 디버그하여 버그 및 기타 문제를 신속하게 찾는 방법을 알아보세요. 이 토론에는 Visual Studio 2008 및 스크립트 Explorer 사용하여 코드를 단계별로 실행하고 웹 개발 도우미와 같은 다른 무료 도구를 사용하여 인터넷 Explorer 6 이상 디버깅을 사용하도록 설정하는 방법에 대한 정보가 포함됩니다. 다른 도구 없이 브라우저에서 직접 JavaScript 코드를 단계별로 실행할 수 있는 Firebug라는 확장을 사용하여 Firefox에서 AJAX 애플리케이션을 ASP.NET 디버그하는 방법도 알아봅니다. 마지막으로 추적 및 코드 어설션 문과 같은 다양한 디버깅 작업에 도움이 될 수 있는 ASP.NET AJAX 라이브러리의 클래스를 소개합니다.

인터넷 Explorer 표시된 페이지를 디버그하기 전에 디버깅을 사용하도록 설정하기 위해 수행해야 하는 몇 가지 기본 단계가 있습니다. 시작하기 위해 수행해야 하는 몇 가지 기본 설정 요구 사항을 살펴보겠습니다.

디버깅을 위한 인터넷 Explorer 구성

대부분의 사람들은 인터넷 Explorer 표시된 웹 사이트에서 발생한 JavaScript 문제를 보는 데 관심이 없습니다. 실제로 평균 사용자는 오류 메시지가 표시되면 어떻게 해야 할지 조차 모를 것입니다. 따라서 디버깅 옵션은 기본적으로 브라우저에서 해제됩니다. 그러나 디버깅을 켜고 새 AJAX 애플리케이션을 개발할 때 사용하도록 설정하는 것은 매우 간단합니다.

디버깅 기능을 사용하도록 설정하려면 인터넷 Explorer 메뉴의 도구 인터넷 옵션으로 이동하여 고급 탭을 선택합니다. 브라우징 섹션 내에서 다음 항목이 선택 취소되어 있는지 확인합니다.

스크립트 디버깅 사용 안 함(인터넷 Explorer)
스크립트 디버깅 사용 안 함(기타)

필수는 아니지만 애플리케이션을 디버그하려는 경우 페이지의 JavaScript 오류를 즉시 표시하고 명확하게 표시할 수 있습니다. "모든 스크립트 오류에 대한 알림 표시" 확인란을 선택하여 메시지 상자와 함께 모든 오류를 강제로 표시할 수 있습니다. 이는 애플리케이션을 개발하는 동안 켤 수 있는 좋은 옵션이지만 JavaScript 오류가 발생할 가능성이 매우 높기 때문에 다른 웹 사이트를 정독하는 경우 빠르게 짜증이 날 수 있습니다.

그림 1은 인터넷 Explorer 고급 대화 상자가 디버깅을 위해 올바르게 구성된 후 확인해야 하는 내용을 보여줍니다.

그림 1: 디버깅을 위한 인터넷 Explorer 구성 (전체 크기 이미지를 보려면 클릭)

디버깅이 켜져 있으면 스크립트 디버거라는 보기 메뉴에 새 메뉴 항목이 표시됩니다. 다음 문에서 열기 및 중단을 포함하여 사용할 수 있는 두 가지 옵션이 있습니다. 열기를 선택하면 Visual Studio 2008에서 페이지를 디버그하라는 메시지가 표시됩니다(Visual Web Developer Express를 디버깅에 사용할 수도 있음). Visual Studio .NET이 현재 실행 중인 경우 해당 instance 사용하거나 새 instance 만들도록 선택할 수 있습니다. 다음 문에서 중단을 선택하면 JavaScript 코드가 실행될 때 페이지를 디버그하라는 메시지가 표시됩니다. 페이지의 onLoad 이벤트에서 JavaScript 코드가 실행되는 경우 페이지를 새로 고쳐 디버그 세션을 트리거할 수 있습니다. 단추를 클릭한 후 JavaScript 코드가 실행되면 단추를 클릭한 직후 디버거가 실행됩니다.

참고

UAC(사용자 Access Control)가 사용하도록 설정된 Windows Vista에서 실행 중이고 Visual Studio 2008이 관리자 권한으로 실행되도록 설정된 경우 Visual Studio는 연결하라는 메시지가 표시되면 프로세스에 연결하지 못합니다. 이 문제를 해결하려면 먼저 Visual Studio를 시작하고 해당 instance 사용하여 디버그합니다.

다음 섹션에서는 Visual Studio 2008 내에서 직접 ASP.NET AJAX 페이지를 디버그하는 방법을 보여 주지만, 페이지가 이미 열려 있고 더 완벽하게 검사하려는 경우 인터넷 Explorer 스크립트 디버거 옵션을 사용하는 것이 유용합니다.

Visual Studio 2008을 사용하여 디버깅

Visual Studio 2008은 전 세계 개발자가 .NET 애플리케이션을 디버그하기 위해 매일 사용하는 디버깅 기능을 제공합니다. 기본 제공 디버거를 사용하면 코드를 단계별로 실행하여 개체 데이터를 보고, 특정 변수에 대한 watch 호출 스택을 모니터링하고, 훨씬 더 많은 것을 모니터링할 수 있습니다. 디버거는 VB.NET 또는 C# 코드를 디버깅하는 것 외에도 AJAX 애플리케이션을 ASP.NET 디버깅하는 데 유용하며 JavaScript 코드 줄을 한 줄씩 단계별로 실행할 수 있습니다. 이어지는 세부 정보는 Visual Studio 2008을 사용하여 애플리케이션을 디버깅하는 전체 프로세스에 대한 담론을 제공하는 대신 클라이언트 쪽 스크립트 파일을 디버그하는 데 사용할 수 있는 기술에 중점을 줍니다.

Visual Studio 2008에서 페이지를 디버깅하는 프로세스는 여러 가지 방법으로 시작할 수 있습니다. 먼저 이전 섹션에서 언급한 인터넷 Explorer 스크립트 디버거 옵션을 사용할 수 있습니다. 이는 페이지가 브라우저에 이미 로드되어 있고 디버깅을 시작하려는 경우에 잘 작동합니다. 또는 솔루션 탐색기 .aspx 페이지를 마우스 오른쪽 단추로 클릭하고 메뉴에서 시작 페이지로 설정을 선택할 수 있습니다. ASP.NET 페이지를 디버깅하는 데 익숙한 경우 이전에 이 작업을 수행했을 것입니다. F5 키를 누르면 페이지를 디버그할 수 있습니다. 그러나 일반적으로 VB.NET 또는 C# 코드에서 원하는 모든 위치에서 중단점을 설정할 수 있지만, 다음에 표시되는 JavaScript의 경우는 그렇지 않습니다.

포함된 스크립트와 외부 스크립트

Visual Studio 2008 디버거는 외부 JavaScript 파일과 다른 페이지에 포함된 JavaScript를 처리합니다. 외부 스크립트 파일을 사용하면 파일을 열고 선택한 줄에 중단점을 설정할 수 있습니다. 코드 편집기 창의 왼쪽에 있는 회색 트레이 영역을 클릭하여 중단점을 설정할 수 있습니다. JavaScript가 태그를 사용하여 <script> 페이지에 직접 포함된 경우 회색 트레이 영역을 클릭하여 중단점을 설정하는 것은 옵션이 아닙니다. 포함된 스크립트 줄에 중단점을 설정하려고 하면 "중단점에 대한 유효한 위치가 아닙니다"라는 경고가 표시됩니다.

코드를 외부 .js 파일로 이동하고 스크립트> 태그의 <src 특성을 사용하여 참조하여 이 문제를 해결할 수 있습니다.

<script type="text/javascript" src="Scripts/YourScript.js"></script>

코드를 외부 파일로 이동하는 것이 옵션이 아니거나 가치가 있는 것보다 더 많은 작업이 필요한 경우 어떻게 해야 할까요? 편집기를 사용하여 중단점을 설정할 수는 없지만 디버깅을 시작하려는 코드에 디버거 문을 직접 추가할 수 있습니다. ASP.NET AJAX 라이브러리에서 사용할 수 있는 Sys.Debug 클래스를 사용하여 디버깅을 강제로 시작할 수도 있습니다. 이 문서의 뒷부분에 있는 Sys.Debug 클래스에 대해 자세히 알아봅니다.

키워드(keyword) 사용하는 debugger 예제는 목록 1에 나와 있습니다. 이 예제에서는 업데이트 함수를 호출하기 전에 디버거가 강제로 중단됩니다.

목록 1. 디버거 키워드(keyword) 사용하여 Visual Studio .NET 디버거가 강제로 중단됩니다.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

디버거 문이 적중되면 Visual Studio .NET을 사용하여 페이지를 디버그하라는 메시지가 표시되고 코드를 단계별로 실행할 수 있습니다. 이 작업을 수행하는 동안 페이지에서 사용되는 ASP.NET AJAX 라이브러리 스크립트 파일에 액세스하는 데 문제가 발생할 수 있으므로 Visual Studio 를 사용하여 살펴보겠습니다. NET의 스크립트 Explorer.

Visual Studio .NET Windows를 사용하여 디버그

디버그 세션이 시작되고 기본 F11 키를 사용하여 코드 탐색을 시작하면 페이지에 사용된 모든 스크립트 파일이 열려 있고 디버깅에 사용할 수 없는 한 그림 2에 표시된 오류 대화 상자가 표시될 수 있습니다.

그림 2: 디버깅에 사용할 수 있는 소스 코드가 없는 경우 표시되는 오류 대화 상자입니다. (전체 크기 이미지를 보려면 클릭)

이 대화 상자는 Visual Studio .NET이 페이지에서 참조하는 일부 스크립트의 소스 코드를 가져오는 방법을 잘 모르기 때문에 표시됩니다. 처음에는 매우 실망스러울 수 있지만 간단한 수정 사항이 있습니다. 디버그 세션을 시작하고 중단점에 도달하면 Visual Studio 2008 메뉴의 Windows 스크립트 Explorer 디버그 창으로 이동하거나 Ctrl+Alt+N 바로 가기 키를 사용합니다.

참고

스크립트 Explorer 메뉴가 표시되지 않으면 Visual Studio .NET 메뉴에서 도구>사용자 지정>명령으로 이동합니다. 범주 섹션에서 디버그 항목을 찾아서 클릭하여 사용 가능한 모든 메뉴 항목을 표시합니다. 명령 목록에서 스크립트 Explorer 아래로 스크롤한 다음 앞에서 언급한 디버그 Windows 메뉴로 끌어옵니다. 이렇게 하면 Visual Studio .NET을 실행할 때마다 스크립트 Explorer 메뉴 항목을 사용할 수 있습니다.

스크립트 Explorer 사용하여 페이지에서 사용되는 모든 스크립트를 보고 코드 편집기에서 열 수 있습니다. 스크립트 Explorer 열려면 현재 디버그 중인 .aspx 페이지를 두 번 클릭하여 코드 편집기 창에서 엽니다. 스크립트 Explorer 표시된 다른 모든 스크립트에 대해 동일한 작업을 수행합니다. 모든 스크립트가 코드 창에서 열리면 F11 키를 누르고 다른 디버그 바로 가기 키를 사용하여 코드를 단계별로 실행할 수 있습니다. 그림 3에서는 스크립트 Explorer 예제를 보여 있습니다. 디버깅 중인 현재 파일(Demo.aspx)과 두 개의 사용자 지정 스크립트 및 ASP.NET AJAX ScriptManager에 의해 페이지에 동적으로 삽입된 두 개의 스크립트가 나열됩니다.

그림 3. 스크립트 Explorer 페이지에서 사용되는 스크립트에 쉽게 액세스할 수 있습니다. (전체 크기 이미지를 보려면 클릭)

다른 여러 창은 페이지에서 코드를 단계별로 실행할 때 유용한 정보를 제공하는 데 사용할 수도 있습니다. 예를 들어 Locals 창을 사용하여 페이지에 사용되는 다양한 변수의 값을 볼 수 있습니다. 직접 실행 창은 특정 변수 또는 조건을 평가하고 출력을 볼 수 있습니다. 출력 창을 사용하여 Sys.Debug.trace 함수(이 문서의 뒷부분에서 다룰 예정) 또는 인터넷 Explorer Debug.writeln 함수를 사용하여 작성된 추적 문을 볼 수도 있습니다.

디버거를 사용하여 코드를 단계별로 실행하면 코드의 변수를 마우스로 이동하여 할당된 값을 볼 수 있습니다. 그러나 지정된 JavaScript 변수 위로 마우스를 가져가면 스크립트 디버거에 아무 것도 표시되지 않는 경우도 있습니다. 값을 보려면 코드 편집기 창에서 보려는 문 또는 변수를 강조 표시한 다음 마우스로 덮습니다. 이 기술은 모든 상황에서는 작동하지 않지만 지역 창과 같은 다른 디버그 창에서 볼 필요 없이 값을 볼 수 있는 경우가 많습니다.

여기에 설명된 기능 중 일부를 보여 주는 비디오 자습서는 에서 http://www.xmlforasp.net볼 수 있습니다.

웹 개발 도우미를 사용하여 디버깅

Visual Studio 2008(및 Visual Web Developer Express 2008)은 매우 지원되는 디버깅 도구이지만 더 가벼운 옵션도 사용할 수 있습니다. 릴리스할 최신 도구 중 하나는 웹 개발 도우미입니다. Microsoft의 Nikhil Kothari(Microsoft의 AJAX 설계자 ASP.NET 핵심 중 하나)는 간단한 디버깅에서 HTTP 요청 및 응답 메시지 보기에 이르기까지 다양한 작업을 수행할 수 있는 이 훌륭한 도구를 작성했습니다.

웹 개발 도우미는 인터넷 Explorer 바로 내부에서 사용할 수 있으므로 편리하게 사용할 수 있습니다. 인터넷 Explorer 메뉴에서 도구 웹 개발 도우미를 선택하여 시작합니다. 이렇게 하면 브라우저의 아래쪽 부분에 도구가 열립니다. HTTP 요청 및 응답 메시지 로깅과 같은 여러 작업을 수행하기 위해 브라우저를 떠날 필요가 없기 때문에 좋습니다. 그림 4는 웹 개발 도우미의 동작을 보여줍니다.

그림 4: 웹 개발 도우미(전체 크기 이미지를 보려면 클릭)

웹 개발 도우미는 Visual Studio 2008과 같이 코드 줄을 한 줄씩 단계별로 진행하는 데 사용할 도구가 아닙니다. 그러나 추적 출력을 보거나, 스크립트에서 변수를 쉽게 평가하거나, JSON 개체 내에 있는 데이터를 탐색하는 데 사용할 수 있습니다. 또한 ASP.NET AJAX 페이지 및 서버로 전달되는 데이터를 보는 데 매우 유용합니다.

인터넷 Explorer 웹 개발 도우미가 열리면 그림 4의 앞부분과 같이 웹 개발 도우미 메뉴에서 스크립트 디버깅 사용을 선택하여 스크립트 디버깅을 사용하도록 설정해야 합니다. 이렇게 하면 도구가 페이지 실행 시 발생하는 오류를 가로챌 수 있습니다. 또한 페이지에서 출력되는 메시지를 쉽게 추적할 수 있습니다. 추적 정보를 보거나 스크립트 명령을 실행하여 페이지 내에서 다른 함수를 테스트하려면 웹 개발 도우미 메뉴에서 스크립트 콘솔 표시를 선택합니다. 이렇게 하면 명령 창 및 간단한 직접 실행 창에 액세스할 수 있습니다.

추적 메시지 및 JSON 개체 데이터 보기

직접 실행 창은 스크립트 명령을 실행하거나 페이지에서 다른 함수를 테스트하는 데 사용되는 스크립트를 로드하거나 저장하는 데 사용할 수 있습니다. 명령 창에는 표시되는 페이지에서 작성한 추적 또는 디버그 메시지가 표시됩니다. 목록 2에서는 Internet Explorer Debug.writeln 함수를 사용하여 추적 메시지를 작성하는 방법을 보여 줍니다.

목록 2. Debug 클래스를 사용하여 클라이언트 쪽 추적 메시지를 작성합니다.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

LastName 속성에 Doe 값이 포함된 경우 웹 개발 도우미는 스크립트 콘솔의 명령 창에 "사람 이름: Doe" 메시지를 표시합니다(디버깅이 사용하도록 설정된 것으로 가정). 또한 웹 개발 도우미는 추적 정보를 작성하거나 JSON 개체의 콘텐츠를 보는 데 사용할 수 있는 최상위 debugService 개체를 페이지에 추가합니다. 목록 3은 debugService 클래스의 추적 함수를 사용하는 예제를 보여 줍니다.

목록 3. 웹 개발 도우미의 debugService 클래스를 사용하여 추적 메시지를 작성합니다.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

debugService 클래스의 좋은 기능은 웹 개발 도우미가 실행 중일 때 추적 데이터에 항상 쉽게 액세스할 수 있도록 하는 Explorer 인터넷에서 디버깅을 사용하도록 설정되지 않은 경우에도 작동한다는 것입니다. 도구를 사용하여 페이지를 디버그하지 않으면 window.debugService에 대한 호출이 false를 반환하므로 추적 문이 무시됩니다.

debugService 클래스를 사용하면 웹 개발 도우미의 검사기 창을 사용하여 JSON 개체 데이터를 볼 수도 있습니다. 목록 4는 사람 데이터를 포함하는 간단한 JSON 개체를 만듭니다. 개체가 만들어지면 JSON 개체를 시각적으로 검사할 수 있도록 debugService 클래스의 검사 함수를 호출합니다.

목록 4. debugService.inspect 함수를 사용하여 JSON 개체 데이터를 봅니다.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

페이지 또는 직접 실행 창을 통해 GetPerson() 함수를 호출하면 그림 5와 같이 개체 검사기 대화 상자 창이 나타납니다. 개체 내의 속성은 강조 표시하고 값 텍스트 상자에 표시된 값을 변경한 다음 업데이트 링크를 클릭하여 동적으로 변경할 수 있습니다. 개체 검사기를 사용하면 JSON 개체 데이터를 쉽게 보고 속성에 다른 값을 적용하여 실험할 수 있습니다.

디버깅 오류

웹 개발 도우미는 추적 데이터 및 JSON 개체를 표시할 수 있는 것 외에도 페이지의 디버깅 오류를 도울 수 있습니다. 오류가 발생하면 다음 코드 줄로 계속 진행하거나 스크립트를 디버그하라는 메시지가 표시됩니다(그림 6 참조). 스크립트 오류 대화 상자 창에는 전체 호출 스택과 줄 번호가 표시되므로 스크립트 내에서 문제가 있는 위치를 쉽게 식별할 수 있습니다.

그림 5: 개체 검사기 창을 사용하여 JSON 개체를 봅니다. (전체 크기 이미지를 보려면 클릭)

디버그 옵션을 선택하면 웹 개발 도우미의 직접 창에서 스크립트 문을 직접 실행하여 변수 값을 보고 JSON 개체를 작성하는 등의 작업을 수행할 수 있습니다. 오류를 트리거한 동일한 작업이 다시 수행되고 머신에서 Visual Studio 2008을 사용할 수 있는 경우 이전 섹션에서 설명한 대로 코드 줄을 한 줄씩 단계별로 실행할 수 있도록 디버그 세션을 시작하라는 메시지가 표시됩니다.

그림 6: 웹 개발 도우미의 스크립트 오류 대화 상자(전체 크기 이미지를 보려면 클릭)

요청 및 응답 메시지 검사

AJAX 페이지를 ASP.NET 디버깅하는 동안 페이지와 서버 간에 전송된 요청 및 응답 메시지를 보는 것이 유용한 경우가 많습니다. 메시지 내의 콘텐츠를 보면 적절한 데이터가 전달되고 있는지와 메시지 크기를 확인할 수 있습니다. 웹 개발 도우미는 데이터를 원시 텍스트 또는 더 읽기 쉬운 형식으로 쉽게 볼 수 있는 뛰어난 HTTP 메시지 로거 기능을 제공합니다.

ASP.NET AJAX 요청 및 응답 메시지를 보려면 웹 개발 도우미 메뉴에서 HTTP 로깅 사용을 선택하여 HTTP 로거를 사용하도록 설정해야 합니다. 사용하도록 설정되면 HTTP 로그 표시를 선택하여 액세스할 수 있는 HTTP 로그 뷰어에서 현재 페이지에서 보낸 모든 메시지를 볼 수 있습니다.

각 요청/응답 메시지에서 전송된 원시 텍스트를 보는 것은 확실히 유용하지만(웹 개발 도우미의 옵션) 메시지 데이터를 더 그래픽 형식으로 보는 것이 더 쉬운 경우가 많습니다. HTTP 로깅을 사용하도록 설정하고 메시지가 기록되면 HTTP 로그 뷰어에서 메시지를 두 번 클릭하여 메시지 데이터를 볼 수 있습니다. 이렇게 하면 메시지와 연결된 모든 헤더와 실제 메시지 콘텐츠를 볼 수 있습니다. 그림 7은 HTTP 로그 뷰어 창에 표시된 요청 메시지 및 응답 메시지의 예를 보여줍니다.

그림 7: HTTP 로그 뷰어를 사용하여 요청 및 응답 메시지 데이터를 봅니다. (전체 크기 이미지를 보려면 클릭)

HTTP 로그 뷰어는 JSON 개체를 자동으로 구문 분석하고 트리 뷰를 사용하여 표시하므로 개체의 속성 데이터를 빠르고 쉽게 볼 수 있습니다. ASP.NET AJAX 페이지에서 UpdatePanel을 사용하는 경우 뷰어는 그림 8과 같이 메시지의 각 부분을 개별 부분으로 분할합니다. 이 기능은 원시 메시지 데이터를 보는 것보다 메시지의 내용을 훨씬 쉽게 보고 이해할 수 있는 훌륭한 기능입니다.

그림 8: HTTP 로그 뷰어를 사용하여 본 UpdatePanel 응답 메시지입니다. (전체 크기 이미지를 보려면 클릭)

웹 개발 도우미 외에도 요청 및 응답 메시지를 보는 데 사용할 수 있는 몇 가지 다른 도구가 있습니다. 또 다른 좋은 옵션은 에서 http://www.fiddlertool.com무료로 사용할 수 있는 Fiddler입니다. Fiddler는 여기서 설명하지 않지만 메시지 헤더 및 데이터를 철저히 검사해야 하는 경우에도 좋은 옵션입니다.

Firefox 및 Firebug를 사용하여 디버깅

인터넷 Explorer 여전히 가장 널리 사용되는 브라우저이지만 Firefox와 같은 다른 브라우저는 매우 인기가 있으며 점점 더 많이 사용되고 있습니다. 따라서 Firefox의 ASP.NET AJAX 페이지와 인터넷 Explorer 보고 디버그하여 애플리케이션이 제대로 작동하는지 확인해야 합니다. Firefox는 디버깅을 위해 Visual Studio 2008에 직접 연결할 수는 없지만 페이지를 디버그하는 데 사용할 수 있는 Firebug라는 확장이 있습니다. Firebug는 로 이동하여 http://www.getfirebug.com무료로 다운로드할 수 있습니다.

Firebug는 코드 줄을 한 줄씩 단계별로 실행하고, 페이지 내에서 사용되는 모든 스크립트에 액세스하고, DOM 구조를 보고, CSS 스타일을 표시하고, 페이지에서 발생하는 이벤트를 추적하는 데 사용할 수 있는 완전한 기능을 갖춘 디버깅 환경을 제공합니다. 설치되면 Firefox 메뉴에서 도구 Firebug Firebug 열기를 선택하여 Firebug에 액세스할 수 있습니다. 웹 개발 도우미와 마찬가지로 Firebug는 독립 실행형 애플리케이션으로도 사용할 수 있지만 브라우저에서 직접 사용됩니다.

Firebug가 실행되면 스크립트가 페이지에 포함되어 있는지 여부에 관계없이 JavaScript 파일의 모든 줄에서 중단점을 설정할 수 있습니다. 중단점을 설정하려면 먼저 Firefox에서 디버그하려는 적절한 페이지를 로드합니다. 페이지가 로드되면 Firebug의 스크립트 드롭다운 목록에서 디버그할 스크립트를 선택합니다. 페이지에서 사용하는 모든 스크립트가 표시됩니다. 중단점은 Visual Studio 2008에서와 같이 중단점이 이동해야 하는 줄에서 Firebug의 회색 트레이 영역을 클릭하여 설정합니다.

Firebug에서 중단점이 설정되면 단추를 클릭하거나 브라우저를 새로 고쳐 onLoad 이벤트를 트리거하는 등 디버그해야 하는 스크립트를 실행하는 데 필요한 작업을 수행할 수 있습니다. 중단점이 포함된 줄에서 실행이 자동으로 중지됩니다. 그림 9는 Firebug에서 트리거된 중단점의 예를 보여줍니다.

그림 9: Firebug에서 중단점 처리 (전체 크기 이미지를 보려면 클릭)

중단점이 적중되면 화살표 단추를 사용하여 코드를 한 단계씩 실행하거나 코드에서 한 단계씩 실행할 수 있습니다. 코드를 단계별로 실행하면 디버거의 오른쪽 부분에 스크립트 변수가 표시되므로 값을 보고 개체로 드릴다운할 수 있습니다. Firebug에는 현재 줄이 디버그되는 스크립트의 실행 단계를 볼 수 있는 호출 스택 드롭다운 목록도 포함되어 있습니다.

Firebug에는 다른 스크립트 문을 테스트하고, 변수를 평가하고, 추적 출력을 보는 데 사용할 수 있는 콘솔 창도 포함되어 있습니다. Firebug 창 위쪽의 콘솔 탭을 클릭하여 액세스합니다. 디버깅 중인 페이지는 검사 탭을 클릭하여 DOM 구조 및 내용을 확인하기 위해 "검사"할 수도 있습니다. 검사기 창에 표시된 다양한 DOM 요소 위로 마우스를 가져가면 페이지의 적절한 부분이 강조 표시되므로 페이지에서 요소가 사용되는 위치를 쉽게 확인할 수 있습니다. 지정된 요소와 연결된 특성 값을 "라이브"로 변경하여 다양한 너비, 스타일 등을 적용하는 실험을 수행할 수 있습니다. 을 요소에 연결합니다. 이는 간단한 변경 내용이 페이지에 미치는 영향을 보기 위해 소스 코드 편집기와 Firefox 브라우저 간에 지속적으로 전환할 필요가 없도록 하는 좋은 기능입니다.

그림 10에서는 DOM 검사기를 사용하여 페이지에서 txtCountry라는 텍스트 상자를 찾는 예제를 보여 줍니다. Firebug 검사기를 사용하여 페이지에서 사용되는 CSS 스타일뿐만 아니라 마우스 이동 추적, 단추 클릭 등과 같은 이벤트가 발생할 수도 있습니다.

그림 10: Firebug의 DOM 검사기 사용. (전체 크기 이미지를 보려면 클릭)

Firebug는 Firefox에서 직접 페이지를 신속하게 디버그하는 가벼운 방법뿐만 아니라 페이지 내의 다양한 요소를 검사하는 훌륭한 도구를 제공합니다.

ASP.NET AJAX의 디버깅 지원

ASP.NET AJAX 라이브러리에는 웹 페이지에 AJAX 기능을 추가하는 프로세스를 간소화하는 데 사용할 수 있는 다양한 클래스가 포함되어 있습니다. 이러한 클래스를 사용하여 페이지 내에서 요소를 찾고 조작하고, 새 컨트롤을 추가하고, Web Services를 호출하고, 이벤트를 처리할 수 있습니다. ASP.NET AJAX 라이브러리에는 페이지 디버깅 프로세스를 향상시키는 데 사용할 수 있는 클래스도 포함되어 있습니다. 이 섹션에서는 Sys.Debug 클래스를 소개하고 애플리케이션에서 사용할 수 있는 방법을 알아보세요.

Sys.Debug 클래스 사용

Sys.Debug 클래스(Sys 네임스페이스에 있는 JavaScript 클래스)를 사용하여 추적 출력 작성, 코드 어설션 수행, 디버그할 수 있도록 코드 강제 실패 등 다양한 함수를 수행할 수 있습니다. ASP.NET AJAX 라이브러리의 디버그 파일(C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLi에 설치됨)에서 광범위하게 사용됩니다.brary\System.Web.Extensions\1.0.61025.0은 기본적으로 조건부 테스트(어설션이라고 함)를 수행하여 매개 변수가 함수에 제대로 전달되고 개체에 예상 데이터가 포함되고 추적 문을 작성하도록 합니다.

Sys.Debug 클래스는 표 1과 같이 추적, 코드 어설션 또는 오류를 처리하는 데 사용할 수 있는 여러 가지 함수를 노출합니다.

표 1. Sys.Debug 클래스 함수입니다.

함수 이름	설명
assert(condition, message, displayCaller)	조건 매개 변수가 true임을 어설션합니다. 테스트 중인 조건이 false이면 메시지 상자가 메시지 매개 변수 값을 표시하는 데 사용됩니다. displayCaller 매개 변수가 true이면 메서드는 호출자에 대한 정보도 표시합니다.
clearTrace()	추적 작업에서 문 출력을 지웁니다.
fail(message)	프로그램이 실행을 중지하고 디버거에 침입하도록 합니다. 메시지 매개 변수를 사용하여 실패 이유를 제공할 수 있습니다.
trace(message)	메시지 매개 변수를 추적 출력에 씁니다.
traceDump(object, name)	개체의 데이터를 읽을 수 있는 형식으로 출력합니다. name 매개 변수를 사용하여 추적 덤프에 대한 레이블을 제공할 수 있습니다. 덤프되는 개체 내의 모든 하위 개체는 기본적으로 기록됩니다.

클라이언트 쪽 추적은 ASP.NET 사용할 수 있는 추적 기능과 거의 동일한 방식으로 사용할 수 있습니다. 애플리케이션 흐름을 방해하지 않고도 다양한 메시지를 쉽게 볼 수 있습니다. 목록 5는 Sys.Debug.trace 함수를 사용하여 추적 로그에 쓰는 예제를 보여 줍니다. 이 함수는 매개 변수로 작성해야 하는 메시지를 사용합니다.

목록 5. Sys.Debug.trace 함수를 사용합니다.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

목록 5에 표시된 코드를 실행하면 페이지에 추적 출력이 표시되지 않습니다. 유일한 방법은 Visual Studio .NET, 웹 개발 도우미 또는 Firebug에서 사용할 수 있는 콘솔 창을 사용하는 것입니다. 페이지에서 추적 출력을 보려면 TextArea 태그를 추가하고 다음과 같이 TraceConsole ID를 지정해야 합니다.

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

페이지의 모든 Sys.Debug.trace 문은 TraceConsole TextArea에 기록됩니다.

JSON 개체 내에 포함된 데이터를 보려는 경우 Sys.Debug 클래스의 traceDump 함수를 사용할 수 있습니다. 이 함수는 추적 콘솔에 덤프해야 하는 개체와 추적 출력에서 개체를 식별하는 데 사용할 수 있는 이름을 포함하여 두 개의 매개 변수를 사용합니다. 목록 6은 traceDump 함수를 사용하는 예제를 보여 줍니다.

목록 6. Sys.Debug.traceDump 함수를 사용합니다.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

그림 11은 Sys.Debug.traceDump 함수를 호출한 출력을 보여 줍니다. Person 개체의 데이터를 작성하는 것 외에도 Address 하위 개체의 데이터도 기록합니다.

추적 외에도 Sys.Debug 클래스를 사용하여 코드 어설션을 수행할 수도 있습니다. 어설션은 애플리케이션이 실행되는 동안 특정 조건이 충족되는지 테스트하는 데 사용됩니다. ASP.NET AJAX 라이브러리 스크립트의 디버그 버전에는 다양한 조건을 테스트하기 위한 여러 assert 문이 포함되어 있습니다.

목록 7은 Sys.Debug.assert 함수를 사용하여 조건을 테스트하는 예제를 보여 줍니다. 이 코드는 Person 개체를 업데이트하기 전에 Address 개체가 null인지 여부를 테스트합니다.

그림 11: Sys.Debug.traceDump 함수의 출력입니다. (전체 크기 이미지를 보려면 클릭)

목록 7. debug.assert 함수 사용.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

평가할 조건, 어설션이 false를 반환하는지 여부 및 호출자에 대한 정보를 표시해야 하는지 여부를 표시하는 메시지를 포함하여 세 개의 매개 변수가 전달됩니다. 어설션이 실패하는 경우 세 번째 매개 변수가 true인 경우 메시지와 호출자 정보가 표시됩니다. 그림 12에서는 목록 7에 표시된 어설션이 실패할 경우 나타나는 실패 대화 상자의 예를 보여 줍니다.

처리할 마지막 함수는 Sys.Debug.fail입니다. 스크립트의 특정 줄에서 코드가 강제로 실패하도록 하려는 경우 일반적으로 JavaScript 애플리케이션에서 사용되는 디버거 문 대신 Sys.Debug.fail 호출을 추가할 수 있습니다. Sys.Debug.fail 함수는 다음과 같이 실패 이유를 나타내는 단일 문자열 매개 변수를 허용합니다.

Sys.Debug.fail("My forced failure of script.");

그림 12: Sys.Debug.assert 실패 메시지입니다. (전체 크기 이미지를 보려면 클릭)

스크립트가 실행되는 동안 Sys.Debug.fail 문이 발견되면 메시지 매개 변수의 값이 Visual Studio 2008과 같은 디버그 애플리케이션의 콘솔에 표시되고 애플리케이션을 디버그하라는 메시지가 표시됩니다. 이는 인라인 스크립트에서 Visual Studio 2008로 중단점을 설정할 수 없지만 변수 값을 검사할 수 있도록 특정 줄에서 코드를 중지하려는 경우에 매우 유용할 수 있습니다.

ScriptManager 컨트롤의 ScriptMode 속성 이해

ASP.NET AJAX 라이브러리에는 기본적으로 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0에 설치된 디버그 및 릴리스 스크립트 버전이 포함되어 있습니다. 디버그 스크립트는 형식이 잘 지정되고 읽기 쉽고 여러 Sys.Debug.assert 호출이 그 전체에 분산되어 있으며, 릴리스 스크립트는 공백을 제거하고 Sys.Debug 클래스를 아쉽게 사용하여 전체 크기를 최소화합니다.

ASP.NET AJAX 페이지에 추가된 ScriptManager 컨트롤은 web.config 컴파일 요소의 디버그 특성을 읽고 로드할 라이브러리 스크립트 버전을 결정합니다. 그러나 ScriptMode 속성을 변경하여 디버그 또는 릴리스 스크립트가 로드되는지(라이브러리 스크립트 또는 사용자 고유의 사용자 지정 스크립트)를 제어할 수 있습니다. ScriptMode는 멤버에 자동, 디버그, 릴리스 및 상속이 포함된 ScriptMode 열거형을 허용합니다.

ScriptMode는 기본적으로 Auto 값으로 설정되며, 이는 ScriptManager가 web.config 디버그 특성을 검사 것을 의미합니다. 디버그가 false이면 ScriptManager는 ASP.NET AJAX 라이브러리 스크립트의 릴리스 버전을 로드합니다. 디버그가 true이면 스크립트의 디버그 버전이 로드됩니다. ScriptMode 속성을 Release 또는 Debug로 변경하면 scriptManager가 web.config 디버그 특성의 값에 관계없이 적절한 스크립트를 로드하도록 강제합니다. 목록 8은 ScriptManager 컨트롤을 사용하여 ASP.NET AJAX 라이브러리에서 디버그 스크립트를 로드하는 예제를 보여 줍니다.

목록 8. ScriptManager를 사용하여 디버그 스크립트 로드.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

또한 목록 9에 표시된 대로 ScriptManager의 Scripts 속성과 ScriptReference 구성 요소를 사용하여 사용자 고유의 사용자 지정 스크립트의 다른 버전(디버그 또는 릴리스)을 로드할 수도 있습니다.

목록 9. ScriptManager를 사용하여 사용자 지정 스크립트 로드

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

참고

ScriptReference 구성 요소를 사용하여 사용자 지정 스크립트를 로드하는 경우 스크립트의 맨 아래에 다음 코드를 추가하여 스크립트 로드가 완료되면 ScriptManager에 알려야 합니다.

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

목록 9에 표시된 코드는 ScriptManager에 Person 스크립트의 디버그 버전을 찾도록 지시하므로 Person.js 대신 Person.debug.js 자동으로 찾습니다. Person.debug.js 파일을 찾을 수 없으면 오류가 발생합니다.

ScriptManager 컨트롤에 설정된 ScriptMode 속성 값에 따라 사용자 지정 스크립트의 디버그 또는 릴리스 버전을 로드하려는 경우 ScriptReference 컨트롤의 ScriptMode 속성을 상속으로 설정할 수 있습니다. 이렇게 하면 목록 10에 표시된 대로 ScriptManager의 ScriptMode 속성에 따라 적절한 버전의 사용자 지정 스크립트가 로드됩니다. ScriptManager 컨트롤의 ScriptMode 속성이 디버그로 설정되어 있으므로 Person.debug.js 스크립트가 로드되고 페이지에서 사용됩니다.

목록 10. 사용자 지정 스크립트에 대한 ScriptManager에서 ScriptMode를 상속합니다.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

ScriptMode 속성을 적절하게 사용하면 애플리케이션을 보다 쉽게 디버그하고 전체 프로세스를 간소화할 수 있습니다. 디버그 스크립트가 디버깅을 위해 특별히 형식이 지정되는 동안 코드 서식이 제거되었으므로 ASP.NET AJAX 라이브러리의 릴리스 스크립트는 단계별 실행 및 읽기가 다소 어렵습니다.

결론

Microsoft의 ASP.NET AJAX 기술은 최종 사용자의 전반적인 환경을 향상시킬 수 있는 AJAX 지원 애플리케이션을 빌드하기 위한 견고한 기반을 제공합니다. 그러나 모든 프로그래밍 기술과 마찬가지로 버그 및 기타 애플리케이션 문제가 확실히 발생합니다. 사용 가능한 다양한 디버깅 옵션을 알면 많은 시간을 절약하고 보다 안정적인 제품을 만들 수 있습니다.

이 문서에서는 Visual Studio 2008, 웹 개발 도우미 및 Firebug를 사용한 인터넷 Explorer 포함하여 ASP.NET AJAX 페이지를 디버깅하는 여러 가지 기술을 소개했습니다. 이러한 도구는 변수 데이터에 액세스하고, 코드 줄을 따라 안내하고, 추적 문을 볼 수 있으므로 전체 디버깅 프로세스를 간소화할 수 있습니다. 설명된 다양한 디버깅 도구 외에도 애플리케이션에서 ASP.NET AJAX 라이브러리의 Sys.Debug 클래스를 사용하는 방법과 ScriptManager 클래스를 사용하여 스크립트의 디버그 또는 릴리스 버전을 로드하는 방법도 알아보았습니다.

사용자 정보

Dan Wahlin(ASP.NET 및 XML Web Services용 Microsoft Most Valuable Professional)은 인터페이스 기술 교육(www.interfacett.com)의 .NET 개발 강사 및 아키텍처 컨설턴트입니다. Dan은 ASP.NET Developers 웹 사이트(www.XMLforASP.NET)를 위한 XML을 설립했으며, INETA 스피커의 국에 있으며 여러 컨퍼런스에서 연설하고 있습니다. Dan이 공동 저술한 Professional Windows DNA(Wrox), ASP.NET: 팁, 자습서 및 코드(Sams), ASP.NET 1.1 참가자 솔루션, Professional ASP.NET 2.0 AJAX(Wrox), ASP.NET 2.0 MVP Hacks 및 ASP.NET Developers(Sams)를 위한 XML 작성 코드, 기사 또는 책을 쓰지 않을 때 댄은 음악을 쓰고 녹음하고 아내와 아이들과 골프와 농구를 하는 것을 즐깁니다.

Scott Cate은 1997년부터 Microsoft 웹 기술과 함께 일해 왔으며 myKB.com(www.myKB.com)의 사장으로 기술 자료 소프트웨어 솔루션에 중점을 둔 ASP.NET 기반 애플리케이션을 작성하는 일을 전문으로 합니다. Scott은 이메일 scott.cate@myKB.com 또는 ScottCate.com 블로그를 통해 연락할 수 있습니다.