Visual Studio 2012에서 페이지 검사기 사용

작성자 : 웹 캠프 팀

이 실습 랩에서는 Visual Studio에서 웹 페이지 문제를 찾고 해결하는 새로운 도구인 페이지 검사기 검색합니다.

페이지 검사기 브라우저 진단 도구를 Visual Studio에 제공하고 브라우저, ASP.NET 및 소스 코드 간에 통합된 환경을 제공하는 새로운 도구입니다. Visual Studio IDE 내에서 웹 페이지(HTML, Web Forms, ASP.NET MVC 또는 웹 페이지)를 직접 렌더링하고 소스 코드와 결과 출력을 모두 검사할 수 있습니다. 페이지 검사기 사용하면 웹 사이트를 쉽게 분해하고, 처음부터 신속하게 페이지를 빌드하고, 문제를 신속하게 진단할 수 있습니다.

요즘에는 MVC 및 WebForms와 같은 유연하고 확장 가능한 웹 사이트를 적시에 만드는 ASP.NET 여러 웹 프레임워크가 있습니다. 반면, IDE는 템플릿 기반 페이지 및 동적 콘텐츠에서 디자이너 보기를 지원하지 않으므로 페이지에서 문제를 찾기가 더 어려워집니다. 따라서 이러한 웹 사이트는 사용자에게 표시되는 방식을 확인하기 위해 브라우저에서 열어야 합니다.

웹 개발자는 외부 도구를 사용하여 브라우저에서 정기적으로 실행되는 문제를 찾습니다. 그런 다음, IDE로 돌아가서 수정을 시작합니다. IDE 간의 이 전후 활동은 브라우저와 프로파일링 도구가 비효율적일 수 있으며 문제를 재현할 때마다 새 배포 및 캐시 정리가 필요한 경우도 있습니다.

페이지 검사기 결합된 기능 집합을 사용하여 두 세계의 최고를 결합하여 클라이언트(브라우저 도구)와 서버(ASP.NET 및 소스 코드) 간의 웹 개발 격차를 해소합니다.

페이지 검사기 사용하여 브라우저에서 렌더링할 HTML 태그를 생성한 소스 파일(서버 쪽 코드 포함)의 요소를 확인할 수 있습니다. 또한 페이지 검사기 CSS 속성 및 DOM 요소 특성을 수정하여 브라우저에 즉시 반영된 변경 내용을 볼 수 있습니다.

이 실습 랩에서는 페이지 검사기 기능을 안내하고 이를 사용하여 웹 애플리케이션의 문제를 해결하는 방법을 보여 줍니다. 이 랩에는 비슷한 흐름을 사용하지만 다른 기술을 대상으로 하는 두 가지 연습이 포함되어 있습니다. ASP.NET MVC 개발자인 경우 연습을 수행합니다. WebForms 개발자가 연습 2를 따르는 경우.

이 랩에서는 원본 폴더에 제공된 샘플 웹 애플리케이션에 사소한 변경 내용을 적용하여 이전에 설명한 향상된 기능과 새로운 기능을 안내합니다.

목표

이 실습 랩에서는 다음 방법을 알아봅니다.

• 페이지 검사기 사용하여 웹 사이트 분해
• 페이지 검사기 사용하여 CSS 스타일 변경 내용 검사 및 미리 보기
• 페이지 검사기 사용하여 웹 페이지에서 문제 감지 및 해결

필수 조건

이 랩을 완료하려면 다음 항목이 있어야 합니다.

• 웹용 Microsoft Visual Studio Express 2012 이상(설치 방법에 대한 지침은 부록 A를 참조하세요).
• Internet Explorer 9 이상

연습

이 실습 랩에는 다음 연습이 포함됩니다.

1. 연습 1: ASP.NET MVC 프로젝트에서 페이지 검사기 사용
2. 연습 2: WebForms 프로젝트에서 페이지 검사기 사용

