개발자 채널의 F12 업데이트

  • 아티클

Internet Explorer 개발자 채널에서는 F12 개발자 도구에 대한 크고 작은 멋진 업데이트를 여러 개 제공합니다. Internet Explorer 11을 실행 중인 Windows 8.1 및 Windows 7 SP1 고객이 다운로드할 수 있습니다. 아래 자세히 설명된 기능을 시도해 보고 Microsoft Connect를 통해 피드백을 제공해 주세요.

새로운 점

전체 F12 도구 사용자 인터페이스의 새로운 기능을 살펴본 다음 도구별 업데이트를 하나씩 살펴보겠습니다.

  • F12 사용자 인터페이스의 변경 사항
  • 콘솔
  • DOM 탐색기
  • 디버거
  • 에뮬레이션
  • UI 응답성
  • 메모리

F12 사용자 인터페이스의 변경 사항

  • 새 아이콘 및 알림

    메모리와 프로파일러 도구의 아이콘이 변경되었습니다.

    이제 아이콘 모음에는 콘솔의 오류, 에뮬레이션 설정의 변경, 메모리, 프로파일러 및 UI 응답성 도구의 활성 프로파일링 세션을 위한 표시기가 있습니다. 아래 이미지는 콘솔과 메모리 도구 아이콘에 대한 알림이 있는 새로운 아이콘을 표시하여, 두 개의 콘솔 오류가 표시되며 현재 프로파일링 세션이 진행 중임을 나타냅니다.

    새로운 아이콘과 메모리 및 콘솔에 알림을 표시하는 이미지

  • 도구 내에서 F6 상위 집합 탐색

    F6을 사용하면 탭 키를 사용하여 도구를 탐색하는 것과 같지만, F6은 선택 가능한 모든 항목을 통해서가 아니라 도구 창에서 가장 일반적으로 사용되는 요소의 선택된 집합을 통해 "탭"합니다. 키보드를 사용하여 도구 내부와 도구 사이를 탐색하는 깔끔해진 전체 시스템의 일부입니다.

  • 키보드를 사용하여 최근에 사용한 도구 사이를 이동합니다.

    찾아보기 시 뒤로 및 앞으로 화살표를 사용하는 경우와 매우 유사하게 CTRL + [ 도구 탐색 기록에서 뒤로 이동, CTRL + ]를 사용하여 앞으로 이동합니다.

  • 문서 모드에 빠른 액세스

    도구를 전환하지 않고 문서 모드에 액세스하려고 하세요? 모든 도구에서 문서 모드에 액세스할 수 있는 새로운 드롭다운을 맨 위에 추가했습니다.

    문서 모드 드롭다운 이미지

콘솔 변경 사항

  • Console.timeStamp()

    콘솔에서 호출하거나 코드 내에서 호출하면 현재 브라우저 탭이 열려 있는 시간(밀리초)이 콘솔에 출력됩니다. UI 응답성 도구에서 프로파일링 세션을 실행하는 중에 호출되면 세션이 시작된 이후의 시간을 기반으로 하는 타임스탬프로 세션의 타임라인에 사용자 표시를 작성합니다.

  • CTRL+L은 모든 메시지의 콘솔을 지웁니다.

  • 정확한 자동 완성

    콘솔의 자동 완성에는 더 이상 인덱서 속성이 포함되지 않으므로, 제시된 자동 완성 항목을 더욱 깔끔하고 정확하게 선택할 수 있습니다.

    $, $$, $x, $0-$5 및 $_는 사용자의 편의를 위해 콘솔 자동 완성 목록에 추가되었으며 콘솔의 동작이 다른 브라우저와 더욱 일치하게 됩니다.

  • 오래된 메시지 표시기

    탐색 시 지우기 옵션을 끄도록 선택한 경우 활성 페이지의 메시지와 기록에 있는 이전 페이지의 메시지를 구분하기 위해 오래된 콘솔 메시지의 아이콘이 회색으로 표시됩니다.

    오래된 메시지 표시기 화면 캡처

DOM 탐색기 변경 사항

  • 계산 창의 변경 표시줄

    변경 표시줄(변경된 속성, 추가된 속성 및 삭제된 속성의 색상이 서로 다름) 사용자는 스타일 창을 즐겨 사용해 왔습니다. 이제 이 창은 계산 스타일 창에 표시됩니다.

    변경 표시줄을 표시하는 계산 창

