연습: Visual Web Developer에서 웹 페이지 디버깅

아티클
08/20/2008

업데이트: 2007년 11월

Visual Web Developer에서는 ASP.NET 웹 페이지에서 오류를 추적할 수 있는 도구를 제공합니다. 이 연습에서는 페이지 코드 줄을 한 줄씩 진행하며 변수 값을 검사할 수 있는 디버거를 사용합니다.

이 연습에서는 숫자를 제곱하는 간단한 계산기가 포함된 웹 페이지를 만듭니다. 의도적인 오류를 포함하는 페이지를 만든 후 페이지를 실행하여 디버거로 검사합니다.

이 연습에서 수행할 작업은 다음과 같습니다.

중단점 설정
파일 시스템 웹 사이트의 Web Forms 페이지에서 디버거 호출

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

Visual Web Developer 및 .NET Framework

또한 Visual Web Developer 작업에 대한 일반적인 내용을 알고 있어야 합니다. Visual Web Developer에 대한 개요는 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 참조하십시오.

웹 사이트 및 페이지 만들기

이 연습의 첫 부분에서는 디버깅할 수 있는 페이지를 만듭니다.

연습: Visual Web Developer에서 기본 웹 페이지 만들기 항목의 작업을 수행한 경우를 비롯하여 Visual Web Developer에서 웹 사이트를 이미 만든 경우 이 웹 사이트를 사용하고 이 연습의 뒷부분에 있는 "디버깅할 컨트롤 추가"로 건너뛸 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 클릭하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 됩니다. 그러나 다른 프로그래밍 언어로 페이지와 구성 요소를 만들어 동일한 웹 응용 프로그램에서 여러 언어를 사용할 수 있습니다. 다른 언어를 사용하여 구성 요소를 작성하는 방법에 대한 자세한 내용은 ASP.NET 웹 사이트의 공유 코드 폴더를 참조하십시오.
확인을 클릭합니다.

Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

디버깅할 페이지 작성

먼저 새 페이지를 만듭니다. 이 연습에서는 다음 절차에 명시된 대로 새 페이지를 만들어야 합니다.

웹 사이트에 페이지를 추가하려면

Default.aspx 페이지를 닫습니다.
솔루션 탐색기에서 C:\WebSite와 같은 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택합니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 선택합니다.
이름 상자에 DebugPage.aspx를 입력합니다.
언어 목록에서 사용하려는 프로그래밍 언어를 선택합니다.
다른 파일에 코드 입력 확인란의 선택을 취소해야 합니다.

이 연습에서는 같은 파일에 코드와 HTML이 있는 단일 파일 페이지를 작성합니다. ASP.NET 페이지의 코드는 페이지나 별도의 클래스 파일에 있을 수 있습니다. 코드를 별도의 파일에 보관하는 방법에 대한 자세한 내용은 연습: Visual Web Developer에서 코드 분리를 사용한 기본 웹 페이지 만들기을를 참조하십시오.
추가를 클릭합니다.

Visual Web Developer에서 새 페이지를 만들고 소스 뷰에서 이 페이지를 엽니다.

이제 페이지에 몇 개의 컨트롤을 추가한 다음 코드를 추가할 수 있습니다. 코드는 간단하지만 나중에 중단점을 추가하기에 충분합니다.

디버깅할 컨트롤 및 코드를 추가하려면

디자인 뷰로 전환한 다음 도구 상자의 표준 폴더에서 다음 컨트롤을 페이지로 끌어와 아래와 같이 속성을 설정합니다.

컨트롤	속성
Label	ID: CaptionLabel Text: (비어 있음)
TextBox	ID: NumberTextBox Text: (비어 있음)
Button	ID: SquareButton Text: 제곱
Label	ID: ResultLabel Text: (비어 있음)

참고:
이 연습에서 페이지의 레이아웃은 중요하지 않습니다.

Button 컨트롤을 두 번 클릭하여 이 컨트롤에 대한 Click 처리기를 만듭니다.

