Windows 8.1 업데이트 F12의 새로운 기능

  • Article

IE 개발자 도구(F12)와 Visual Studio 2013 업데이트 2에 대한 대대적인 업데이트를 선보이게 되어 기쁩니다. F12 업데이트는 IE11의 최신 버전과 함께 발표됩니다.

앞서 게시된 기사에서는 빠르고 반복적인 워크플로, DOM 탐색기에서의 정확한 데이터 제공, 메모리 및 성능 도구에서 실행 가능한 데이터 제공에 중점을 두고 F12의 기능을 설명했습니다.

이번 업데이트가 적용된 F12를 사용하면 다음과 같은 향상된 기능을 확인할 수 있습니다.

  • CSS 도구에 변경 추적 기능이 도입되어 보다 정확하고 반복적인 워크플로
  • 소스 맵 지원을 통해 CoffeeScript 또는 TypeScript 등과 같이 작성한 코드를 디버깅하는 기능과 다른 개발자의 라이브러리를 사용하는 경우 "JMC(Just My Code)"를 디버깅하는 기능
  • JS 스냅샷 도구 및 필터링이 향상되어 메모리 누수를 찾는 경우 등의 상황에서 솔루션으로 더 빨리 이동할 수 있도록 지원

아래에서는 F12 도구에서 향상된 이러한 기능에 대해 살펴보겠습니다.

변경 표시줄로 CSS에서 변경한 내용 추적

F12와 같은 도구의 중요한 장점 중 하나는 소스 코드가 없어도 브라우저 안에서 직접 웹 사이트의 모양을 편집할 수 있다는 점입니다. 하지만 편집하는 데 시간이 든다면 CSS에서 변경한 모든 내용을 추적하고 최종 편집 내용을 원본 소스로 다시 적용하기가 어렵습니다. 이러한 상황을 개선하기 위해 '변경 표시줄'을 사용한 시각적 방법과 DOM 탐색기의 새로운 '변경 내용' CSS 패널을 통한 방법 두 가지를 사용하는 변경 내용 기록 및 추적 기능을 도입했습니다.

DOM 탐색기의 스타일 창에서 CSS 규칙과 속성을 변경한 경우 편집한 속성 또는 규칙 왼쪽 여백에 시각적인 힌트가 표시됩니다. 이러한 시각적 힌트를 '변경 표시줄'이라고 하며 새로운 속성은 녹색, 변경된 속성과 값은 노란색, 삭제된 속성은 빨간색으로 나타납니다. 이 변경 표시줄은 다른 DOM 노드를 살펴보는 경우에도 유지됩니다.

스타일 탭의 변경 표시줄

스타일 탭의 변경 표시줄

여러 노드에서 여러 번 편집을 할 수 있기 때문에 현재 F12 세션에서 소스 코드를 수동으로 편집할 때 검사 목록으로 사용할 수 있도록 CSS 패널에 '비교' 보기로 모든 변경 내용을 정리하는 새로운 탭을 추가했습니다. 또한 상황에 맞는 메뉴를 통해 변경 내용을 복사하고 되돌리는 기능을 지원합니다.

새로운 변경 내용 탭

새로운 변경 내용 탭

"JMC(Just My Code)"를 사용한 앱 디버깅

웹 사이트 및 앱을 개발하는 경우 jQuery 또는 Angular와 같은 타사 라이브러리를 사용할 가능성이 높은데 일반적으로 이러한 라이브러리는 축소되는 경우가 많습니다. 코드를 디버깅하는 개발자들은 라이브러리 코드를 한 단계씩 실행하다가 그 라이브러리에 너무 깊이 들어가게 되어 정작 문제를 디버깅해야 하는 코드로 돌아오지 못하는 경우가 많습니다.

Visual Studio는 일정 기간 동안 "JMC(Just My Code)" 관리 언어라는 기능을 지원해왔는데 Visual Studio 2012에서도 JavaScript에 사용됩니다. JMC의 기본적인 아이디어는 변경할 수 없는 코드가 아니라 디버깅하려는 코드에 디버거를 배치하는 것입니다.