이 랩을 완료하는 데 소요되는 예상 시간: 30분

연습 1: ASP.NET MVC 프로젝트에서 페이지 검사기 사용

이 연습에서는 페이지 검사기 사용하여 ASP.NET MVC 4 솔루션을 미리 보고 디버그하는 방법을 알아봅니다. 먼저 도구 주위에 간단한 랩을 수행하여 웹 디버깅 프로세스를 용이하게 하는 기능을 알아봅니다. 그런 다음, 스타일 지정 문제가 포함된 웹 페이지에서 작업합니다. 페이지 검사기 사용하여 문제를 생성하는 소스 코드를 찾고 해결하는 방법을 알아봅니다.

작업 1 - 페이지 검사기 탐색

이 작업에서는 사진 갤러리를 보여 주는 ASP.NET MVC 4 프로젝트의 컨텍스트에서 페이지 검사기 사용하는 방법을 알아봅니다.

1. Source/Ex1-MVC4/Begin/폴더에 있는 Begin 솔루션을 엽니다.

   1. 계속하려면 몇 가지 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

   2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

   3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.

      참고 항목

      NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

2. 솔루션 탐색기 /Views/Home 프로젝트 폴더에서 Index.cshtml 보기를 찾아 마우스 오른쪽 단추로 클릭하고 페이지 검사기 보기를 선택합니다.

   

   페이지 검사기 미리 볼 파일 선택

3. 페이지 검사기 창에는 선택한 원본 뷰에 매핑된 /Home/Index URL이 표시됩니다.

   

   페이지 검사기 첫 번째 연락처

   페이지 검사기 도구는 Visual Studio 환경에 통합됩니다. 검사기에서는 강력한 HTML 프로파일러와 함께 포함된 브라우저를 포함합니다. 페이지 모양을 확인하기 위해 솔루션을 실행할 필요가 없습니다.

   참고 항목

   페이지 검사기 브라우저의 너비가 열린 페이지의 너비보다 작으면 페이지가 제대로 표시되지 않습니다. 이 경우 페이지 검사기 너비를 조정합니다.

4. 페이지 검사기 파일 탭을 클릭합니다.

   인덱스 페이지를 작성하는 모든 원본 파일이 표시됩니다. 이 기능은 특히 부분 보기 및 템플릿을 사용하는 경우 모든 요소를 한눈에 식별하는 데 도움이 됩니다. 링크를 클릭하면 각 파일을 열 수도 있습니다.

   

   파일 탭

5. 탭 왼쪽에 있는 검사 모드 설정/해제 단추를 클릭합니다.

   이 도구를 사용하면 페이지의 요소를 선택하고 HTML 및 Razor 코드를 볼 수 있습니다.

   

   검사 모드 설정/해제 단추

6. 페이지 검사기 브라우저에서 페이지 요소 위로 마우스 포인터를 이동합니다. 마우스 포인터를 렌더링된 페이지의 모든 부분으로 이동하는 동안 요소 유형이 표시되고 Visual Studio 편집기에서 해당 소스 태그 또는 코드가 강조 표시됩니다.

   

   작동 중인 검사 모드

   참고 항목

   페이지 검사기 창을 최대화하지 않거나 소스 코드를 보여 주는 미리 보기 탭을 볼 수 없습니다. 페이지 검사기 요소를 최대화할 때 클릭하면 선택 영역의 소스 코드가 표시되지만 페이지 검사기 창이 숨겨집니다.

   Index.cshtml 파일에 주의를 기울이면 선택한 요소를 생성하는 소스 코드 부분이 강조 표시됩니다. 이 기능은 긴 소스 파일을 쉽게 편집하여 코드에 직접 액세스하는 빠르고 빠른 방법을 제공합니다.

   

   요소 검사

7. 검사 모드 설정/해제 단추()를 클릭하여 커서를 사용하지 않도록 설정합니다.

8. HTML 탭을 선택하여 페이지 검사기 브라우저에 렌더링된 HTML 코드를 표시합니다.

