F12 도구의 새로운 기능

새로운 F12 개발자 도구를 디버그하고 디스플레이 문제를 해결하며, 성능을 향상시키고 웹 페이지의 안정성을 높일 수 있습니다.

완전히 다시 빌드됨

Internet Explorer 11의 F12 도구는 다음을 제공하기 위해 완전히 다시 빌드되었습니다.

  • 깔끔해진 새로운 사용자 인터페이스
  • 새로운 응답성, 메모리 및 에뮬레이션 도구
  • 친숙한 도구의 새로운 기능과 향상된 기능
  • 더욱 쉽고 빠른 워크플로

UI 응답성 도구를 사용하여 웹 페이지 속도 향상

성능을 위한 페이지 조정에 도움이 되는 UI 응답성 도구

UI 응답성 도구는 실행 시 페이지를 프로파일링하고 속도가 느려지는 위치 및 시간이 너무 오래 걸리는 프로세스를 식별합니다. 개발자는 CPU 사용률, 프레임 속도 및 페이지 동작 간의 관계를 확인할 수 있습니다.

중요  * Windows 7이 최신 상태가 아니면 Windows 7의 IE11에서 F12 개발자 도구의 UI 응답성 도구가 사용하지 않도록 설정될 수 있습니다. Windows 7의 IE11 설치에서 UI 응답성 도구가 작동하지 않을 경우 Windows 업데이트에서 모든 사용 가능한 업데이트를 설치했는지 확인하세요.

CSS, HTML 및 JavaScript 자동 완성

이제 JavaScript, HTML 또는 CSS 코드를 입력하는 동안 콘솔DOM 탐색기 도구에서 자동 완성 제안을 제공합니다. 자동 완성은 다음과 같은 경우에 도움이 됩니다.

  • 더욱 쉽게 API를 검색할 수 있게 합니다(예: 콘솔 API 메서드).
  • 입력 오류를 줄입니다.
  • 워크플로 속도를 향상시킵니다.

화면 및 GPS 에뮬레이션

에뮬레이션 도구를 사용하면 240픽셀 너비 모바일 화면에서 4k 홈시어터 화면까지 다양한 화면에서 사이트가 어떻게 표시되는지를 미리 볼 수 있습니다. GPS 에뮬레이션은 모바일 웹 페이지가 세계 곳곳에서 어떻게 응답하는지를 테스트합니다.

의미 있는 메모리 분석

페이지 속도를 저하시키거나 불안정하게 만들 수 있는 누수를 파악하기 위해 시간에 따른 메모리 사용을 추적하는 데 도움이 되는 메모리 도구

시간에 따른 메모리 사용 추적은 페이지 속도 저하 및 크래시를 디버그하는 데 중요한 도구입니다. 새 메모리 도구는 다음을 제공합니다.

  • 전체 메모리 사용을 표시하는 타임라인 보기
  • 지정된 시점의 웹 페이지 메모리 사용을 표시하는 메모리 사용 스냅숏
  • 스냅숏 간의 메모리 사용 변경 소스를 파악하는 스냅숏 비교. 웹 페이지가 실행되고 사용자가 웹 페이지를 조작할 때 발생하는 메모리 문제를 식별하는 데 도움이 됩니다.
  • 회수할 수 있는 메모리를 표시하는 분리된 요소 강조 표시

마우스 오른쪽 단추를 클릭하여 검사

IE11에서는 DOM 탐색기 도구에서 페이지 요소를 쉽게 선택할 수 있습니다. 페이지에서 요소를 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 요소 검사를 클릭하면 DOM 탐색기 도구에서 요소가 강조 표시됩니다.

기타

이러한 새 도구 및 향상된 도구의 샘플링에 대한 자세한 내용은 F12 개발자 도구 사용 설명서에서 IE11의 개발자 도구 관련 설명을 확인하세요.

관련 항목

새 콘솔 API 메서드
F12 개발자 도구 사용
Modern.ie의 추가 개발자 도구

 

 

표시:
© 2015 Microsoft