이제 F12에서 이 기능을 제공하므로 디버깅할 때 다음과 같은 두 가지의 중요한 사항을 확인할 수 있습니다.

  • 라이브러리 코드로 표시된 파일(라이브러리)은 한 단계씩 실행하지 않아도 됩니다. 파일을 한 단계씩 실행했더라도 디버거의 파일 선택기에서 라이브러리를 표시할 수 있습니다(아래 참조). 일단 라이브러리로 표시하면 어떤 단계에서도 원래 코드로 이동할 수 있습니다.
  • "모든 예외 발생 시 중단"을 사용하더라도 라이브러리 코드에서 반환 및 처리되는 예외에 대해서는 중단되지 않습니다.

파일을 라이브러리 코드로 표시

파일을 라이브러리 코드로 표시

F12는 기본적으로 URL *.min.js와 일치하는 파일을 라이브러리 코드로 인식합니다. 하지만 디버거에서 파일을 연 경우 디버거의 파일 선택기 또는 파일 탭의 상황에 맞는 메뉴에서 라이브러리를 표시하면 이 동작을 수정할 수 있습니다.

후속 블로그 글을 통해 이 기능과 워크플로에 대해 좀더 자세히 알아보도록 하겠습니다.

소스 맵을 사용하여 다른 언어로 작성된 앱 디버깅(v3)

최근에 JavaScript 앱이 점점 더 복잡해지고 있기 때문에 JavaScript를 준수하는 다른 언어로 작성하는 추세가 늘어나고 있습니다. 예를 들어 F12 도구는 TypeScript로 작성되고 JavaScript로 컴파일되었습니다. 이와 마찬가지로 앱을 작성한 원본 소스가 아닌 JavaScript 코드를 축소했을 수 있습니다. 이러한 컴파일 프로세스를 사용하면 브라우저에서 실행되고 디버깅되는 JavaScript가 편집기의 코드가 아니기 때문에 디버깅하기가 더 까다로워집니다.

이 문제를 해결하기 위해 커뮤니티에서는 다양한 브라우저와 Visual Studio에서 많은 관심을 이끌었던 원본 소스 및 "소스 맵"(사양)이라는 컴파일된 파일을 매핑하는 방법을 모색했습니다. 이러한 맵은 컴파일 중에 생성되며 이 버전의 F12에서는 소스 맵 사양의 v3에 대한 지원을 추가했습니다.

컴파일된 JavaScript 파일이 유효한 소스 맵을 정의하는 경우, 디버거의 단추를 클릭하여 소스 맵을 사용하도록 하면 F12는 JS 파일을 실행하는 대신 원본 소스 파일을 로드하도록 기본값이 설정됩니다. 다음과 같은 기능을 사용할 수 있습니다.

  • 파일 선택기에 표시된 파일은 실행 중인 문서 대신 원본 소스 이름을 사용합니다.
  • 디버거에서 열고 코드를 단계적으로 실행하는 데 사용되는 파일은 원본 소스 파일이고 TypeScript, CoffeeScript 및 Script #의 경우에는 해당 파일들이 적절한 색으로 구분되어 표시됩니다(아래 TypeScript 파일 참조).

디버거에서 열고 코드를 단계적으로 실행하는 데 사용되는 파일은 원본 소스 파일이고 TypeScript, CoffeeScript 및 Script #의 경우에는 해당 파일들이 적절한 색으로 구분되어 표시됩니다.

소스 맵에 대해서도 JMC의 경우와 마찬가지로 후속 블로그 글을 통해 좀더 자세히 알아보겠습니다.

3단계 스냅샷