9. HTML 태그에서 Koala 링크가 있는 목록 항목을 찾아 선택합니다.

   코드를 선택하면 해당 출력이 브라우저에서 자동으로 강조 표시됩니다. 이 기능은 HTML 블록이 페이지에서 렌더링되는 방법을 확인하는 데 유용합니다.

   

   페이지에서 HTML 요소 선택

10. 검사 모드 설정/해제 단추를 클릭하여 검사 모드를 사용하도록 설정하고 탐색 모음을 클릭합니다. HTML 코드 오른쪽의 스타일 창에 선택한 요소에 CSS 스타일이 적용된 목록이 표시됩니다.

    참고 항목

    헤더는 사이트 레이아웃의 일부이므로 페이지 검사기 _Layout.cshtml 파일도 열고 영향을 받는 코드 세그먼트를 강조 표시합니다.

    

    선택한 요소의 스타일 및 원본 파일 검색

11. 토글 검사 포인터를 사용하도록 설정한 상태에서 마우스 포인터를 파란색 추천 표시줄 아래로 이동하고 반원을 클릭합니다.

    

    요소 선택

12. 스타일 창에서 .main-content 그룹 아래에 있는 배경 이미지 항목을 찾습니다. 배경 이미지의 선택을 취소하고 어떤 일이 일어나는지 확인합니다. 브라우저에서 변경 내용을 즉시 반영하고 원이 숨겨져 있음을 알 수 있습니다.

    참고 항목

    페이지 검사기 스타일 탭에 적용하는 변경 내용은 원래 스타일시트에 영향을 미치지 않습니다. 스타일을 선택 취소하거나 원하는 만큼 값을 변경할 수 있지만 페이지를 새로 고치면 복원됩니다.

    

    CSS 스타일 사용 및 사용 안 함

13. 이제 검사 모드를 사용하여 머리글의 '여기 로고' 텍스트를 클릭합니다.

14. 스타일 탭의 .site-title 그룹 아래에서 글꼴 크기 CSS 특성을 찾습니다. 특성 값을 두 번 클릭하고 2.3 em 값을 3 em으로 바꾼 다음 Enter 키를 누릅니다. 제목이 더 커 보입니다.

    

    페이지 검사기 CSS 값 변경

15. 페이지 검사기 오른쪽 창에 있는 추적 스타일 탭을 클릭합니다. 이는 선택 영역에 적용된 모든 스타일을 특성 이름으로 정렬하여 볼 수 있는 다른 방법입니다.

    

    선택한 요소의 CSS 스타일 추적

16. 페이지 검사기 또 다른 기능은 레이아웃 창입니다. 검사 모드를 사용하여 탐색 모음을 선택한 다음 오른쪽 창에서 레이아웃 탭을 클릭합니다. 선택한 요소의 정확한 크기와 오프셋, 여백, 안쪽 여백 및 테두리 크기가 표시됩니다. 이 보기에서 값을 수정할 수도 있습니다.

    

    페이지 검사기 요소 레이아웃

작업 2 - 사진 갤러리에서 스타일 문제 찾기 및 해결

이전 버전의 Visual Studio에서 웹 페이지 문제를 진단하려면 어떻게 해야 할까요? Internet Explorer 개발자 도구 또는 Firebug와 같이 Visual Studio IDE 외부에서 실행되는 웹 디버깅 도구에 익숙할 수 있습니다. 브라우저는 HTML, 스크립팅 및 스타일만 이해하지만 기본 프레임워크는 렌더링될 HTML을 생성합니다. 이러한 이유로 웹 페이지의 모양을 확인하기 위해 전체 사이트를 배포해야 하는 경우가 많습니다.

웹 사이트에서 문제를 감지하고 수정하려는 경우 다음 단계를 수행했을 것입니다.

