ASP.NET MVC에서 통합 브라우저와 함께 페이지 검사기 사용

작성자: Tim Ammann

Visual Studio 2012의 페이지 검사기 통합 브라우저가 있는 웹 개발 도구입니다. 통합 브라우저에서 요소를 선택하고 페이지 검사기 요소의 원본 및 CSS를 즉시 강조 표시합니다. MVC 보기를 찾아보고, 렌더링된 태그의 원본을 빠르게 찾고, Visual Studio 환경 내에서 바로 브라우저 도구를 사용할 수 있습니다.

비디오 보기

이 자습서에서는 검사 모드를 사용하도록 설정한 다음 웹 프로젝트 내에서 태그 및 CSS를 빠르게 찾아 편집하는 방법을 보여 줍니다. 이 자습서에서는 MVC 프로젝트를 사용하지만 Web Forms 및 기타 ASP.NET 애플리케이션에 페이지 검사기 사용할 수도 있습니다.

자습서에는 다음 섹션이 있습니다.

• 필수 구성 요소
• 웹 애플리케이션 만들기
• 페이지 검사기 사용하여 보기로 이동
• 검사 모드 사용
• 페이지 검사기 사용하여 태그 변경
• 검사 모드 및 HTML 창
• 스타일 창에서 CSS 변경 내용 미리 보기
• CSS 자동 동기화
• CSS 색 선택기 사용
• JavaScript에 동적 페이지 요소 매핑

사전 요구 사항

• Visual Studio 2012 또는 웹용 Visual Studio Express 2012.

참고

최신 버전의 페이지 검사기 얻으려면 웹 플랫폼 설치 관리자를 사용하여 .NET 2.0용 Windows Azure SDK를 설치합니다.

페이지 검사기 Microsoft Web 개발자 도구 번들로 제공됩니다. 최신 버전은 1.3입니다. 사용 중인 버전을 검사 Visual Studio를 실행하고 도움말 메뉴에서 Microsoft Visual Studio 정보를 선택합니다.

웹 애플리케이션 만들기

먼저 페이지 검사기 사용할 웹 애플리케이션을 만듭니다. Visual Studio에서 파일>새 프로젝트를 선택합니다. 왼쪽에서 Visual C#을 확장하고 웹을 선택한 다음 MVC4 웹 애플리케이션 ASP.NET 선택합니다.

확인을 클릭합니다.

새 ASP.NET MVC 4 프로젝트 대화 상자에서 인터넷 애플리케이션을 선택합니다. Razor를 기본 보기 엔진으로 둡니다.

애플리케이션이 원본 보기에서 열립니다.

이제 작업할 애플리케이션이 있으므로 페이지 검사기 사용하여 검사하고 수정할 수 있습니다.

페이지 검사기 사용하여 보기로 이동

Visual Studio 2012에서 프로젝트에서 보기를 마우스 오른쪽 단추로 클릭하고 페이지 검사기 보기를 선택하면 페이지 검사기 경로를 파악하고 페이지를 표시합니다.

솔루션 탐색기Views 폴더를 확장한 다음 홈 폴더를 확장합니다. Index.cshtml 파일을 마우스 오른쪽 단추로 클릭하고 페이지 검사기 보기를 선택합니다.

기본적으로 페이지 검사기 Visual Studio 환경의 왼쪽에 있는 창으로 도킹됩니다. 원하는 경우 다른 곳에 도킹하거나 창을 도킹 해제할 수 있습니다. 방법: Windows 정렬 및 도킹을 참조하세요.

페이지 검사기 창의 위쪽 창에는 브라우저 창의 현재 페이지가 표시됩니다. 아래쪽 창에는 페이지의 여러 측면을 검사할 수 있는 일부 탭과 함께 HTML 태그의 페이지가 표시됩니다. 아래쪽 창은 인터넷 Explorer F12 개발자 도구와 비슷합니다.