메모리 누수를 디버깅할 때는 일반적으로 필터링되었더라도 메모리 프로파일러가 만든 대량의 데이터가 표시되기 때문에 메모리 누수를 찾는 과정이 복잡합니다. 이전 버전의 F12에서는 스냅샷 타일을 통해 앱의 상태를 요약하고 DOM 정보를 분리하여 표시하는 한편 잠재적인 문제를 간편하게 파악할 수 있도록 조치를 취했습니다. 하지만 이번 업데이트에서는 이러한 조치를 확장하여 개발자가 다양한 문제를 근본적인 측면부터 훨씬 더 쉽게 해결할 수 있도록 지원하기 위해 노력했습니다.

이제 F12 메모리 도구에는 3개의 스냅샷을 비교하고 해당 스냅샷의 범위 지정 보기를 가져오는 기능이 포함되어 있어 메모리 누수를 보다 명확하게 파악할 수 있게 되었습니다. 이러한 스냅샷은 다음과 같은 특성을 가집니다.

  • 시나리오를 시작하기 전 앱의 초기 상태로, 앱에 포함된 개체에 대한 기준을 제공합니다.
  • 시나리오가 완료되면 앱에 대한 가능한 기준이 확장되며 시나리오를 다시 실행하면 추가 스냅샷이 필요하게 됩니다.
  • 시나리오를 다시 시도하면 응용 프로그램이 '기본 상태로 전환'됩니다. 이 상태에서는 시나리오의 모든 개체가 해제되거나 사용이 가능해져야 합니다.

이러한 스냅샷을 통해 서로를 비교하고 새로운 "범위" 필터 드롭다운을 사용하여 시나리오의 최종 상태를 파악할 수 있으며, 아래에서 볼 수 있는 것과 같이 더 이상 남아 있으면 안 되는 개체 집합을 나타낼 가능성이 있는 "스냅샷 #2에서 남아 있는 개체"를 선택할 수 있습니다.

범위 필터

범위 필터

위와 같은 형식 보기에는 개체 목록과 잠재적인 문제가 있을 수 있는 위치를 나타내는 표시기가 나타납니다.

Visual Studio 2013 업데이트 2에서 Windows Phone용 IE 도구 지원

웹 사이트를 모바일 버전으로 만드는 데 많은 시간을 들였더라도 모바일 브라우저에서 모양이나 작동이 잘못되는 문제가 발생할 가능성이 높습니다.  Windows Phone에서 이러한 문제를 해결하기 위해 Visual Studio 2013 업데이트 2에 Windows Phone 8.1용 Internet Explorer를 대상으로 Visual Studio 디버그 및 성능 도구를 사용할 수 있도록 지원하게 되어 기쁩니다. 이에 대한 자세한 내용은 이 주제에 대한 Visual Studio ALM 블로그 에서 확인할 수 있습니다.

다양한 기타 개선 사항