1. Visual Studio에서 솔루션을 실행하거나 웹 서버에 페이지를 배포합니다.
2. 브라우저에서 사용하는 개발자 도구를 열거나 소스 코드와 스타일을 열고 문제를 일치시키려고 합니다. 관련된 파일을 찾으려면 스타일 클래스의 이름과 함께 "검색" 또는 "파일에서 검색" 기능을 사용했을 것입니다.
3. 오류가 감지되면 웹 브라우저와 서버를 중지합니다.
4. 브라우저 캐시를 지웁니다.
5. Visual Studio로 돌아가서 수정 사항을 적용합니다. 테스트할 모든 단계를 반복합니다.

ASP.NET MVC 4에는 실제 WYSIWYG가 없으므로 웹 애플리케이션을 실행하거나 배포한 후 이후 단계에서 대부분의 스타일 문제가 검색됩니다. 이제 페이지 검사기 솔루션을 실행하지 않고도 페이지를 미리 볼 수 있습니다.

이 작업에서는 페이지 검사기를 사용하고 사진 갤러리 응용 프로그램에서 몇 가지 문제를 해결합니다.

1. 페이지 검사기 사용하여 헤더 왼쪽에 있는 레지스터 및 로그 인 링크를 찾습니다.

   링크는 오른쪽의 예상 위치에 표시되지 않으며 글머리 기호 목록처럼 표시됩니다. 이제 오른쪽에 링크를 정렬하고 그에 따라 다시 정렬합니다.

   

   등록 및 로그인 링크 찾기

2. 검사 모드 설정/해제를 선택한 상태에서 [등록] 링크를 클릭하지 않고 가까이를 클릭하여 해당 코드를 엽니다.

   링크의 소스 코드는 Index.cshtml 이나 _Layout.cshtml이 아닌 _LoginPartial.cshtml 파일에 있습니다. 올바른 원본 파일에 직접 배치되었습니다.

3. 스타일 탭에서 이러한 링크의< HTML 컨테이너인 섹션> #login 항목을 찾아 클릭합니다.

   #login 스타일은 클릭한 후 Site.css 자동으로 배치됩니다. 또한 이제 코드가 강조 표시됩니다.

   

   CSS 스타일 선택

4. 여는 문자와 닫는 문자를 제거하고 Site.css 파일을 저장하여 강조 표시된 코드에서 텍스트 맞춤 특성의 주석 처리를 제거합니다.

   페이지 검사기 현재 페이지를 작성하는 모든 다른 파일을 알고 있으며 이러한 파일이 변경되는 시기를 감지할 수 있습니다. 브라우저의 현재 페이지가 원본 파일과 동기화되지 않을 때마다 경고합니다.

5. 페이지 검사기 브라우저에서 주소 표시줄 아래에 있는 막대를 클릭하여 페이지를 다시 로드합니다.

   

   페이지 다시 로드

   링크는 이제 오른쪽에 있지만 여전히 글머리 기호 목록처럼 보입니다. 이제 글머리 기호를 제거하고 링크를 가로로 맞춥니다.

   

   업데이트된 페이지

6. 검사 모드를 사용하여 "등록" 및 "로그인" 링크가 포함된 li> 항목을 선택합니다<. 그런 다음 항목 #login 섹션>을 클릭하여< Styles.css 코드에 액세스 합니다.

   

   스타일 찾기

7. Style.css #login li 항목에 대한 코드의 주석 처리를 제거합니다. 추가하는 스타일은 글머리 기호를 숨기고 항목을 가로로 표시합니다.

   

   로그인 링크 다시 실행

8. Style.css 파일을 저장하고 주소 아래에 있는 막대를 한 번 클릭하여 페이지를 다시 로드합니다. 링크가 올바르게 표시됩니다.

   

   오른쪽에 맞춰진 링크

9. 마지막으로 헤더 제목을 변경합니다. 검사 모드를 사용하여 텍스트에서 로고를 클릭하고 이를 생성하는 소스 코드로 이동합니다.

