ASP.NET 웹 페이지(Razor) 사이트 디버깅 소개

아티클
07/13/2023

이 문서에서는 ASP.NET 웹 페이지(Razor) 웹 사이트에서 페이지를 디버그하는 다양한 방법을 설명합니다. 디버깅은 코드 페이지에서 오류를 찾아 수정하는 프로세스입니다.

학습할 내용:

페이지를 분석하고 디버그하는 데 도움이 되는 정보를 표시하는 방법입니다.

Visual Studio에서 디버깅 도구를 사용하는 방법

다음은 문서에 도입된 ASP.NET 기능입니다.

도우미입니다 ServerInfo .

ObjectInfo 도우미.

소프트웨어 버전

ASP.NET 웹 페이지(Razor) 3

Visual Studio 2013

이 자습서는 ASP.NET 웹 페이지 2에서도 작동합니다. WebMatrix 3을 사용할 수 있지만 통합 디버거는 지원되지 않습니다.

코드에서 오류 및 문제 해결의 중요한 측면은 처음부터 오류를 방지하는 것입니다. 오류를 일으킬 수 있는 코드 섹션을 블록에 try/catch 배치하여 이 작업을 수행할 수 있습니다. 자세한 내용은 Razor 구문을 사용하여 ASP.NET 웹 프로그래밍 소개에서 오류 처리 섹션을 참조하세요.

도우미는 ServerInfo 페이지를 호스트하는 웹 서버 환경에 대한 정보의 개요를 제공하는 진단 도구입니다. 브라우저에서 페이지를 요청할 때 전송되는 HTTP 요청 정보도 표시됩니다. 도우미는 ServerInfo 현재 사용자 ID, 요청을 수행한 브라우저 유형 등을 표시합니다. 이러한 종류의 정보는 일반적인 문제를 해결하는 데 도움이 될 수 있습니다.

ServerInfo.cshtml이라는 새 웹 페이지를 만듭니다.
페이지 끝에서 닫는 </body> 태그 바로 앞에 를 추가합니다 @ServerInfo.GetHtml().
```
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
   @ServerInfo.GetHtml()
    </body>
</html>
```
페이지의 아무 곳이나 코드를 추가할 ServerInfo 수 있습니다. 그러나 끝에 추가하면 출력이 다른 페이지 콘텐츠와 별도로 유지되므로 더 쉽게 읽을 수 있습니다.

참고

중요 웹 페이지를 프로덕션 서버로 이동하기 전에 웹 페이지에서 진단 코드를 제거해야 합니다. 이는 도우미뿐만 아니라 페이지에 코드를 추가하는 것과 관련된 이 문서의 다른 진단 기술에 적용됩니다 ServerInfo . 이 유형의 정보는 악의적인 의도가 있는 사용자에게 유용할 수 있으므로 웹 사이트 방문자가 서버 이름, 사용자 이름, 서버의 경로 및 유사한 세부 정보에 대한 정보를 보지 않도록 합니다.
페이지를 저장하고 브라우저에서 실행합니다.

도우미는 ServerInfo 페이지에 4개의 정보 테이블을 표시합니다.
- 서버 구성. 이 섹션에서는 컴퓨터 이름, 실행 중인 ASP.NET 버전, 도메인 이름 및 서버 시간을 포함하여 호스팅 웹 서버에 대한 정보를 제공합니다.
- ASP.NET 서버 변수. 이 섹션에서는 많은 HTTP 프로토콜 세부 정보(HTTP 변수라고 함) 및 각 웹 페이지 요청의 일부인 값에 대해 자세히 설명합니다.
- HTTP 런타임 정보입니다. 이 섹션에서는 웹 페이지가 실행 중인 Microsoft .NET Framework 버전, 경로, 캐시에 대한 세부 정보 등에 대한 세부 정보를 제공합니다. Razor 구문을 사용하여 ASP.NET 웹 프로그래밍 소개에서 배운 것처럼 Razor 구문을 사용하는 ASP.NET 웹 페이지 .NET Framework라는 광범위한 소프트웨어 개발 라이브러리를 기반으로 하는 Microsoft의 ASP.NET 웹 서버 기술을 기반으로 합니다.
- 환경 변수. 이 섹션에서는 웹 서버의 모든 로컬 환경 변수 및 해당 값 목록을 제공합니다.
  
  모든 서버 및 요청 정보에 대한 전체 설명은 이 문서의 scope 넘어가지만 도우미가 많은 진단 정보를 반환하는 것을 ServerInfo 볼 수 있습니다. 반환되는 ServerInfo 값에 대한 자세한 내용은 Microsoft TechNet 웹 사이트의 인식된 환경 변수 및 MSDN 웹 사이트의 IIS 서버 변수 를 참조하세요.