이번 버전의 F12에서는 여러 고객의 요청을 반영하고 네트워크 검사기로 인해 발생하고 F12를 사용하여 하위 문서 모드를 에뮬레이션할 때 조건부 주석이 반영되지 않는 여러 가지 충돌 등의 버그를 해결하기 위해 노력했습니다. 여기에 버그 목록을 게시하는 대신 Microsoft Connect IE 사이트(https://connect.microsoft.com/IE/Feedback)에 버그를 업데이트할 예정입니다.

이번 버전의 F12에서 확인할 수 있는 좀더 자세한 변경 사항은 다음과 같습니다.

셸

  • Ctrl+[ 및 Ctrl+]를 사용하여 도구 탐색

콘솔

  • 실행 대상을 열거하는 드롭다운
  • printf-style 서식이 포함된 console.log를 통해 검사 개체 로깅
  • 콘솔에서 IntelliSense를 통해 중단점에 로컬 변수 지정 가능
  • Console $_ shortcut을 통해 콘솔의 최근 평가 결과 액세스
  • F12 실행 전에도 항상 콘솔 메시지 기록([인터넷 옵션] -> [고급] -> [개발자 콘솔 메시지 항상 기록] 선택)

디버거

  • BP, Watch, Tab 등이 유지되므로 상태가 손실되지 않음
  • 소스 맵을 사용하여 F12 내에서 Typescript/컴파일된 코드 디버깅 가능
  • JMC 디버깅 지원을 통해 라이브러리 코드(JMC)에 신경 쓸 필요가 없음
  • //#sourceUrl=<url> 주석을 통해 평가 코드 이름 지정
  • Ctrl+Shift+F5를 통해 중단되는 경우 페이지 중단 및 새로 고침을 위한 키보드 바로 가기 제공
  • 호출 스택 및 프로파일러 보기에 정규화된 기능 이름(예: a.b.c) 포함

DOM 탐색기

  • CSS 의사 상태 - 의사 스타일을 테스트할 요소에 대해 의사 상태 설정
  • CSS 변경 표시줄 - 스타일 보기에서 변경된 값 표시
  • CSS 변경 내용 보기 - 최종 적용된 CSS 변경 내용을 확인하고 클립보드에 복사 가능
  • 통합 컴퓨팅을 지원하는 스타일 패널 - 유기적인 CSS 창에서 CSS 스타일을 보고 링크를 소스에 추가 및 편집
  • DOM 탐색기에서 선택한 요소에 대해 Ctrl+b 사용 가능

에뮬레이션

  • 문서 모드 인식 - 페이지가 특정 문서 모드로 표시되는 이유를 알려주므로 호환성 시나리오 이해도 향상

UI 반응

  • 타임라인 세부 정보 보기에서 모든 수준의 이벤트를 기간별로 정렬
  • 이벤트를 특정 범주(예: GC, 이미지 디코딩)로 필터링하여 타임라인 세부 정보 보기 간소화
  • 그래프 및 세부 정보 보기를 특정 이벤트 인스턴스에 대한 기간에 따라 간편하게 확대/축소(상황에 맞는 메뉴 사용)
  • DOM 요소의 인라인 스타일이 프로그래밍 방식으로 수정될 때 변경된 속성을 정확하게 파악하고 변경된 값을 식별할 수 있음

메모리

  • 특정 기능을 할당하는 코드 줄을 식별할 수 있으므로 메모리와 소스의 상관 관계 파악 가능
  • 상황에 맞는 메뉴 항목을 통해 도미네이터 보기에서 개체 표시, 보존 크기 확인 등
  • 형식 보기가 업데이트되어 비교 보기를 통해 변경 사항이 많은 형식이 표시되므로 개체 변동을 보다 쉽게 추론 가능
  • 표 UI의 눈금선
  • 설정 UI(내장, 원형 참조, 개체 ID 표시)

요약

이번 IE 11 및 F12를 통해 개발자 도구를 더 자주 업데이트하여 최대한 신속하게 최신 기능을 제공하고 버그를 수정할 수 있게 되었습니다. 조만간 더 많은 내용을 알려 드릴 수 있도록 최선을 다하겠습니다. 의견이 있거나 새로운 기능 및 지원이 필요한 경우에는 트위터(@IEDevChat)로 문의하거나 IE11 의견 보내기 도구 또는 Connect를 통해 알려 주십시오.

이 글에서는 F12의 새로운 기능을 간략하게만 소개했습니다. 앞으로 몇 주 간 F12에 대해 자세히 설명하고 사용하는 방법을 보여 주는 블로그 내용을 게시할 예정입니다. MSDN에서도 F12 개발자 도구 설명서 전문을 볼 수 있습니다.

여러분의 많은 의견을 기다리겠습니다. 트위터(@IEDevChat)로 문의하거나 IE11 의견 보내기 도구 또는 Connect를 통해 팀에 연락할 수 있습니다.

- Andy Sterland, F12 도구 프로그램 관리자

- Jonathan Carter, F12 도구 프로그램 관리자

- Simon Calvert, F12 도구 수석 프로그램 관리자