10. 이제 _Layout.cshtml에 있으므로 '여기 로고' 텍스트를 '사진 갤러리'로 바꿉니다. 페이지 검사기 브라우저를 저장하고 업데이트합니다.

    

    새 제목 할당

    

    사진 갤러리 페이지 업데이트됨

11. 마지막으로 PhotoGallery 프로젝트를 선택하고 F5 키를 눌러 앱을 실행합니다. 모든 변경 내용이 예상대로 작동하는지 확인합니다.

연습 2: WebForms 프로젝트에서 페이지 검사기 사용

이 연습에서는 페이지 검사기 사용하여 WebForms 솔루션을 미리 보고 디버그하는 방법을 알아봅니다. 먼저 도구 주위에 간단한 랩을 수행하여 웹 디버깅 프로세스를 용이하게 하는 페이지 검사기 기능을 알아봅니다. 그런 다음, 스타일 지정 문제가 포함된 웹 페이지에서 작업합니다. 페이지 검사기 사용하여 문제를 생성하는 소스 코드를 찾고 해결하는 방법을 알아봅니다.

작업 1 - 페이지 검사기 탐색

이 작업에서는 사진 갤러리를 보여 주는 WebForms 프로젝트의 컨텍스트에서 페이지 검사기 기능을 사용하는 방법을 알아봅니다.

1. Source/Ex2-WebForms/Begin/폴더에 있는 Begin 솔루션을 엽니다.

   1. 계속하려면 몇 가지 누락된 NuGet 패키지를 다운로드해야 합니다. 이렇게 하려면 프로젝트 메뉴를 클릭하고 NuGet 패키지 관리를 선택합니다.

   2. NuGet 패키지 관리 대화 상자에서 복원을 클릭하여 누락된 패키지를 다운로드합니다.

   3. 마지막으로 빌드 솔루션 빌드를 클릭하여 솔루션을 빌드 | 합니다.

      참고 항목

      NuGet을 사용할 때의 이점 중 하나는 프로젝트의 모든 라이브러리를 배송할 필요가 없어 프로젝트 크기를 줄일 수 있다는 것입니다. NuGet Power Tools를 사용하면 Packages.config 파일에서 패키지 버전을 지정하면 프로젝트를 처음 실행할 때 필요한 모든 라이브러리를 다운로드할 수 있습니다. 이 때문에 이 랩에서 기존 솔루션을 연 후 이러한 단계를 실행해야 합니다.

2. 솔루션 탐색기 Default.aspx 페이지를 찾아 마우스 오른쪽 단추로 클릭하고 페이지 검사기 보기를 선택합니다.

   

   페이지 검사기 사용하여 Default.aspx 열기

3. 페이지 검사기 창에 Default.aspx 표시됩니다.

   

   페이지 검사기 Default.aspx 보기

   페이지 검사기 도구는 Visual Studio 환경에 통합됩니다. 검사기에서는 선택한 코드를 표시하는 강력한 HTML 프로파일러와 함께 포함된 브라우저를 포함합니다. 페이지 모양을 확인하기 위해 솔루션을 실행할 필요가 없습니다.

   참고 항목

   페이지 검사기 브라우저의 너비가 열린 페이지의 너비보다 작으면 페이지가 제대로 표시되지 않습니다. 이 경우 페이지 검사기 너비를 조정합니다.

4. 페이지 검사기 파일 탭을 클릭합니다.

   렌더링된 기본 페이지를 작성하는 모든 원본 파일이 표시됩니다. 이 기능은 특히 사용자 컨트롤 및 마스터 페이지를 사용하는 경우 모든 요소를 한눈에 식별하는 데 유용한 기능입니다. 각 파일로 이동할 수도 있습니다.

   

   파일 탭

5. 탭 왼쪽에 있는 검사 모드 설정/해제 단추를 클릭합니다.

   이 도구를 사용하면 페이지의 요소를 선택하고 HTML 코드와 .aspx 소스를 볼 수 있습니다.

   

   검사 모드 설정/해제 단추