이 자습서에서는 HTML 및 스타일 탭을 사용하여 빠르게 탐색하고 애플리케이션을 변경합니다.

EnableInspection 모드

페이지 검사기 검사 모드로 전환하려면 검사 단추를 클릭합니다. 검사 모드에서 렌더링된 페이지의 일부에 마우스 포인터를 놓으면 해당 소스 태그 또는 코드가 강조 표시됩니다.

이제 마우스를 페이지 검사기 페이지의 여러 부분으로 이동합니다. 이렇게 하면 마우스 포인터가 큰 더하기 기호로 변경되고 아래 요소가 강조 표시됩니다.

마우스 포인터를 이동하면 Visual Studio에서 원본 파일의 해당 Razor 구문을 강조 표시합니다. HTML 요소가 다른 소스 파일에서 가져온 경우 Visual Studio에서 파일을 자동으로 엽니다.

페이지 검사기 HTML 탭에는 Razor 구문에서 생성된 HTML이 표시됩니다. 마우스 포인터를 이동하면 HTML 요소가 강조 표시됩니다. 스타일 탭에는 요소에 대한 CSS 규칙이 표시됩니다.

페이지 검사기 사용하여 태그 변경

페이지 검사기 위치가 명확하지 않을 수 있는 태그를 찾을 수 있습니다. 그런 다음 태그를 수정하고 결과 변경 내용을 확인할 수 있습니다.

이를 보려면 검사를 클릭한 다음 페이지 검사기 창에서 페이지 아래쪽으로 스크롤합니다.

마우스 포인터를 바닥글 영역으로 이동하면 페이지 검사기 _Layout.cshtml 파일을 열고 선택한 레이아웃 페이지의 섹션을 강조 표시합니다. 보듯이 바닥글 영역은 보기 자체가 아니라 레이아웃 파일에 정의됩니다.

이제 저작권 고지와 함께 마우스 포인터를 줄 위로 이동합니다. _Layout.cshtml 페이지에서 해당 줄이 강조 표시됩니다.

_Layout.cshtml 파일의 줄 끝에 텍스트를 추가합니다.

<p>© @DateTime.Now.Year - 내 ASP.NET MVC Application Rocks!</P>

이제 Ctrl+Alt+Enter를 누르거나 업데이트 표시줄을 클릭하여 페이지 검사기 브라우저 창에서 결과를 확인합니다.

Index.cshtml에 정의된 바닥글이 _Layout.cshtml에 있다고 생각했을 수도 있지만 페이지 검사기 찾을 수 있습니다.

검사 모드 및 HTML 창

다음으로 HTML 창과 요소를 매핑하는 방법을 간략하게 살펴보겠습니다.

검사를 클릭하여 페이지 검사기 검사 모드로 전환합니다.

"여기 로고"라는 페이지의 위쪽 부분을 클릭합니다. 특정 요소를 더 자세히 검사하므로 마우스 포인터를 이동할 때 브라우저 창의 표시가 더 이상 변경되지 않습니다.

이제 마우스 포인터를 HTML 창으로 이동합니다. 마우스 포인터를 이동할 때 페이지 검사기 HTML 창 내의 요소를 윤곽선으로 표시하고 브라우저 창에서 해당 요소를 강조 표시합니다.

이전과 마찬가지로 페이지 검사기 임시 탭에서 _Layout.cshtml 파일을 엽니다. _Layout.cshtml 임시 탭을 클릭하면 해당 태그가 머리글> 섹션에서 강조 표시됩니다<.

스타일 창에서 CSS 변경 내용 미리 보기

다음으로 페이지 검사기 스타일 창을 사용하여 CSS에 대한 변경 내용을 미리 봅니다.

검사를 클릭하여 페이지 검사기 검사 모드로 전환합니다.

페이지 검사기 브라우저 창에서 div.content-wrapper 레이블이 나타날 때까지 마우스 포인터를 "홈 페이지" 섹션 위로 이동합니다.