입력한 숫자를 제곱하는 Square라는 함수를 호출하는 논리를 Click 처리기에 추가합니다. 처리기는 다음 예제와 같습니다.

참고:
이 코드 예제에서는 오류 검사를 의도적으로 포함시키지 않습니다.

Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

숫자를 제곱하는 함수를 작성합니다. 숫자에 같은 숫자를 곱하는 대신 더하도록 코드에 버그를 포함시킵니다. 코드는 다음 예제와 같습니다.

Function Square(number As Integer) As Integer
    Square = number + number
End Function

int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}

또한 페이지를 처음으로 실행하는지 여부에 따라 레이블의 텍스트를 변경하는 코드를 페이지에 추가할 수 있습니다.

Caption Label 컨트롤을 변경하려면

디자인 뷰에서 컨트롤이 아닌 디자인 화면을 두 번 클릭하여 Page_Load 이벤트 처리기를 만듭니다.

페이지를 처음으로 실행하는 경우, Caption Label 컨트롤의 텍스트를 Enter a number:로 설정하고, 그렇지 않으면 Enter another number:로 설정합니다. 처리기는 다음 코드 예제와 같습니다.

Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub

if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}

페이지 테스트

페이지가 작동하는지 확인하려면 페이지를 현재 상태로 실행합니다.

페이지를 실행하려면

페이지를 저장합니다.
Ctrl+F5를 눌러 페이지를 실행합니다.
숫자 3을 입력하고 제곱 단추를 누릅니다.

프로그램에 버그가 있으므로 결과가 올바르지 않습니다. 올바른 결과는 9입니다.
브라우저를 닫습니다.

페이지 디버깅

이 연습 부분에서는 디버거를 사용하여 페이지 코드가 한 줄씩 실행하며 검사하고 코드에 중단점을 추가한 다음, 페이지를 디버그 모드로 실행합니다.

먼저 코드에 중단점을 설정합니다. 중단점은 실행이 중지되고 디버그가 호출되는 코드 줄입니다.

중단점을 설정하려면

소스 뷰로 전환합니다.
다음 줄을 마우스 오른쪽 단추로 클릭하고 중단점을 선택한 다음 중단점 삽입을 선택합니다.

참고:

F9 키를 눌러 중단점을 설정/해제할 수 있습니다.
```
If Page.IsPostBack = False Then
```
```
if(Page.IsPostBack == false)
```
SquareButton_Click 처리기의 다음 줄에 또 다른 중단점을 설정합니다.
```
result = Square(number)
```
```
result = Square(number);
```
참고:

변수를 선언하는 문에는 중단점을 설정할 수 없습니다.

참고:
F9 키를 눌러 중단점을 설정/해제할 수 있습니다.

참고:
변수를 선언하는 문에는 중단점을 설정할 수 없습니다.

중단점을 하나 이상 설정하고 나면 디버거를 실행할 수 있습니다.

디버거를 실행하려면

디버그 메뉴에서 디버깅 시작을 선택하거나 F5 키를 눌러 페이지를 디버그 모드로 실행합니다.

이전에 디버거를 실행한 적이 없는 경우 응용 프로그램이 디버깅을 지원하도록 구성되어 있지 않을 것입니다. 응용 프로그램에서 디버깅은 기본적으로 해제됩니다. 그 이유는 보안을 위해서기도 하고 디버거에서 페이지 실행이 느려지기 때문에 성능을 위해서기도 합니다. Visual Web Developer에서 디버깅을 사용하도록 설정하려면 어떻게 해야 하는지를 나타내는 메시지가 표시됩니다.

디버깅을 사용하도록 설정하는 스위치는 다양한 사이트 관련 구성 옵션을 유지하는 Web.config 파일의 설정으로 저장됩니다. Web.config 파일이 없는 경우 Visual Web Developer에서 이 파일을 만들고 디버거를 적절하게 설정합니다.