출력 식을 포함하여 페이지 값 표시

코드에서 발생하는 작업을 확인하는 또 다른 방법은 페이지에 출력 식을 포함하는 것입니다. 아시다시피 또는 와 같은 @myVariable@(subTotal * 12) 항목을 페이지에 추가하여 변수 값을 직접 출력할 수 있습니다. 디버깅의 경우 이러한 출력 식을 코드의 전략적 지점에 배치할 수 있습니다. 이렇게 하면 페이지가 실행되면 키 변수의 값 또는 계산 결과를 볼 수 있습니다. 디버깅을 완료하면 식을 제거하거나 주석 처리할 수 있습니다. 이 절차에서는 포함된 식을 사용하여 페이지를 디버그하는 일반적인 방법을 보여 줍니다.

OutputExpression.cshtml이라는 새 WebMatrix 페이지를 만듭니다.

페이지 콘텐츠를 다음으로 바꿉다.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>   

    @{
        var weekday = DateTime.Now.DayOfWeek;
        // As a test, add 1 day to the current weekday.
        if(weekday.ToString() != "Saturday") {
            // If weekday is not Saturday, simply add one day.
            weekday = weekday + 1; 
        }
        else {
            // If weekday is Saturday, reset the day to 0, or Sunday.
            weekday = 0; 
        }
        // Convert weekday to a string value for the switch statement.
        var weekdayText = weekday.ToString(); 

        var greeting = "";
        
        switch(weekdayText) 
        { 
            case "Monday":
                greeting = "Ok, it's a marvelous Monday."; 
                break; 
            case "Tuesday":
                greeting = "It's a tremendous Tuesday.";
                break; 
            case "Wednesday":
                greeting = "Wild Wednesday is here!";
                break; 
            case "Thursday":
                greeting = "All right, it's thrifty Thursday.";
                break;
            case "Friday":
                greeting = "It's finally Friday!";
                break;
            case "Saturday":
                greeting = "Another slow Saturday is here.";
                break;
            case "Sunday":
                greeting = "The best day of all: serene Sunday.";
                break;
            default:
                break; 
        }
    }
    
    <h2>@greeting</h2>

    </body>
</html>

이 예제에서는 switch 문을 사용하여 변수 값을 weekday 검사 다음 요일에 따라 다른 출력 메시지를 표시합니다. 예제 if 에서 첫 번째 코드 블록 내의 블록은 현재 평일 값에 1일을 추가하여 요일을 임의로 변경합니다. 이는 설명 목적으로 도입된 오류입니다.

페이지를 저장하고 브라우저에서 실행합니다.

페이지에 잘못된 요일에 대한 메시지가 표시됩니다. 실제로 요일이 무엇이든 간에 하루 후에 메시지가 표시됩니다. 이 경우 메시지가 꺼진 이유를 알 수 있지만(코드가 의도적으로 잘못된 날짜 값을 설정하기 때문에) 실제로 코드에서 문제가 발생하는 위치를 알기 어려운 경우가 많습니다. 디버그하려면 키 개체 및 변수(예: weekday)의 값에 어떤 일이 일어나고 있는지 알아내야 합니다.

코드의 주석으로 표시된 두 위치에 표시된 대로 를 삽입하여 @weekday 출력 식을 추가합니다. 이러한 출력 식은 코드 실행의 해당 시점에서 변수 값을 표시합니다.

var weekday = DateTime.Now.DayOfWeek;
// DEBUG: Display the initial value of weekday. 
@weekday

// As a test, add 1 day to the current weekday.
if(weekday.ToString() != "Saturday") {
    // If weekday is not Saturday, simply add one day.
    weekday = weekday + 1; 
}
else {
    // If weekday is Saturday, reset the day to 0, or Sunday.
    weekday = 0; 
}

// DEBUG: Display the updated test value of weekday.
@weekday

// Convert weekday to a string value for the switch statement.
var weekdayText = weekday.ToString();