div.content-wrapper 섹션 내에서 한 번 클릭한 다음 마우스 포인터를 스타일 창으로 이동합니다. 스타일 창에는 이 요소에 대한 모든 CSS 규칙이 표시됩니다. 아래로 스크롤하여 .featured .content-wrapper 클래스 선택기를 찾습니다. 이제 배경색 속성에 대한 확인란의 선택을 취소합니다.

변경 내용이 페이지 검사기 브라우저 창에서 즉시 미리 보기되는 방식을 확인합니다.

확인란을 다시 선택한 다음 속성 값을 두 번 클릭하고 빨간색으로 변경합니다. 변경 내용은 즉시 표시됩니다.

스타일 창을 사용하면 스타일시트 자체에 변경 내용을 커밋하기 전에 CSS 변경 내용을 쉽게 테스트하고 미리 볼 수 있습니다.

CSS 자동 동기화

참고

이 기능을 사용하려면 버전 1.3의 페이지 검사기 필요합니다.

CSS 자동 동기화 기능을 사용하면 CSS 파일을 직접 편집하고 페이지 검사기 브라우저에서 즉시 변경 내용을 볼 수 있습니다.

검사를 클릭하여 페이지 검사기 검사 모드로 전환합니다.

페이지 검사기 브라우저에서 div.content-wrapper 레이블이 나타날 때까지 마우스 포인터를 "홈 페이지" 섹션 위로 이동합니다. 한 번 클릭하여 이 요소를 선택합니다.

스타일 창에는 이 요소에 대한 모든 CSS 규칙이 표시됩니다. 아래로 스크롤하여 .featured .content-wrapper 클래스 선택기를 찾습니다. ".featured .content-wrapper"를 클릭합니다. 페이지 검사기 이 스타일(Site.css)을 정의하고 해당 CSS 스타일을 강조 표시하는 CSS 파일을 엽니다.

이제 의 값을 background-color "빨강"으로 변경합니다. 변경 내용은 페이지 검사기 브라우저에 즉시 표시됩니다.

CSS 색 선택기 사용

Visual Studio 2012의 CSS 편집기에는 색을 쉽게 선택하고 삽입할 수 있는 색 선택기가 있습니다. 색 선택기는 표준 색상표를 포함하고, 표준 색 이름, 해시 코드, RGB, RGBA, HSL 및 HSLA 색을 지원하며, 문서에서 가장 최근에 사용한 색 목록을 유지 관리합니다.