디버거 변경 사항

  • 소스 맵 지정

    디버거에 있는 문서 탭을 마우스 오른쪽 단추로 클릭하고 소스 맵을 지정할 수 있습니다. 따라서 소스 맵 의견이 제거되어 제공된 코드에서 소스 맵을 사용할 수 있습니다.

    소스 맵 선택을 위해 표시되는 컨텍스트 창이 있는 소스 창

  • 조사식의 자동 완성

    이제 조사식을 추가하면 제시된 자동 완성 항목 옵션이 생깁니다.

    조사식이 제시된 자동 완성 항목

  • 반환 값 검사

    반환 값으로 함수가 중단되면 닫는 중괄호에 도달할 때까지 함수의 코드를 한 단계씩 실행합니다. 조사식 창의 로캘 부분에 반환 값이 표시됩니다. 코드를 단계별로 다시 실행하면 호출한 코드에 값이 반환됩니다.

    간단한 설명을 보려면 다음과 같이 콘솔에서 이 코드를 시도해 보세요.

    function showval() { var x = 0; x++; debugger; return x; } showval();

    함수를 호출하고 debugger을(를) 중단하면 단계별로 코드를 실행하여 반환 값을 볼 수 있습니다.

  • 중단점으로 다중 선택

    CTRL + CLICK, SHIFT + CLICK 및 CTRL + A를 사용하여 중단점 창에서 다중 중단점을 선택할 수 있습니다.

  • 계속하여 중단점 무시

    F5를 눌러 다음 중단점으로 진행합니다. F5를 해제할 때까지 F5를 누른 상태로 여러 중단점을 계속 통과합니다.

  • 이벤트 중단점 및 추적점

    F12 도구에 이미 제공된 중단점 및 추적점과 작동 방식이 거의 비슷하지만 특정 코드 블록이 실행될 때 트리거되는 것이 아니라 특정 이벤트가 실행될 때 트리거됩니다. 각각에는 검사할 이벤트의 특정 인스턴스 범위를 구체적으로 지정하는 데 유용한 선택적 조건부 필터가 있습니다. 아래 이미지에 강조 표시된 이벤트 추적점 추가 및 이벤트 중단점 추가 아이콘을 사용하여 추가될 수 있습니다.

    이벤트 중단점 모달 창 및 강조 표시된 아이콘 추가

UI 응답성 도구 변경 사항

  • 성능 세션 가져오기/내보내기

    생성하는 데이터를 분석하고 해당 데이터를 동료와 공유하려는 경우 매번 테스트 사례를 재현할 필요가 없습니다. UI 응답성 도구의 아이콘 모음에 있는 가져오기(폴더)와 내보내기(디스크) 아이콘을 사용하여 나중에 가져올 수 있는 파일에 메모리 스냅숏을 저장할 수 있습니다.

  • 이미지 미리 보기

    이미지의 HTTP 요청을 보고 어떤 이미지인지 궁금한 경우 이제 이벤트 세부 정보에서 이미지를 미리 볼 수 있습니다.

    UI 응답성 도구에서 이미지 미리 보기 데모

  • 이벤트 필터링

    이벤트 필터링 단추는 작지만 강력합니다. 이 단추의 이면에는 여러 방식으로 이벤트를 필터링할 수 있는 메뉴가 숨겨져 있으며, 각 방식이 미치는 영향은 상당합니다.

    • 이벤트 이름 필터

      필터 텍스트와 일치하는 사항을 포함하는 이벤트 이름을 필터링합니다.

    • UI 활동 필터

      확인란을 사용하여 더 큰 이벤트 범주를 제외함으로써, 조사 중인 영역에 중점을 두기가 쉬워집니다. 예를 들어, 네트워크 활동에만 관심이 있는 경우 가비지 수집과 UI의 모든 노이즈를 필터링할 수 있습니다.

    • 시간 임계값 필터

      이 기능은 기간이 1ms 미만인 최상위 이벤트를 필터링합니다. 이 기능을 사용하면 많은 시나리오에서 전체 보기(waterfall view)가 매우 단순해지며 더욱 영향력이 있는 이벤트에 주력할 수 있습니다.

    1ms 이상 소요되는 DOM 이벤트로 필터링된 필터 이벤트 하위 메뉴

  • HTML5 스크립팅 이벤트

    미디어 쿼리 수신기 또는 MutationObservers를 사용하는 경우 이제 성능 프로파일링 세션을 실행할 때 각각의 비용을 식별할 수 있습니다.

    미디어 쿼리 수신기 이벤트를 표시하는 UI 응답성 세션

  • 프레임 그룹화

    정렬 기준 드롭다운과 이벤트 필터링 메뉴 사이의 단추가 프레임 그룹화를 전환합니다. 애니메이션/시각적 업데이트가 발생하는 기간 동안 최상위 이벤트를 해당 작업 단위(또는 "프레임")로 그룹화합니다. 프레임은 다른 이벤트와 마찬가지로 취급되므로 정렬 및 필터링이 가능하며 포괄 시간 요약을 제공합니다.

    애니메이션 프레임별로 그룹화된 이벤트가 있는 UI 응답성 도구

  • 사용자 측정

    performance.mark() API를 통해 타임라인에 삼각형을 추가하여 특정 이벤트가 발생하는 위치를 표시하는 경우 performance.measure() API는 성능 표시의 유용성을 확장합니다. **performance.measure()**을(를) 사용하여 두 개의 performance.mark() 이벤트 사이 시간을 포함하는 사용자 측정 이벤트를 생성하고, 이벤트를 마우스 오른쪽 단추로 클릭한 다음, 이벤트로 필터링 옵션을 사용하여 두 표시 사이의 이벤트만 선택합니다.

    성능 측정 기능을 사용하는 UI 응답성 세션

  • DOM의 색 지정

    이 기능은 DOM 요소, 문자열 리터럴 및 숫자 리터널에 색 지정을 추가합니다. 서로 다른 F12 도구의 콘텐츠 모양과 동작을 비슷하게 만드는 외에도 UI 응답성 도구에 시각적인 재미를 조금 더 추가합니다.

  • 선택 내용 요약

    타임라인의 부분을 선택하면 이벤트 세부 정보 창에 선택 내용 요약이 표시됩니다. 세그먼트의 이벤트 범주를 사용하여 도구 설명을 보려면 원형 차트의 여러 다른 세그먼트 위에 마우스를 놓습니다.

    UI 응답성 도구에 선택 내용 요약 데모

  • console.timeStamp() 지원

    프로파일링 세션 중에 콘솔 또는 코드에서 console.timeStamp() 메서드를 사용하면 프로파일링 세션이 시작된 이후의 시간으로 타임라인에 사용자 표시가 작성됩니다.