Web.config 파일이 이미 있지만 디버깅을 사용할 수 없는 경우에는 Visual Web Developer에서 Web.config 파일을 수정할 것임을 나타내는 약간 다른 메시지가 표시됩니다.
디버깅이 사용되고 있지 않음을 나타내는 메시지가 표시되면 확인을 눌러 디버깅을 사용하도록 설정합니다.

Visual Web Developer에서 디자이너가 페이지의 코드와 몇 개의 디버거 창을 표시하는 디버그 모드로 변경됩니다.

디버거에서 페이지를 한 줄씩 실행합니다. 디버거에서 중단점이 있는 줄에 도달하면 디버거가 중지되고 이 줄이 강조 표시됩니다.

중단점이 Page_Load 처리기에 있기 때문에 페이지 처리는 아직 완료되지 않습니다. 브라우저가 열리지만 페이지는 아직 표시되지 않습니다.
디버그 메뉴에서 창, 조사식, 조사식1을 차례로 클릭합니다.

참고:

Visual Web Developer Express Edition을 사용하는 경우 디버거에서는 하나의 조사식 창만 제공합니다.

이렇게 하면 추적할 값을 지정할 수 있는 조사식 창이 열립니다.
편집기에서 Page.IsPostBack 식의 IsPostBack 부분을 마우스 오른쪽 단추로 클릭한 다음 조사식 추가를 클릭합니다.

이렇게 하면 조사식 창에 식이 추가되고 속성의 현재 값인 false가 값 열에 표시됩니다. 원하는 경우 조사식 창의 이름 열에 변수나 속성의 이름을 입력할 수 있습니다.
디버그 메뉴에서 계속을 선택하여 실행을 계속하거나 F5 키를 누릅니다.

계속 명령을 선택하면 디버거가 다음 중단점에 도달할 때까지 계속 진행됩니다. Page_Load 이벤트 처리기에서 처리가 완료되고 페이지가 브라우저에 표시됩니다.
텍스트 상자에 값 2를 입력하고 제곱 단추를 클릭합니다.

Page_Load 처리기의 줄에 있는 중단점에서 디버거가 다시 표시됩니다. 이번에는 조사식 창에 Page.IsPostBack의 값이 true임이 표시됩니다.
F5 키를 다시 눌러 계속합니다.

디버거에서 Page_Load 처리기를 처리하고 SquareButton_Click 처리기를 시작합니다. 이 처리기에 설정한 두 번째 중단점에서 디버거가 중지됩니다.
디버그 메뉴에서 창을 선택한 다음 지역을 클릭합니다.

이렇게 하면 지역 창이 열리고 실행 중인 현재 줄의 범위에 있는 모든 변수와 개체의 값이 표시됩니다. 지역 창에서는 이러한 값을 볼 수 있는 다른 방법을 제공하는데, 이 방법을 사용하면 요소에서 조사식을 명시적으로 설정할 필요가 없는 이점이 있지만 창에 많은 정보가 들어 있어 한 번에 볼 수 없을 수도 있는 단점이 있습니다.

지역 창에서 number의 값이 2로 표시되고 result 값이 0으로 표시됩니다.

참고:

또한 마우스 포인터를 프로그램의 변수 위에 놓으면 값을 볼 수 있습니다.
지역 창의 값 열에서 number 변수의 줄을 마우스 오른쪽 단추로 클릭하고 값 다시 설정을 선택합니다. number 변수의 값을 편집하여 5로 변경합니다.

number 변수의 값 2는 2를 더하거나 제곱하는 두 경우 모두 결과가 4이므로 프로그램을 테스트하기에는 좋지 않습니다. 따라서 프로그램이 실행되고 있을 때 이 변수의 값을 변경할 수 있습니다.
디버그 메뉴에서 한 단계씩 코드 실행을 선택하여 Square 함수의 코드를 한 단계씩 실행하거나 F11 키를 누릅니다.

