F12 개발자 도구 시작

이 콘텐츠는 이전 버전의 F12 개발자 도구를 참조합니다.최신 F12 도구 설명서를 참조하세요.

고유한 콘텐츠를 테스트하거나 디버그하려는 웹 페이지 개발자가 아닌 경우 유용한 몇 가지 링크는 다음과 같습니다.

이 링크는 모든 버전의 Windows Internet Explorer에 유용합니다.

F12 도구를 닫으려면 F12를 다시 누르거나 F12 도구의 오른쪽 위에 있는 X를 클릭합니다.

Internet Explorer 도구 모음이 계속 표시되게 하려면 Alt, 보기를 차례로 클릭하고 도구 모음을 가리킨 다음 메뉴 모음을 선택하고 도구 모음 잠금을 클릭합니다. Internet Explorer, 윈도우 탐색기에 메뉴 표시줄, 도구 모음이 없음 기술 자료 문서에서 자세한 내용을 확인할 수도 있습니다.

F12 도구 메뉴와 단추는 도구 제품군을 탐색하는 데 유용한 페이지 및 시각적 도구를 제공합니다. 도구 내에서 문서에 포함된 모든 링크의 보고서 목록을 만들거나, 문서 모드를 변경하거나, 페이지에 특정 요소의 윤곽선을 시각적으로 표시할 수 있습니다. 이 항목의 내용은 다음과 같습니다.

참고  F12 도구는 몇 가지 바로 가기 키를 Internet Explorer와 공유합니다. F12 도구용 바로 가기를 사용하려면 F12 도구에 포커스가 있는지 확인해야 합니다. 즉, F12 개발자 도구를 클릭한 다음 바로 가기 키를 사용합니다.

웹 페이지 도구

기본 메뉴에는 많은 도구와 옵션이 있습니다. F12 도구 제품군 내의 많은 도구는 웹 페이지나 브라우저 자체에서 작동하거나 다양한 코드 보기의 옵션과 기능에 액세스하는 방법을 제공합니다. 다음 표에서는 도구가 제공하는 메뉴와 옵션에 대해 간략하게 설명합니다.

파일 메뉴

메뉴 항목설명
모두 실행 취소현재 Internet Explorer 인스턴스에 대해 수행된 모든 변경 내용(예: 특성 값)을 원래대로 되돌리고 웹 페이지를 새로 고칩니다.
Internet Explorer 보기 원본 사용자 지정 보기 원본 뷰어 설정을 위한 다음 옵션을 포함하는 메뉴가 제공됩니다.
  • 기본 뷰어: 코드 서식 기능이 있는 기본 제공 뷰어를 사용합니다.
  • 메모장: Windows 메모장을 사용하여 원본을 표시합니다.
  • 기타: 컴퓨터에 설치된 다른 편집기 또는 뷰어 응용 프로그램을 찾아보고 지정할 수 있습니다.
온라인 도움말 (F1)이 설명서에 대한 링크를 제공합니다.
끝내기 (F12)F12 도구를 닫습니다.

 

찾기 메뉴

찾기 메뉴에는 클릭으로 요소 선택 항목 한 개만 있습니다. 클릭하여 요소 선택 단추를 클릭하거나 클릭으로 요소 선택 단추의 그림Ctrl+B를 눌러 메뉴 항목에서 이 기능을 사용하도록 설정할 수 있습니다. 이 기능을 사용하도록 설정하면 웹 페이지에서 요소를 클릭하여 선택할 수 있습니다. 웹 페이지에서 요소를 클릭하면 해당 요소 주위에 테두리가 그려집니다. HTML 탭이 열려 있으면 왼쪽 창이 스크롤되어 선택한 요소를 강조 표시합니다. 선택한 현재 속성 유형(스타일, 추적 스타일, 레이아웃 또는 특성)에 따라 선택한 요소의 속성이 속성 창(오른쪽 창)에 표시됩니다. 현재 HTML 탭이 열려 있지 않은 경우 클릭으로 요소 선택을 사용하면 해당 요소가 선택되고 포커스가 다시 HTML 탭으로 자동으로 전환됩니다. 클릭으로 요소 선택은 요소를 클릭할 때까지만 활성화됩니다.