메모리 도구 변경 사항

  • 도미네이터 접기

    도미네이터 접기를 사용하면 논리적으로 다른 개체(예: <BR> <DIV>에서 함수가 보유 중인 범위)의 구성 요소이며 데이터에 대한 이해도 향상에 도움이 되지 않고 시간 낭비가 될 가능성이 큰 추가 세부 사항인 개체를 최상위 보기에서 제거하여 스냅숏의 콘텐츠를 간단하게 만들 수 있습니다.

    예를 들어, 보기 전후에 아래 이미지를 표시함으로써 도미네이터 접기를 통해 도구의 "스토리"를 향상시키는 방법을 데모합니다. 접힌 보기에는 30개의 HTML <DIV> 요소(15.64MB의 메모리)가 표시되고 분리된 DOM 노드가 보유됩니다. 많은 경우에 있어 개체가 너무 크다거나 누수(특히 타사 라이브러리 사용 시)가 된다는 정도 이상으로 개체의 컴포지션을 아는 것이 중요합니다.

    변경 전후 - IE 11 도미네이터 보기, 접힌 보기

  • DOM, 문자열 및 숫자 리터럴 색상 지정

    이 기능은 DOM 요소, 문자열 리터럴 및 숫자 리터럴에 색상 지정을 추가합니다. 서로 다른 F12 도구의 콘텐츠 모양과 동작을 비슷하게 만드는 외에도 메모리 분석을 시각적으로 조금 더 흥미롭게 만듭니다.

  • 루트 사이클 필터링

    순환 참조 경로에서 자신도 모르게 방향을 잃지 않고 개체의 컴포지션을 조사하고 싶으세요? 이 기능은 순환적인 하위 참조를 검색하여 "자르기"하므로 무한대로 트래버스하여 혼동되지 않게 합니다. 또한 참조가 사실상 "자르기"된 경우 이 점을 명확하게 하기 위해 참조에 주석을 답니다.

  • 세션 가져오기/내보내기

    생성하는 데이터를 분석하고 해당 데이터를 동료와 공유하려는 경우 매번 테스트 사례를 재현할 필요가 없습니다. 메모리 도구의 아이콘 모음에 있는 가져오기(폴더)와 내보내기(디스크) 아이콘을 사용하여 나중에 가져올 수 있는 파일에 메모리 스냅숏을 저장할 수 있습니다.

    디스크에서 가져온 세 개의 스냅숏 세션이 있는 메모리 도구

에뮬레이션 도구 변경 사항

  • 설정 지속성 및 재설정

    에뮬레이션 설정 유지 아이콘이 에뮬레이션 도구에 추가됩니다. 그러면 특별히 사용하지 않게 설정할 때까지 현재 에뮬레이션 설정을 그대로 유지하므로, 사용자가 브라우저에 대해 작업하고 종료하며 에뮬레이션 설정이 원상태 그대로 유지됩니다. 오른쪽에는 도구를 기본값으로 신속하게 재설정하는 에뮬레이션 설정 재설정 아이콘이 있습니다.

    에뮬레이션 도구의 맨 위 모서리에 표시되는 에뮬레이션 설정 유지 및 에뮬레이션 설정 재설정 아이콘

관련 항목

Windows 8.1용 Internet Explorer 개발자 채널 다운로드

Windows 7 SP1용 Internet Explorer 개발자 채널 다운로드