InternetExplorer IE브라우저 F12 개발자 도구 시작

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

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

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

• Internet Explorer 스크립트 오류 처리 방법
• 질문: Explorer 옵션에서 자동 스크립트 디버거를 끌 수 없습니다.

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

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

• 웹 페이지 도구
  • 파일 메뉴
  • 찾기 메뉴
  • 사용 안 함 메뉴
  • 보기 메뉴
  • 이미지 메뉴
  • 캐시 메뉴
  • 도구 메뉴
  • 유효성 검사 메뉴
  • 브라우저 모드 메뉴
  • 문서 모드 메뉴
• 관련 항목

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

웹 페이지 도구

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

파일 메뉴

찾기 메뉴

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

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

사용 안 함 메뉴

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

보기 메뉴

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

이미지 메뉴

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

캐시 메뉴

도구 메뉴

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

메뉴 항목	설명
크기 조정	일부 미리 정의된 화면 크기를 갖는 하위 메뉴와 화면 크기를 사용자 지정하기 위한 옵션을 제공합니다. 미리 정의된 화면 크기를 선택하면 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 단추나 이 메뉴의 색 선택 숨기기를 클릭하여 대화 상자를 닫습니다.
윤곽선 요소	요소의 크기와 위치를 쉽게 식별할 수 있도록 하여 페이지 레이아웃 파악과 디버그를 도와줍니다. 색을 설정하여 특정 요소 유형의 모든 요소를 식별할 수 있습니다. 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에서 페이지가 어떻게 해석되는지 테스트할 수 있습니다. 웹 페이지에 대한 변경 내용은 iframe을 비롯한 페이지의 모든 문서에 적용됩니다.