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

작성자: Tom FitzMacken

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

학습할 내용:

  • 페이지를 분석하고 디버그하는 데 도움이 되는 정보를 표시하는 방법입니다.
  • Visual Studio에서 디버깅 도구를 사용하는 방법입니다.

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

  • 도우미 ServerInfo입니다.
  • ObjectInfo 도우미.

소프트웨어 버전

  • ASP.NET 웹 페이지(Razor) 3
  • Visual Studio 2013

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

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

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

  1. ServerInfo.cshtml이라는 새 웹 페이지를 만듭니다.

  2. 페이지의 끝에서 닫힌 </body> 태그 직전에 @ServerInfo.GetHtml()을 추가하십시오.

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
       @ServerInfo.GetHtml()
        </body>
    </html>
    

    페이지의 아무 곳이나 코드를 추가할 ServerInfo 수 있습니다. 그러나 끝에 추가하면 출력이 다른 페이지 콘텐츠와 별도로 유지되므로 읽기가 쉬워집니다.

    메모

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

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

    디버깅-1

    도우미는 ServerInfo 페이지에 4개의 정보 테이블을 표시합니다.

    • 서버 구성. 이 섹션에서는 컴퓨터 이름, 실행 중인 ASP.NET 버전, 도메인 이름 및 서버 시간을 포함하여 호스팅 웹 서버에 대한 정보를 제공합니다.

    • ASP.NET 서버 변수 이 섹션에서는 많은 HTTP 프로토콜 세부 정보(HTTP 변수라고 함) 및 각 웹 페이지 요청에 포함된 값에 대해 자세히 설명합니다.

    • HTTP 런타임 정보입니다. 이 섹션에서는 웹 페이지가 실행 중인 Microsoft .NET Framework 버전, 경로, 캐시에 대한 세부 정보 등에 대해 자세히 설명합니다. Razor 구문을 사용하는 ASP.NET 웹 프로그래밍 소개에서 배운 것처럼 Razor 구문을 사용하는 ASP.NET 웹 페이지는 Microsoft의 ASP.NET 웹 서버 기술을 기반으로 하며, 이 기술은 .NET Framework라는 광범위한 소프트웨어 개발 라이브러리를 기반으로 합니다.

    • 환경 변수. 이 섹션에서는 웹 서버의 모든 로컬 환경 변수 및 해당 값 목록을 제공합니다.

      모든 서버 및 요청 정보에 대한 전체 설명은 이 문서의 범위를 벗어나지만 도우미가 많은 진단 정보를 반환하는 것을 ServerInfo 볼 수 있습니다. 반환되는 ServerInfo 값에 대한 자세한 내용은 MSDN 웹 사이트의 Microsoft TechNet 웹 사이트 및 IIS 서버 변수에서 인식된 환경 변수를 참조하세요.

출력 식을 삽입하여 페이지 값 표시

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

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

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

    <!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일을 추가하여 요일을 임의로 변경합니다. 이 오류는 설명 목적으로 도입된 오류입니다.

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

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

  4. 코드 주석으로 표시된 두 위치에 @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();
    
  5. 브라우저에서 페이지를 저장하고 실행합니다.

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

    디버깅-2

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

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

    @{
        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; 
        }
    }
    
  7. 브라우저에서 페이지를 실행합니다. 이번에는 요일의 실제 날짜에 대해 올바른 메시지가 표시됩니다.

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

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

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

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

    <!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>
    
  3. 브라우저에서 페이지를 저장하고 실행합니다.

    디버깅-4

    이 예제에서 도우미는 ObjectInfo 다음 두 항목을 표시합니다.

    • 유형입니다. 첫 번째 변수의 경우 형식은 .입니다 DayOfWeek. 두 번째 변수의 경우 형식은 .입니다 String.

    • 값입니다. 이 경우 페이지에 인사말 변수의 값이 이미 표시되어 있으므로 변수 ObjectInfo를 전달할 때 값이 다시 표시됩니다.

      더 복잡한 개체의 경우 도우미는 ObjectInfo 더 많은 정보를 표시할 수 있습니다. 기본적으로 모든 개체 속성의 형식과 값을 표시할 수 있습니다.

Visual Studio에서 디버깅 도구 사용

보다 포괄적인 디버깅 환경을 위해 Visual Studio를 사용합니다. Visual Studio를 사용하면 검사하려는 줄에서 코드에 중단점을 설정할 수 있습니다.

중단점 설정

웹 사이트를 테스트하면 실행 코드가 중단점에서 중지됩니다.

중단점에 도달

변수의 현재 값을 검사하고 코드를 한 줄씩 단계별로 실행할 수 있습니다.

값 보기

Visual Studio에서 통합 디버거를 사용하여 ASP.NET Razor 페이지를 디버그하는 방법에 대한 자세한 내용은 Visual Studio를 사용하여 웹 페이지 ASP.NET 프로그래밍(Razor)을 참조하세요.

추가 리소스