6. 페이지 검사기 브라우저에서 페이지 요소 위로 마우스를 이동합니다. 마우스 포인터를 렌더링된 페이지의 모든 부분으로 이동하는 동안 요소 유형이 표시되고 Visual Studio 편집기에서 해당 소스 태그 또는 코드가 강조 표시됩니다.

   

   작동 중인 검사 모드

   참고 항목

   페이지 검사기 창을 최대화하지 않거나 소스 코드를 보여 주는 미리 보기 탭을 볼 수 없습니다. 페이지 검사기 요소를 최대화할 때 클릭하면 선택 영역의 소스 코드가 표시되지만 페이지 검사기 창이 숨겨집니다.

   Default.aspx 파일에 주의를 기울이면 선택한 요소를 생성하는 소스 코드 부분이 강조 표시됩니다. 이 기능은 긴 소스 파일의 버전을 용이하게 하여 코드에 직접 액세스하는 빠르고 빠른 방법을 제공합니다.

   

   요소 검사

7. 페이지 검사기 탭에 있는 검사 모드 설정/해제 단추()를 클릭하여 커서를 사용하지 않도록 설정합니다.

8. HTML 탭을 선택하여 페이지 검사기 브라우저에 렌더링된 HTML 코드를 표시합니다.

9. HTML 코드에서 Koala 링크가 있는 목록 항목을 찾아 선택합니다.

   코드를 선택하면 해당 출력이 브라우저에 자동으로 강조 표시됩니다. 이 기능은 HTML 블록이 페이지에서 렌더링되는 방법을 확인하는 데 유용합니다.

   

   페이지에서 HTML 요소 선택

10. 검사 모드 설정/해제 단추를 클릭하여 검사 모드를 사용하도록 설정하고 탐색 모음을 클릭합니다. HTML 코드 오른쪽의 스타일 창에 선택한 요소에 CSS 스타일이 적용된 목록이 표시됩니다.

    참고 항목

    머리글은 사이트 레이아웃의 일부이므로 페이지 검사기 Site.Master 파일도 열고 영향을 받는 코드 세그먼트를 강조 표시합니다.

    

    선택한 요소의 스타일 및 원본 파일 검색

11. 토글 검사 포인터를 사용하도록 설정한 상태에서 메뉴 모음 아래로 마우스 포인터를 이동하고 빈 반원을 클릭합니다.

    

    요소 선택

12. 스타일 창에서 .main-content 그룹 아래에 있는 배경 이미지 항목을 찾습니다. 배경 이미지의 선택을 취소하고 어떤 일이 일어나는지 확인합니다. 브라우저에서 변경 내용을 즉시 반영하고 원이 숨겨져 있음을 알 수 있습니다.

    참고 항목

    페이지 검사기 스타일 탭에 적용하는 변경 내용은 원래 스타일시트에 영향을 미치지 않습니다. 스타일을 선택 취소하거나 원하는 만큼 값을 변경할 수 있지만 페이지를 새로 고치면 복원됩니다.

    

    CSS 스타일 사용 및 사용 안 함

13. 이제 검사 모드를 사용하여 머리글의 '여기 로고' 텍스트를 클릭합니다.

14. 스타일 탭의 .site-title 그룹 아래에서 글꼴 크기 CSS 특성을 찾습니다. 특성을 한 번 두 번 클릭하여 해당 값을 편집합니다. 2.3em 값을 3em으로 바꾼 다음 Enter 키를 누릅니다. 제목이 더 커 보입니다.

    

    페이지 검사기 CSS 값 변경

15. 페이지 검사기 오른쪽 창에 있는 추적 스타일 탭을 클릭합니다. 이는 선택 영역에 적용된 모든 스타일을 특성 이름으로 정렬하여 볼 수 있는 다른 방법입니다.

    

    선택한 요소의 CSS 스타일 추적