이전 섹션에서는 속성의 값을 변경했습니다 background-color . 색 선택기를 호출하려면 삽입 지점을 속성 이름 뒤에 놓고 또는 rgb(를 입력 # 합니다.

색을 클릭하여 선택하거나 아래쪽 화살표 키를 누른 다음 왼쪽 및 오른쪽 화살표 키를 사용하여 색을 트래버스합니다. 색을 방문하면 해당 16진수 값이 미리 보기로 표시됩니다.

색 막대에 원하는 정확한 색이 없으면 색 선택기 팝업을 사용할 수 있습니다. 열려면 색 막대 오른쪽 끝에 있는 이중 펼침 단추를 클릭하거나 키보드에서 아래쪽 화살표를 한두 번 누릅니다.

오른쪽의 세로 막대에서 색을 클릭합니다. 기본 창에서 해당 색의 그라데이션을 표시합니다. Enter 키를 눌러 세로 막대에서 직접 색을 선택하거나 기본 창에서 아무 점이나 클릭하여 더 정밀하게 선택합니다.

사용하려는 색이 컴퓨터 화면에 있는 경우(Visual Studio 사용자 인터페이스 내에 있을 필요는 없음) 오른쪽 아래에 있는 스포이트 도구를 사용하여 해당 값을 캡처할 수 있습니다.

색 선택기 아래쪽의 슬라이더를 이동하여 색의 불투명도를 변경할 수도 있습니다. 이렇게 하면 RGBA 형식이 불투명도를 나타낼 수 있으므로 색 값이 RGBA 값으로 변경되었습니다.

색을 선택한 후 Enter 키를 누른 다음 세미콜론을 입력하여 Site.css 파일에서 배경색 항목을 완료합니다.

페이지 검사기 업데이트 표시줄

페이지 검사기 Site.css 파일의 변경 사항을 즉시 감지하고 업데이트 표시줄에 경고를 표시합니다.

모든 파일을 저장하고 페이지 검사기 브라우저를 새로 고치려면 Ctrl+Alt+Enter를 누르거나 업데이트 표시줄을 클릭합니다. 강조 색의 변경 내용이 브라우저에 표시됩니다.

JavaScript에 동적 페이지 요소 매핑

최신 웹 애플리케이션에서는 페이지의 요소가 JavaScript를 사용하여 동적으로 생성되는 경우가 많습니다. 즉, 이러한 페이지 요소에 해당하는 정적 태그(HTML 또는 Razor)가 없습니다.

버전 1.3을 사용하면 이제 페이지 검사기 페이지에 동적으로 추가된 항목을 해당 JavaScript 코드에 다시 매핑할 수 있습니다. 이 기능을 설명하기 위해 SPA(단일 페이지 애플리케이션) 템플릿을 사용합니다.

참고

SPA 템플릿에는 ASP.NET 및 Web Tools 2012.2 업데이트가 필요합니다.

Visual Studio에서 파일>새 프로젝트를 선택합니다. 왼쪽에서 Visual C#을 확장하고 웹을 선택한 다음 ASP.NET MVC4 웹 애플리케이션을 선택합니다. 확인을 클릭합니다.

새 ASP.NET MVC 4 프로젝트 대화 상자에서 단일 페이지 애플리케이션을 선택합니다.

솔루션 탐색기 Views 폴더를 확장한 다음 홈 폴더를 확장합니다. Index.cshtml 파일을 마우스 오른쪽 단추로 클릭하고 페이지 검사기 보기를 선택합니다.

페이지 검사기 브라우저에 가장 먼저 표시되는 것은 로그인 페이지입니다. "등록"을 클릭하고 사용자 이름과 암호를 만듭니다. 등록하면 애플리케이션에서 로그인하고 일부 샘플 항목이 포함된 할 일 목록을 만듭니다.

검사를 클릭하여 페이지 검사기 검사 모드로 전환합니다. 페이지 검사기 브라우저에서 할 일 항목 중 하나를 클릭합니다. 파란색으로 강조 표시된 대신 요소가 주황색으로 강조 표시되고 요소 이름 옆에 "JS"가 표시됩니다. 이는 요소가 스크립트를 통해 동적으로 생성되었음을 나타냅니다.

또한 호출 스택 탭에 주황색 밑줄이 나타납니다. 이는 호출 스택 창에 요소에 대한 자세한 정보가 있음을 나타냅니다.

호출 스택 탭을 클릭합니다. 호출 스택 창에는 요소를 만든 JavaScript 호출에 대한 호출 스택이 표시됩니다. jQuery와 같은 외부 라이브러리에 대한 호출은 축소되므로 애플리케이션 스크립트에 대한 호출을 쉽게 볼 수 있습니다.

외부 라이브러리에 대한 호출을 포함하여 전체 스택을 보려면 "외부 라이브러리"라는 레이블이 지정된 노드를 확장할 수 있습니다.

호출 스택에서 항목을 클릭하면 Visual Studio에서 코드 파일을 열고 해당 스크립트를 강조 표시합니다.

참고 항목

Visual Studio를 사용하여 MVC 4 ASP.NET 소개 (ASP.net 웹 사이트)

페이지 검사기 소개(채널 9 비디오)

페이지 검사기 오류 메시지(MSDN)