참고  Ctrl+B를 사용하려면 F12 도구 내부에 포커스가 있어야 합니다. 웹 페이지에 포커스가 있으면 즐겨찾기 관리 대화 상자가 표시됩니다.

클릭으로 선택된 요소의 그림

사용 안 함 메뉴

이 메뉴는 사용자가 브라우저에서 특정 기능을 사용하지 않도록 설정할 경우 표시되는 사이트 환경을 테스트할 수 있도록 도와줍니다. 이 메뉴를 사용하여 이러한 기능을 설정하고 해제합니다.

메뉴 항목설명
스크립트웹 페이지의 모든 스크립트를 사용할 수 없게 설정합니다. 선택하면 명령이 설정되고 페이지가 새로 고쳐집니다. 인터넷 보안에서 보호 모드가 설정으로 지정된 경우에는 이 명령을 사용할 수 없습니다. 이 명령을 사용하려면 인터넷 옵션의 보안 탭에서 보호 모드 사용을 선택 취소합니다.
팝업 차단이 웹 사이트에서 팝업이 허용되도록 모든 팝업 차단을 사용할 수 없게 설정합니다.
CSS웹 페이지에서 모든 CSS(CSS 스타일 시트)를 사용할 수 없게 설정합니다. 이 옵션을 선택하면 명령이 설정되고 CSS를 끈 상태로 페이지가 새로 고쳐집니다. 웹 페이지를 새로 고치거나 디버깅 스크립트(웹 페이지를 새로 고침)를 시작하면 CSS가 다시 사용되도록 설정됩니다.

 

보기 메뉴

이 메뉴를 사용하면 HTML 트리나 소스에서 먼저 항목을 찾지 않고 페이지의 요소에 대한 정보를 볼 수 있습니다.

메뉴 항목설명
클래스 및 ID 정보 (Ctrl+I)웹 페이지에 모든 HTML 요소의 클래스 및 ID 값을 표시합니다. 해당 요소 내의 정보가 웹 페이지에 오버레이로 표시됩니다. 오버레이를 두 번 클릭하여 정보를 강조 표시합니다. 복사하려면 Ctrl+C를 누릅니다.
링크 경로웹 페이지의 모든 링크에 대한 링크 경로를 표시합니다. 정보가 웹 페이지 요소에 텍스트 오버레이로 표시됩니다. 오버레이를 두 번 클릭하여 정보를 강조 표시합니다. 복사하려면 Ctrl+C를 누릅니다.
링크 보고서이 웹 페이지에 있는 모든 링크 목록을 생성하고 새 Internet Explorer 인스턴스에서 보고합니다. 이렇게 하면 전체 HTML 소스를 찾아보지 않고도 쉽고 편리하게 모든 링크를 검사할 수 있습니다.
탭 인덱스탭 인덱스를 tabindex 특성이 정의된 요소에 대해 웹 페이지에 오버레이된 숫자로 표시합니다.
선택키선택기를 accesskey 특성이 정의된 웹 페이지의 요소에 대한 오버레이로 표시합니다.
원본 보기 메뉴의 하위 메뉴로, 다음 표에 설명이 나와 있습니다.

 

원본 하위 메뉴 항목설명
스타일이 적용된 요소 원본선택한 요소의 HTML 소스 및 해당 내용만 이 요소에 적용되는 CSS와 함께 새 창에 표시합니다. 이렇게 하면 선택한 요소의 소스에만 집중할 수 있습니다. 이 명령을 실행하려면 먼저 HTML 탭 보기를 사용하여 HTML 트리 본문 내의 HTML 요소를 선택해야 합니다. 요소를 선택하려면 클릭으로 요소 선택 명령을 사용하거나 HTML 트리에서 요소를 클릭합니다.
DOM(요소)선택한 요소의 HTML 원본과 해당 콘텐츠만 새 창에 표시합니다. 이 명령을 실행하려면 먼저 HTML 탭 보기를 사용하여 HTML 요소를 선택해야 합니다. 요소를 선택하려면 클릭으로 요소 선택 명령을 사용합니다.
DOM(페이지)새 창에 전체 HTML 원본과 요소 중첩을 표시합니다. 이 소스 보기에는 Internet Explorer에 표현되는 대로 스크립트를 사용하여 DOM에 동적으로 기록되는 소스를 비롯한 페이지의 DOM(문서 개체 모델) 구조가 표시됩니다.
원본새 창에 원래 HTML 원본을 표시합니다.

 