16. 페이지 검사기 또 다른 기능은 레이아웃 창입니다. 검사 모드를 사용하여 탐색 모음을 선택한 다음 오른쪽 창에서 레이아웃 탭을 클릭합니다. 선택한 요소의 정확한 크기와 오프셋, 여백, 안쪽 여백 및 테두리 크기가 표시됩니다. 이 보기에서 값을 수정할 수도 있습니다.

    

    페이지 검사기 요소 레이아웃

작업 2 - 사진 갤러리에서 스타일 문제 찾기 및 해결

이전 버전의 Visual Studio에서 웹 페이지 문제를 진단하려면 어떻게 해야 할까요? Internet Explorer 개발자 도구 또는 Firebug와 같이 Visual Studio IDE 외부에서 실행되는 웹 디버깅 도구에 익숙할 수 있습니다. 브라우저는 HTML, 스크립팅 및 스타일만 이해하지만 기본 프레임워크는 렌더링될 HTML을 생성합니다. 이러한 이유로 웹 페이지의 모양을 확인하기 위해 전체 사이트를 배포해야 하는 경우가 많습니다.

웹 사이트에서 문제를 감지하고 수정하려는 경우 다음 단계를 수행했을 것입니다.

1. Visual Studio에서 솔루션을 실행하거나 웹 서버에 페이지를 배포합니다.
2. 브라우저에서 사용하는 개발자 도구를 열거나 소스 코드와 스타일을 열고 문제를 일치시키려고 합니다. 관련된 파일을 찾으려면 스타일 클래스의 이름과 함께 "검색" 또는 "파일에서 검색" 기능을 사용했을 것입니다.
3. 오류가 감지되면 웹 브라우저와 서버를 중지합니다.
4. 브라우저 캐시를 지웁니다.
5. Visual Studio로 돌아가서 수정 사항을 적용합니다. 테스트할 모든 단계를 반복합니다.

ASP.NET WebForms에는 실제 WYSIWYG가 없으므로 실행 또는 배포 후 이후 단계에서 일부 스타일 문제가 검색됩니다. 이제 페이지 검사기 솔루션을 실행하지 않고도 페이지를 미리 볼 수 있습니다.

이 작업에서는 사진 갤러리 애플리케이션의 몇 가지 문제를 해결하기 위해 페이지 검사기를 사용합니다. 다음 단계에서는 헤더에서 몇 가지 간단한 스타일 지정 문제를 감지하고 신속하게 해결합니다.

1. 페이지 검사를 사용하여 머리글의 왼쪽에 있는 레지스터 및 로그인 링크를 찾습니다.

   링크가 오른쪽의 예상 위치에 표시되지 않습니다. 이제 오른쪽에 링크를 정렬하고 그에 따라 다시 정렬합니다.

   

   왼쪽에 있는 로그인 링크

2. 검사 모드 전환이 선택된 상태에서 로그인 링크를 선택하여 해당 코드를 엽니다.

   링크 소스 코드는 처음에 표시될 수 있는 Default.aspx 페이지가 아니라 Site.Master 파일에 있습니다. 올바른 원본 파일에 직접 배치되었습니다.

3. 스타일 탭에서 이러한 링크의< HTML 컨테이너인 섹션> #login 항목을 찾아 클릭합니다.

   #login 스타일은 클릭한 후 Site.css 자동으로 배치됩니다. 또한 이제 코드가 강조 표시됩니다.

   

   CSS 스타일 선택

4. 여는 문자와 닫는 문자를 제거하고 Site.css 파일을 저장하여 강조 표시된 코드에서 텍스트 맞춤 특성의 주석 처리를 제거합니다.

   페이지 검사기 현재 페이지를 작성하는 모든 다른 파일을 알고 있으며 이러한 파일이 변경되는 시기를 감지할 수 있습니다. 브라우저의 현재 페이지가 원본 파일과 동기화되지 않을 때마다 경고합니다.