한 단계씩 코드 실행 명령을 선택하면 디버거가 한 줄을 실행한 다음 다시 중지합니다.
F11 키를 눌러 코드의 다음 줄에 도달할 때까지 단계별로 계속 실행합니다.
```
ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
```
```
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
```
디버거에서 코드를 한 줄씩 실행합니다. 디버거에서 Square 함수를 실행할 때 지역 창을 사용하여 함수에 전달된 데이터(number)와 함수의 반환 값(Square)을 확인할 수 있습니다.
디버그 메뉴에서 창을 클릭한 다음 직접 실행을 클릭합니다.

직접 실행 창을 사용하여 명령을 실행할 수 있습니다. 이 창을 사용하여 속성 값을 가져오는 것과 같이 식을 계산할 수 있습니다.
직접 실행 창에 다음 식을 입력하고 Enter 키를 누릅니다.
```
? NumberTextBox.Text
```
물음표(?)는 다음에 오는 식을 계산하는 직접 실행 창의 연산자입니다. 이 예제에서는 페이지에 있는NumberTextBox 컨트롤의 Text 속성을 계산합니다. 코드에서 사용하는 것과 같은 구문을 사용하여 변수, 개체 속성 및 이 둘을 결합한 식을 계산할 수 있습니다.
직접 실행 창에 다음을 입력하고 Enter 키를 누릅니다.
```
NumberTextBox.Text = "5"
```
식을 계산하는 것 외에도 직접 실행 창을 사용하여 변수나 속성을 변경할 수 있습니다.
F5 키를 눌러 프로그램 실행을 계속합니다.

페이지가 나타나면 Square 함수로 5를 전달한 결과가 표시됩니다. 또한 텍스트 상자의 텍스트가 5로 변경됩니다.

참고:
Visual Web Developer Express Edition을 사용하는 경우 디버거에서는 하나의 조사식 창만 제공합니다.

참고:
또한 마우스 포인터를 프로그램의 변수 위에 놓으면 값을 볼 수 있습니다.

표시되는 결과 10은 올바르지 않습니다. 5의 제곱은 10이 아닙니다. 이제 버그를 수정할 수 있습니다.

버그를 수정하고 다시 테스트하려면

브라우저에서 Visual Web Developer로 전환합니다.

참고:

브라우저 창을 닫지 마십시오.
Square 함수에서 "+" 연산자를 "*" 연산자로 변경합니다.

코드가 현재 실행되고 있지 않고 페이지 처리가 완료되었으므로 편집 모드에 있는 동안 영구적으로 변경할 수 있습니다.
Ctrl+S를 눌러 페이지를 저장합니다.
페이지를 실행할 때마다 중단되지 않도록 디버그 메뉴에서 모든 중단점 삭제를 선택합니다.

참고:

Ctrl+Shift+F9를 눌러 중단점을 지울 수도 있습니다.
브라우저 창으로 전환합니다.
텍스트 상자에 5를 입력하고 단추를 클릭합니다.

이번에는 페이지를 실행하고 값을 입력하면 올바로 제곱됩니다. NumberTextBox 컨트롤의 Text 속성을 변경한 것과 같이 앞에서 일시적으로 변경한 사항은 페이지가 마지막으로 실행되고 있을 때에만 적용되었기 때문에 지속되지 않습니다.
브라우저를 닫아 디버거를 중지합니다.

참고:
브라우저 창을 닫지 마십시오.

참고:
Ctrl+Shift+F9를 눌러 중단점을 지울 수도 있습니다.

다음 단계

디버거에는 코드 작업에 유용한 추가 기능이 포함되어 있습니다. 또한 오류 조건을 처리하는 기술과 런타임에 페이지 처리를 모니터링하는 방법에 대해 알아볼 수도 있습니다. 예를 들어, 추적을 확인할 수 있습니다. 자세한 내용은 연습: Visual Web Developer에서 추적을 사용하여 웹 페이지 오류 찾기를 참조하십시오.

참고 항목

기타 리소스

Visual Studio의 디버깅

다음을 통해 공유