브라우저에서 페이지를 저장하고 실행합니다.

페이지에는 첫 번째 요일의 실제 날짜, 요일 추가로 인한 업데이트된 요일 및 문의 결과 메시지가 switch 표시됩니다. 두 변수 식(@weekday)의 출력에는 HTML <p> 태그를 출력에 추가하지 않았기 때문에 일 사이에 공백이 없습니다. 식은 테스트용입니다.

이제 오류가 있는 위치를 확인할 수 있습니다. 코드에서 변수를 weekday 처음 표시하면 올바른 날짜가 표시됩니다. 두 번째로 표시하면 코드의 if 블록 다음에 하루가 하나씩 꺼집니다. 따라서 평일 변수의 첫 번째와 두 번째 모양 사이에 어떤 일이 일어났다는 것을 알 수 있습니다. 실제 버그인 경우 이러한 종류의 접근 방식은 문제를 일으키는 코드의 위치를 좁히는 데 도움이 됩니다.

추가한 두 개의 출력 식을 제거하고 요일을 변경하는 코드를 제거하여 페이지의 코드를 수정합니다. 나머지 전체 코드 블록은 다음 예제와 같습니다.

@{
    var weekday = DateTime.Now.DayOfWeek;
    var weekdayText = weekday.ToString(); 

    var greeting = "";
        
    switch(weekdayText) 
    { 
        case "Monday":
            greeting = "Ok, it's a marvelous Monday."; 
            break; 
        case "Tuesday":
            greeting = "It's a tremendous Tuesday.";
            break; 
        case "Wednesday":
            greeting = "Wild Wednesday is here!";
            break; 
        case "Thursday":
            greeting = "All right, it's thrifty Thursday.";
            break;
        case "Friday":
            greeting = "It's finally Friday!";
            break;
        case "Saturday":
            greeting = "Another slow Saturday is here.";
            break;
        case "Sunday":
            greeting = "The best day of all: serene Sunday.";
            break;
        default:
            break; 
    }
}

브라우저에서 페이지를 실행합니다. 이번에는 요일의 실제 날짜에 대해 올바른 메시지가 표시됩니다.

ObjectInfo 도우미를 사용하여 개체 값 표시

도우미는 ObjectInfo 전달한 각 개체의 형식과 값을 표시합니다. 이 값을 사용하여 코드에서 변수 및 개체의 값을 볼 수 있습니다(이전 예제의 출력 식과 마찬가지로). 또한 개체에 대한 데이터 형식 정보를 볼 수 있습니다.

이전에 만든 OutputExpression.cshtml 이라는 파일을 엽니다.

페이지의 모든 코드를 다음 코드 블록으로 바꿉 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    @{
      var weekday = DateTime.Now.DayOfWeek;
      @ObjectInfo.Print(weekday)
      var weekdayText = weekday.ToString(); 
  
      var greeting = "";
  
      switch(weekdayText) 
      { 
          case "Monday":
              greeting = "Ok, it's a marvelous Monday."; 
              break; 
          case "Tuesday":
              greeting = "It's a tremendous Tuesday.";
              break; 
          case "Wednesday":
              greeting = "Wild Wednesday is here!";
              break; 
          case "Thursday":
              greeting = "All right, it's thrifty Thursday.";
              break;
          case "Friday":
              greeting = "It's finally Friday!";
              break;
           case "Saturday":
              greeting = "Another slow Saturday is here.";
              break;
           case "Sunday":
              greeting = "The best day of all: serene Sunday.";
              break;
          default:
              break; 
      }
    }
    @ObjectInfo.Print(greeting)
    <h2>@greeting</h2>

    </body>
</html>

브라우저에서 페이지를 저장하고 실행합니다.

이 예제에서 도우미는 ObjectInfo 다음 두 항목을 표시합니다.
- 형식입니다. 첫 번째 변수의 경우 형식은 입니다 DayOfWeek. 두 번째 변수의 경우 형식은 입니다 String.
- 값입니다. 이 경우 페이지에 인사말 변수의 값이 이미 표시되어 있으므로 변수 ObjectInfo를 에 전달할 때 값이 다시 표시됩니다.
  
  더 복잡한 개체의 경우 도우미는 ObjectInfo 더 많은 정보를 표시할 수 있습니다. 기본적으로 모든 개체 속성의 형식과 값을 표시할 수 있습니다.