이미지 메뉴

이 메뉴에서 제공하는 명령은 요소의 크기와 위치를 쉽게 식별할 수 있도록 하여 페이지 레이아웃 파악과 디버그를 도와줍니다. 또한 요소 유형을 기준으로 색을 구분하여 특정 유형의 모든 요소를 시각적으로 식별할 수 있게 합니다.

메뉴 항목설명
이미지 사용 안 함웹 페이지의 모든 이미지 렌더링을 해제합니다. 이 명령을 사용하면 웹 페이지가 이미지를 표시하지 않고 새로 고쳐지며 이미지 파일 크기 표시 명령이 비활성화됩니다.
이미지 크기 표시이미지의 크기를 웹 페이지에 있는 모든 이미지에 대한 텍스트 오버레이로 표시합니다.
이미지 파일 크기 표시이미지의 파일 크기를 웹 페이지에 있는 모든 이미지에 대한 텍스트 오버레이로 표시합니다. 파일 크기는 바이트 단위로 보고됩니다. 이미지 사용 안 함 명령이 사용될 경우 이 명령을 사용되지 않습니다.
이미지 경로 표시이미지의 절대 경로를 웹 페이지에 있는 모든 이미지에 대한 오버레이로 표시합니다.
대체 텍스트 보기해당 alt 특성이 정의된 모든 이미지에 대한 대체 텍스트를 표시합니다. alt 특성이 정의되지 않은 이미지에는 오버레이가 표시되지 않습니다.
이미지 보고서 보기현재 웹 페이지의 본문 코드에 정의된 모든 이미지 목록을 생성하고 새 Internet Explorer 탭에 표시합니다. CSS를 사용하여 로드된 이미지(예: "background-image:url()")는 이 목록에 포함되지 않습니다.

 

캐시 메뉴

메뉴 항목설명
항상 서버에서 새로 고침 Internet Explorer가 캐시된 콘텐츠를 사용하지 않고 항상 서버에서 웹 페이지 콘텐츠를 갖도록 합니다. 이 명령은 선택 취소하거나 Internet Explorer 인스턴스를 닫을 때까지 지속됩니다.
브라우저 캐시 지우기... (Ctrl+R)브라우저 캐시와 모든 임시 파일을 삭제합니다.
이 도메인에 대해 브라우저 캐시 지우기... (Ctrl+B)현재 도메인에 속하는 모든 브라우저 캐시와 모든 임시 파일만 삭제합니다.
쿠키 해제이 Internet Explorer 인스턴스에서 모든 쿠키를 사용할 수 없게 설정합니다. 이 명령은 선택 취소하거나 Internet Explorer 인스턴스를 닫을 때까지 지속됩니다.
세션 쿠키 지우기이 브라우저 세션 동안 획득한 모든 쿠키를 삭제합니다.
도메인에 대한 쿠키 지우기현재 세션에서 모든 쿠키를 삭제합니다.
쿠키 정보 보기Internet Explorer에 저장된 모든 쿠키 목록을 생성하고 새 Internet Explorer 인스턴스에서 보고합니다. 쿠키 사용 방법에 대해서는 cookie property 참조를 참조하세요.

 

도구 메뉴

이 메뉴에서 제공하는 다양한 도구는 여러 해상도로 사이트 테스트, 사용자 에이전트 문자열 변경, 페이지의 영역 측정, 페이지에서 한 점의 특정 색 캡처와 같은 일반적인 작업을 도와줍니다.

메뉴 항목설명
크기 조정일부 미리 정의된 화면 크기를 갖는 하위 메뉴와 화면 크기를 사용자 지정하기 위한 옵션을 제공합니다. 미리 정의된 화면 크기를 선택하면 Internet Explorer 창의 크기가 선택한 크기로 즉시 조정됩니다. 하위 메뉴는 미리 설정된 4개의 크기(바로 가기 포함)와 사용자 지정 설정을 제공합니다.
800x600Ctrl+Shift+1
1024x768Ctrl+Shift+2
1280x768Ctrl+Shift+3
1280x1024Ctrl+Shift+4
사용자 지정(바로 가기 없음)

 