5. 페이지 검사기 브라우저에서 주소 표시줄 아래에 있는 막대를 클릭하여 변경 내용을 저장하고 페이지를 다시 로드합니다.

   

   페이지 다시 로드

   링크는 이제 오른쪽에 있지만 여전히 글머리 기호 목록처럼 보입니다. 이제 글머리 기호를 제거하고 링크를 가로로 맞춥니다.

   

   업데이트된 페이지

6. 검사 모드를 사용하여 "등록" 및 "로그인" 링크가 포함된 li> 항목을 선택합니다<. 그런 다음 항목 #login 섹션>을 클릭하여< Styles.css 코드에 액세스 합니다.

   

   스타일 찾기

7. Style.css #login li 항목에 대한 코드의 주석 처리를 제거합니다. 추가하는 스타일은 글머리 기호를 숨기고 항목을 가로로 표시합니다.

   

   로그인 링크 다시 실행

8. Style.css 파일을 저장하고 주소 아래에 있는 막대를 한 번 클릭하여 페이지를 다시 로드합니다. 링크가 올바르게 표시됩니다.

   

   오른쪽에 맞춰진 링크

9. 마지막으로 헤더 제목을 변경합니다. 모든 파일에서 '여기에 있는 로고' 텍스트를 검색하는 대신 검사 모드를 사용하여 텍스트를 클릭하고 해당 텍스트를 생성하는 소스 코드로 이동합니다.

   

   사이트 제목 찾기

10. 이제 Site.Master에 있으므로 '여기에 있는 로고' 텍스트를 '사진 갤러리'로 바꿉 있습니다. 페이지 검사기 브라우저를 저장하고 업데이트합니다.

    

    사진 갤러리 페이지 업데이트됨

11. 마지막으로 F5 키를 눌러 앱을 실행하면 모든 변경 내용이 예상대로 작동합니다.

요약

이 실습 랩을 완료하면 브라우저에서 웹 사이트를 다시 빌드하고 실행하지 않고도 페이지 검사기 사용하여 웹 애플리케이션을 미리 보는 방법을 알아봅니다. 또한 렌더링된 출력에서 소스 코드로 직접 액세스하여 버그를 빠르게 찾고 수정하는 방법을 알아봅니다.

부록 A: Visual Studio Express 2012 for Web 설치

Microsoft 웹 플랫폼 설치 관리자 사용하여 웹용 Microsoft Visual Studio Express 2012 또는 다른 "Express" 버전을 설치할 수 있습니다. 다음 지침은 Microsoft 웹 플랫폼 설치 관리자 사용하여 Visual Studio Express 2012 for Web을 설치하는 데 필요한 단계를 안내합니다.

1. [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169)로 이동합니다. 또는 웹 플랫폼 설치 관리자를 이미 설치한 경우 해당 설치 관리자를 열고 "Visual Studio Express 2012 for Web with Windows Azure SDK" 제품을 검색할 수 있습니다.

2. 지금 설치를 클릭합니다. 웹 플랫폼 설치 관리자가 없는 경우 먼저 다운로드하여 설치하도록 리디렉션됩니다.

3. 웹 플랫폼 설치 관리자가 열리면 설치를 클릭하여 설치를 시작합니다.

   

   Visual Studio Express 설치

4. 모든 제품의 라이선스 및 사용 약관을 읽고 동의를 클릭하여 계속합니다.

   

   사용 조건 동의

5. 다운로드 및 설치 프로세스가 완료될 때까지 기다립니다.

   

   설치 진행률

6. 설치가 완료되면 마침을 클릭합니다.

   

   설치 완료

7. 종료를 클릭하여 웹 플랫폼 설치 관리자를 닫습니다.

8. Visual Studio Express for Web을 열려면 시작 화면으로 이동하여 "VS Express" 쓰기를 시작한 다음 VS Express for Web 타일을 클릭합니다.

   

   VS Express for Web 타일