사용자 지정 설정을 선택하면 테스트할 화면 크기를 입력할 수 있는 대화 상자가 표시됩니다. 사용자 지정 항목은 브라우저를 닫은 후에도 유지되므로 이후 테스트 세션에서 다시 사용할 수 있습니다.

사용자 지정 화면 크기 조정 대화 상자의 그림
사용자 에이전트 문자열 변경

웹 페이지를 요청할 때 웹 사이트로 전송되는 사용자 에이전트 문자열을 변경할 수 있습니다. 미리 설정된 사용자 에이전트 문자열 집합과 사용자 지정 옵션이 있습니다. 사용자 지정 옵션을 선택하면 고유한 문자열을 입력할 수 있는 대화 상자가 표시됩니다. 사용자 지정 항목을 저장하면 사용자 에이전트 문자열 변경 하위 메뉴에 표시됩니다. 변경 내용을 표시하려면 페이지를 새로 고칩니다. docmode를 변경하면 사용자 지정 사용자 에이전트 설정이 다시 정의됩니다.

사용자 지정 사용자 에이전트 문자열 대화 상자의 그림
탐색 시 항목 지우기

디버깅 세션에서 새 웹 페이지로 이동할 때 콘솔 메시지와 네트워크 탭 로그를 지우거나 지속할 수 있습니다. 기본적으로 Internet Explorer는 페이지를 닫을 때 콘솔 메시지와 네트워크 탭 캡처 로그를 모두 지웁니다.

눈금자 표시(Ctrl+L)

화면에서 임의 개체를 측정할 수 있습니다. 도구 사용에 대한 옵션과 힌트가 포함된 눈금자 대화 상자가 열립니다. 여러 색과 눈금자가 지원됩니다. 정확한 측정을 위해 돋보기도 사용할 수 있습니다. Ctrl+M을 눌러 돋보기를 설정하거나 해제합니다. 눈금자는 화면의 점 위치를 기준으로 눈금자 양끝의 ("x,y") 좌표를 표시하며 눈금자 가운데에 길이가 픽셀 단위로 표시됩니다. 커서로 눈금자를 가리키면 눈금자 대화 상자의 맨 아래에도 측정값이 표시됩니다. 눈금자를 이동하고 크기 및 각도를 조정할 수 있습니다. 눈금자를 제거하려면 해당 눈금자를 선택하고 Delete 키를 누릅니다. 작업이 완료되면 오른쪽 위에 있는 X 단추를 클릭하여 대화 상자를 닫습니다. 대화 상자를 닫으면 모든 눈금자가 숨겨집니다. 눈금자 대화 상자를 열면 눈금자가 표시됩니다.

색 선택 표시(Ctrl+K)

페이지의 임의 개체에서 색을 샘플링할 색 선택 도구를 표시합니다. 색 선택 대화 상자에는 선택한 색 샘플이 표시됩니다. 색 선택에는 색의 RGB 및 HEX 값도 표시됩니다. 웹 페이지에서 사용된 색 값을 확인하려면 스포이트 커서로 원하는 색을 클릭합니다. 복사 후 닫기를 클릭하여 웹 페이지에서 사용할 값을 클립보드로 복사합니다. X 단추나 이 메뉴의 색 선택 숨기기를 클릭하여 대화 상자를 닫습니다.

F12 색 선택 대화 상자의 그림
윤곽선 요소

요소의 크기와 위치를 쉽게 식별할 수 있도록 하여 페이지 레이아웃 파악과 디버그를 도와줍니다. 색을 설정하여 특정 요소 유형의 모든 요소를 식별할 수 있습니다. CSS 선택기 구문을 사용하여 웹 페이지의 요소를 지정합니다. 예를 들어 모든 단락을 강조 표시하려면 선택기 필드에 p를 사용하고 색을 설정합니다. 선택기 사용에 대한 자세한 내용은 CSS 선택기 이해를 참조하세요.

윤곽선 요소 대화 상자의 그림

 

유효성 검사 메뉴

이 메뉴를 사용하면 웹의 유효성 검사 서비스를 통해 컴퓨터의 파일이나 현재 웹 페이지의 유효성을 검사할 수 있습니다. 이 작업을 수행할 것인지 확인하는 대화 상자가 나타납니다. 확인하지 않으면 요청이 취소됩니다.

메뉴 항목설명
HTML현재 웹 페이지의 HTML에 대한 유효성을 검사합니다. 유효성 검사 보고서가 새 창에 표시됩니다.
CSS현재 웹 페이지의 CSS에 대한 유효성을 검사합니다. 유효성 검사 보고서가 새 창에 표시됩니다.
피드웹 페이지의 RSS(Really Simple Syndication) 피드에 대한 유효성을 검사합니다. 유효성 검사 보고서가 새 창에 표시됩니다.
링크현재 웹 페이지에 있는 모든 링크의 유효성을 검사합니다. 유효성 검사 보고서가 새 창에 표시됩니다.
로컬 HTML...컴퓨터에서 유효성을 검사할 HTML 파일을 선택하는 옵션이 포함된 새 창을 엽니다.
로컬 CSS...로컬 컴퓨터에서 유효성을 검사할 CSS 파일을 선택하는 옵션이 포함된 새 창을 엽니다.
접근성

다음과 같은 사용자 서식 검사기에 액세스할 수 있습니다.

WCAG 검사 목록WCAG(W3C의 웹 콘텐츠 접근성 지침)입니다. 액세스 가능한 웹 페이지를 만들기 위한 지침을 정의합니다.
섹션 508 검사 목록 액세스 가능한 웹 페이지를 만들기 위한 미국 정부의 접근성 지침입니다.

 

여러 유효성 검사

하나 이상의 유효성 검사를 단일 요청으로 실행할 수 있습니다. 원하는 유효성 검사를 선택하고 확인을 클릭하여 요청을 시작합니다. 유효성 검사를 위해 이 페이지를 다른 사이트로 보낼 것인지 확인하는 대화 상자는 한 개만 표시됩니다. 항목을 선택할 때마다 새 탭이 열리고 결과로 생성된 유효성 검사가 포함됩니다.

다중 유효성 확인 대화 상자의 그림

 

브라우저 모드 메뉴

이 명령을 사용하면 다른 버전의 Internet Explorer를 실행 중인 사용자에 대해 웹 페이지가 어떻게 작동하는지 테스트할 수 있습니다. 예를 들어 Windows Internet Explorer 7 브라우저 모드를 선택할 경우 웹 페이지는 해당 브라우저를 기반으로 렌더링되며 최신 버전의 Internet Explorer에서만 사용할 수 있는 문서에는 액세스할 수 없게 됩니다.

메뉴 항목설명
Internet Explorer 7internet explorer 7 브라우저 모드입니다.
Windows Internet Explorer 8internet explorer 8 브라우저 모드입니다.
Windows Internet Explorer 9internet explorer 9 브라우저 모드입니다. 이 메뉴 항목을 선택하면 Internet Explorer 9에서 지원하는 HTML5, CSS3 및 기타 표준을 사용할 수 있습니다.
Internet Explorer 9 호환성 보기 Internet Explorer 9 사용자가 호환성 보기 옵션을 선택하는 경우 웹 페이지가 어떻게 표시되는지 테스트합니다.

 

문서 모드 메뉴

이 명령을 사용하면 다른 버전의 Internet Explorer에서 페이지가 어떻게 해석되는지 테스트할 수 있습니다. 웹 페이지에 대한 변경 내용은 iframe을 비롯한 페이지의 모든 문서에 적용됩니다.

메뉴 항목설명
쿼크 모드(Alt+Q)이 동작은 문서 유형이 없거나 쿼크 문서 유형을 갖는 문서를 렌더링할 때 Internet Explorer의 동작과 일치합니다. Internet Explorer 7 또는 Internet Explorer 8의 쿼크 모드와 동일하게 동작합니다.
Internet Explorer 7 표준(Alt+7) 이 동작은 Internet Explorer 7의 동작과 일치하며 엄격하거나 알려지지 않은 문서 유형을 갖는 문서를 렌더링합니다.
Internet Explorer 8 표준(Alt+8) 이 동작은 엄격하거나 알려지지 않은 문서 유형을 갖는 문서를 렌더링할 때 Internet Explorer 8에서 사용할 수 있는 가장 표준에 맞는 동작입니다.
Internet Explorer 9 표준(Alt+9) Internet Explorer 9에서 사용할 수 있는 가장 표준에 맞는 동작입니다.

 

관련 항목

F12 개발자 도구를 사용하여 웹 페이지를 디버깅하는 방법

 

 

표시:
© 2014 Microsoft