이 페이지는 Cloud Translation API를 통해 번역되었습니다.

2013년 Chrome DevTools 혁신

아서 에반스

트위터 GitHub

팀 스타틀러

트위터

소개

웹 애플리케이션의 복잡성과 기능이 증가함에 따라 Chrome DevTools도 증가했습니다. Paul Irish가 진행한 Google I/O 2013 대담 Chrome DevTools Revolutions 2013 요약에서 웹 애플리케이션 빌드 및 테스트 방식을 혁신하는 최신 기능을 확인할 수 있습니다.

폴의 강연을 놓치셨다면 위에서 확인하시거나 (계속 기다리겠습니다) 기능 요약으로 바로 넘어갈 수도 있습니다.

작업공간에서는 DevTools를 소스 코드 편집기로 사용할 수 있습니다.
Sass를 사용하는 경우 DevTools 내에서 Sass (.scss) 파일을 라이브 편집하고 변경 사항이 페이지에 즉시 반영된 것을 확인할 수 있는 기능이 마음에 드실 것입니다.
한동안 Android용 Chrome에서 페이지를 원격으로 디버깅할 수 있었지만 ADB 확장 프로그램을 사용하면 Android 기기에 더 쉽게 연결할 수 있습니다. 역방향 포트 전달을 사용하면 기기에서 개발 머신의 localhost에 쉽게 연결할 수 있습니다.
웹 애플리케이션에서 성능은 항상 중요한 사안입니다. DevTools에는 CPU 프로파일링을 위한 새로운 Flame Chart 시각화, 렌더링 및 메모리 사용과 관련된 성능 문제를 디버깅하기 위한 여러 가지 새로운 도구를 비롯하여 병목 현상을 추적하는 데 도움이 되는 여러 가지 새로운 기능이 있습니다.

이 기능은 Chrome 28에서 제공되고 있으며 이제 공개 버전 업데이트 채널에서 사용할 수 있습니다.

작업공간

작업공간을 사용하면 로컬 웹 서버에서 제공되는 리소스를 디스크의 파일에 매핑할 수 있으므로, Sources 패널 내에서 모든 유형의 소스 파일을 수정하고 해당 변경사항을 디스크에 유지할 수 있습니다. 마찬가지로 외부 편집기에서 변경한 내용은 Sources 패널에 즉시 표시됩니다.

아래 스크린샷은 실제 작업공간의 예를 보여줍니다. 캘린더 사이트는 localhost를 통해 로드된 반면, Sources 패널에는 사이트 루트 폴더의 로컬 파일 시스템 뷰가 표시됩니다. 이 폴더의 파일에 대한 수정사항은 디스크에 유지됩니다. 아래 스크린샷에서 Calendar.css에 저장되지 않은 일부 변경사항이 있으므로 파일 이름 옆에 별표가 표시됩니다.

Control+S 또는 Command+S 키를 누르면 변경사항이 디스크에 유지됩니다.

마찬가지로 요소 패널에서 요소의 스타일을 변경하면 소스 패널과 외부 편집기에 모두 반영됩니다. 참고:

Elements 패널의 DOM 변경사항은 유지되지 않습니다. 요소 패널에서 적용한 스타일 변경사항만 유지됩니다.
외부 CSS 파일에 정의된 스타일만 변경할 수 있습니다. element.style 또는 인라인 스타일에 대한 변경사항은 디스크에 다시 유지되지 않습니다. 인라인 스타일이 있는 경우 Sources 패널에서 변경할 수 있습니다.
요소 패널의 스타일 변경사항은 즉시 유지됩니다. Control+S 또는 Command+S를 누를 필요가 없습니다.

작업공간 폴더 추가

작업 영역 사용은 로컬 폴더의 콘텐츠를 DevTools에서 사용할 수 있도록 하는 작업과 해당 폴더를 URL에 매핑하는 두 부분으로 구성됩니다.

새 작업공간 폴더를 추가하려면 다음 안내를 따르세요.

DevTools에서 Settings 를 클릭하여 DevTools 설정을 엽니다.
작업공간을 클릭합니다.
폴더 추가를 클릭합니다.
프로젝트의 소스 파일이 포함된 폴더로 이동하여 선택을 클릭합니다.
메시지가 표시되면 허용을 클릭하여 DevTools에서 폴더에 대한 전체 액세스 권한을 허용합니다.

Sources 패널에는 localhost를 통해 로드된 소스와 함께 새 작업공간 폴더가 표시됩니다. 이제 작업공간 폴더 내의 파일을 실시간 편집할 수 있으며 이러한 변경사항은 디스크에 유지됩니다.

폴더를 URL에 매핑

작업공간 폴더를 추가한 후 URL에 매핑할 수 있습니다. Chrome이 지정된 URL을 로드할 때마다 소스 패널에 네트워크 폴더 콘텐츠 대신 작업공간 폴더 콘텐츠가 표시됩니다.

작업공간 폴더를 URL에 매핑하려면 다음 안내를 따르세요.

소스 패널에서 마우스 오른쪽 버튼을 클릭하거나 작업공간 폴더의 파일을 Control+클릭합니다.
네트워크 리소스에 매핑을 선택합니다.
현재 로드된 페이지에서 해당 네트워크 리소스를 선택합니다.
Chrome에서 페이지를 새로고침합니다.

이제 아래와 같이 Sources 패널에 localhost 소스가 아닌 사이트의 로컬 작업공간 폴더 콘텐츠만 표시됩니다.

네트워크 폴더를 작업공간 폴더에 연결하는 다른 두 가지 방법은 다음과 같습니다.

네트워크 리소스를 마우스 오른쪽 버튼으로 클릭하고 (또는 Control+클릭) Map to File System Resource를 선택합니다.
DevTools Settings 대화상자의 작업공간 탭에서 매핑을 수동으로 추가합니다.

Sass/CSS 소스 맵 디버깅

Sass (CSS 소스 맵) 디버깅을 사용하면 Sources 패널에서 Sass (.scss) 파일을 실시간 편집할 수 있으며, DevTools를 종료하거나 페이지를 새로 고치지 않고도 결과를 볼 수 있습니다. Sass에서 생성된 CSS 파일에서 스타일을 제공한 요소를 검사하면 Elements 패널에 생성된 .css 파일이 아니라 .scss 파일의 링크가 표시됩니다.

이 링크를 클릭하면 Sources 패널에서 (수정 가능한) SCSS 파일이 열립니다. 이 파일을 원하는 대로 변경할 수 있습니다.

DevTools나 다른 곳에서 SCSS 파일에 변경사항을 저장하면 Sass 컴파일러가 CSS 파일을 다시 생성합니다. 그러면 DevTools가 새로 생성된 CSS 파일을 다시 로드합니다.

Sass 디버깅 사용

Chrome에서 Sass 디버깅을 사용하려면 현재 소스 맵 생성을 지원하는 유일한 버전인 Sass 컴파일러의 출시 전 버전이 필요합니다.

gem install sass -v '>=3.3.0alpha' --pre

DevTools 실험에서 Sass 디버깅 기능도 사용 설정해야 합니다.

Chrome에서 about:flags를 엽니다.
개발자 도구 실험 사용을 사용 설정합니다.
Chrome을 다시 시작합니다.
DevTools 설정을 열고 실험을 클릭합니다.
Sass 지원 (또는 사용 중인 브라우저 버전에 따라 Sass 스타일시트 디버깅)을 사용 설정합니다.

Sass가 설치되면 Sass 컴파일러를 시작하여 Sass 소스 파일의 변경사항을 확인하고 생성된 각 CSS 파일의 소스 맵 파일을 만듭니다. 예를 들면 다음과 같습니다.

sass --watch **--sourcemap** sass/styles.scss:styles.css

Compass를 사용하는 경우 Compass는 아직 출시 전 버전의 Sass를 지원하지 않으므로 Compass와 함께 Sass 디버깅을 사용할 수 없습니다.

사용 방법

Sass 컴파일러는 처리하는 SCSS 소스 파일별로 컴파일된 CSS 외에 소스 맵 파일 (.map 파일)을 생성합니다. 소스 맵 파일은 .scss 파일과 .css 파일 간의 매핑을 정의하는 JSON 파일입니다. 각 CSS 파일에는 특별 주석에 삽입되어 있는 소스 맵 파일의 URL을 지정하는 주석이 포함되어 있습니다.

/*# sourceMappingURL=<url>; */

예를 들어 다음 SCSS 파일이 있다고 가정하겠습니다.

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass는 다음과 같이 sourceMappingURL 주석을 포함하는 CSS 파일을 생성합니다.

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

다음은 소스 맵 파일의 예입니다.

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Android용 Chrome에서 더 쉬워진 원격 디버깅

DevTools의 새로운 기능인 ADB 확장 프로그램과 역방향 포트 전달 등 Android용 Chrome에서 원격 디버깅을 더 쉽게 설정할 수 있습니다.

ADB Chrome 확장 프로그램은 원격 디버깅 설정 프로세스를 간소화합니다. 다음과 같은 이점이 있습니다.

Android 디버그 브리지 (ADB)를 번들로 제공하므로 설치할 필요가 없습니다.
명령줄 상호작용이 필요하지 않습니다.
ADB 데몬을 쉽게 시작 및 중지하고 연결된 기기를 보기 위한 UI

역방향 포트 전달을 사용하면 Android의 Chrome을 localhost에서 실행되는 웹 서버에 쉽게 연결할 수 있습니다. 이는 일부 네트워크 환경에서 DNS 트릭을 사용하지 않으면 어려울 수 있습니다.

ADB 확장 프로그램 사용

먼저 Chrome 웹 스토어에서 ADB Chrome 확장 프로그램을 설치합니다. Chrome에 추가를 클릭하여 확장 프로그램을 설치합니다.

설치가 완료되면 Chrome에 회색 Android 메뉴 아이콘이 표시됩니다. ADB를 시작하려면 아이콘을 클릭한 후 Start ADB를 클릭합니다.

ADB가 시작되면 메뉴 아이콘이 녹색으로 바뀌고 현재 연결된 기기의 수가 표시됩니다(있는 경우).

기기 보기를 클릭하여 연결된 각 기기와 탭을 표시하는 about:inspect 페이지를 엽니다. DevTools에서 탭을 검사하려면 URL 옆에 있는 '검사' 링크를 클릭하세요.

연결된 기기가 표시되지 않으면 기기가 USB에 연결되어 있는지, Android용 Chrome 설정에서 USB 디버깅이 사용 설정되어 있는지 확인합니다. 자세한 안내 및 문제 해결 단계는 Android에서 원격 디버깅을 참조하세요.

역방향 포트 전달 (실험용)

일반적으로 로컬 개발 머신에서 웹 서버가 실행 중이며 기기에서 해당 사이트에 연결하려고 합니다. 개발 머신과 기기가 동일한 네트워크에 있는 경우 이는 간단합니다. 그러나 제한된 회사 네트워크와 같은 일부 경우에는 영리한 DNS 기술 없이는 불가능할 수 있습니다. Android용 Chrome의 새로운 기능인 역방향 포트 전달을 사용하면 이 작업을 간단히 처리할 수 있습니다. 이 기능은 USB를 통해 개발 머신의 특정 TCP 포트로 트래픽을 전달하는 수신 TCP 포트를 기기에 만들어 작동합니다.

이 기능을 사용하려면 다음이 필요합니다.

개발 머신에 Chrome 28 이상 설치
기기에 설치된 Android용 Chrome 베타
개발 머신에 설치된 Android 디버그 브리지 (ADB Chrome 확장 프로그램 또는 전체 Android SDK)

역방향 포트 전달을 사용하려면 ADB 확장 프로그램 사용에 설명된 대로 원격 디버깅을 위해 기기를 연결해야 합니다. 그런 다음 역방향 포트 전달을 사용 설정하고 애플리케이션에 포트 전달 규칙을 추가해야 합니다.

먼저 역방향 포트 전달을 사용 설정합니다.

개발 머신에서 Chrome을 엽니다.
about:flags에서 개발자 도구 실험 사용을 사용 설정하고 Chrome을 다시 시작합니다.
about:inspect를 엽니다. 휴대기기와 열려 있는 탭 목록이 표시됩니다.
표시된 사이트 옆의 '검사' 링크를 클릭합니다.
DevTools 창이 열리면 설정 패널을 엽니다.
실험에서 리버스 포트 전달 사용 설정을 사용 설정합니다.
DevTools 창을 닫고 about:inspect로 돌아갑니다.

그런 다음 포트 전달 규칙을 추가합니다.

'검사' 링크를 다시 클릭하여 DevTools를 열고 DevTools 설정을 다시 엽니다.
포트 전달 탭을 클릭합니다.
기기 포트 입력란에 Android 기기에서 Chrome이 연결할 포트 번호 (기본값: 8080)를 입력합니다.
Target(대상) 필드에 개발 머신에서 웹 애플리케이션이 실행 중인 포트 번호를 추가합니다.
Android용 Chrome에서 localhost:를 엽니다. 여기서 는 기기 포트 입력란에 입력한 값입니다 (기본값: 8080).

개발 머신에서 제공하는 콘텐츠가 표시됩니다.

자바스크립트 프로필의 Flame Chart 시각화

새로운 Flame Chart 보기는 타임라인 및 네트워크 패널에서 볼 수 있는 것과 유사한 시간 경과에 따른 자바스크립트 처리를 시각적으로 표시합니다.

가로축은 시간이고 세로축은 호출 스택입니다. 패널 상단에 전체 기록을 보여주는 개요가 표시되며, 아래와 같이 마우스로 해당 영역을 선택하여 '확대'할 수 있습니다. 세부정보 뷰 기간이 그에 따라 줄어듭니다.

세부정보 뷰에서 호출 스택은 함수 '블록'의 스택으로 표시됩니다. 다른 블록 위에 있는 블록은 하위 함수 블록에 의해 호출되었습니다. 특정 블록 위로 마우스를 가져가면 함수 이름과 타이밍 데이터가 표시됩니다.

이름 — 함수의 이름입니다.
자체 시간 — 함수의 현재 호출을 완료하는 데 걸린 시간입니다. 여기에는 호출한 함수를 제외한 함수 자체의 문만 포함됩니다.
총 시간 — 이 함수와 해당 함수가 호출한 모든 함수의 현재 호출을 완료하는 데 걸린 시간입니다.
집계된 자체 시간 — 기록 전체에서 함수의 모든 호출에 대한 집계 시간입니다. 이 함수에서 호출한 함수를 포함하지 않습니다.
집계된 총 시간 — 이 함수에서 호출한 함수를 포함하여 함수의 모든 호출에 대한 총 시간을 집계합니다.

함수 블록을 클릭하면 소스 패널에서 함수가 정의된 줄에 포함된 자바스크립트 파일이 열립니다.

Flame Chart를 사용하려면 다음 단계를 따르세요.

DevTools에서 Profiles 탭을 클릭합니다.
JavaScript CPU 프로필 기록을 선택하고 시작을 클릭합니다.
데이터 수집이 완료되면 중지를 클릭합니다.
프로필 보기에서 Flame Chart 시각화를 선택합니다.

5가지 주요 실적 측정 기능

DevTools의 획기적인 발전에 관한 이번 설문조사를 마무리하면서 성능 문제를 조사하기 위한 몇 가지 새로운 기능을 소개합니다.

연속 페인팅 모드
Paint 직사각형 및 레이어 테두리 표시
FPS 측정기
강제 동기식 레이아웃 찾기 (레이아웃 스래싱)
객체 할당 추적

연속 페인팅 모드

연속 페인팅 모드는 DevTools 설정(렌더링 > 연속 페이지 다시 그리기 사용 설정)의 옵션으로, 개별 요소 또는 CSS 스타일의 렌더링 비용을 식별하는 데 도움이 됩니다.

일반적으로 Chrome은 레이아웃이나 스타일 변경과 업데이트가 필요한 화면 영역만 화면에 페인팅합니다. 연속 페이지 다시 그리기를 사용 설정하면 전체 화면이 계속 다시 페인트됩니다. 헤드업 디스플레이에는 Chrome에서 페이지를 그리는 데 걸리는 시간, 시간 범위, 최근 페인트 시간의 분포를 보여주는 그래프가 표시됩니다. 히스토그램의 가로선은 16.6ms 표시를 나타냅니다.

이 기능을 사용하면 Elements 패널에서 DOM 트리를 탐색하면서 개별 요소를 숨기거나 (H 키를 눌러 현재 선택된 요소를 숨기거나) 요소의 CSS 스타일을 사용 중지할 수 있습니다. 페이지 페인트 시간의 변화를 확인하면 한 요소 또는 스타일이 페이지 렌더링 '가중치'에 얼마나 많은 시간을 추가하는지 확인할 수 있습니다. 단일 요소를 숨겨도 페인트 시간이 크게 단축된다면 해당 요소의 스타일이나 구성에 집중해야 합니다.

연속 페인팅 모드를 사용 설정하려면 다음 단계를 따르세요.

DevTools 설정을 엽니다. 1.일반 탭의 렌더링에서 연속 페이지 다시 그리기 사용 설정을 사용 설정합니다.

자세한 내용은 DevTools의 연속 페인팅 모드로 긴 페인트 시간 프로파일링을 참조하세요.

페인트 직사각형 및 레이어 테두리 표시

DevTools의 또 다른 옵션은 페인팅 중인 디스플레이의 직사각형 영역을 표시하는 것입니다. (설정 > 렌더링 > 페인트 직사각형 표시). 예를 들어 아래 스크린샷에서는 CSS 마우스 오버 효과가 보라색 그래픽에 적용되고 있는 영역 위에 페인트 직사각형이 그려져 있습니다. 화면의 상대적으로 작은 부분이므로 유용합니다.

전체 디스플레이가 다시 페인트되도록 하는 디자인 및 개발 관행은 피하는 것이 좋습니다. 예를 들어 다음 스크린샷에서는 사용자가 페이지를 스크롤하고 있습니다. 하나의 페인트 직사각형이 스크롤바를 둘러싸고 다른 직사각형은 페이지의 나머지 부분을 둘러쌉니다. 이 경우 본문 요소의 배경 이미지가 원인이 됩니다. 이미지 위치가 CSS에서 고정으로 설정되어 있으므로 스크롤할 때마다 Chrome에서 전체 페이지를 다시 그려야 합니다.

FPS 측정기

FPS 미터는 페이지의 현재 프레임 속도, 최소 및 최대 프레임 속도, 시간 경과에 따른 프레임 속도를 보여주는 막대 그래프, 프레임 속도 가변성을 보여주는 히스토그램을 표시합니다.

FPS 측정기를 표시하는 방법은 다음과 같습니다.

DevTools 설정을 엽니다.
일반을 클릭합니다.
렌더링에서 가속 합성 강제 적용 및 FPS 측정기 표시를 사용 설정합니다.

about:flags를 열고 FPS 카운터를 사용 설정한 다음 Chrome을 다시 시작하여 FPS 측정기가 항상 표시되도록 할 수 있습니다.

강제 동기식 레이아웃 찾기 (레이아웃 스래싱)

Chrome은 렌더링 성능을 극대화하기 위해 일반적으로 애플리케이션이 요청한 레이아웃 변경사항을 일괄 처리하고 레이아웃 패스를 예약하여 요청된 변경사항을 비동기식으로 계산하고 렌더링합니다. 그러나 애플리케이션에서 레이아웃에 종속된 속성 (예: offsetHeight 또는 offsetWidth)의 값을 요청하는 경우 Chrome은 즉시 동기식으로 페이지 레이아웃을 실행해야 합니다. 이러한 소위 강제 동기식 레이아웃은 특히 큰 DOM 트리에서 반복적으로 수행하는 경우 렌더링 성능을 크게 저하시킬 수 있습니다. 이 시나리오를 '레이아웃 스래싱'이라고도 합니다.

강제 동기식 레이아웃을 감지하면 타임라인 기록 옆에 노란색 경고 아이콘이 표시됩니다. 이러한 레코드 중 하나에 마우스를 가져가면 레이아웃을 무효화한 코드와 레이아웃을 강제한 코드의 스택 트레이스가 표시됩니다.

이 팝업에는 레이아웃이 필요한 노드 수, 재레이아웃 트리의 크기, 레이아웃 범위, 레이아웃 루트도 표시됩니다.

자세한 내용은 타임라인 데모: 강제 동기식 레이아웃 진단을 참고하세요.

객체 할당 추적

객체 할당 추적은 시간 경과에 따른 할당을 보여주는 새로운 유형의 메모리 프로필입니다. 할당 추적을 시작하면 DevTools가 시간이 지남에 따라 힙 스냅샷을 지속적으로 가져옵니다. 힙 할당 프로필은 객체가 생성되는 위치를 표시하고 보존 경로를 식별합니다.

객체 할당을 추적하는 방법은 다음과 같습니다.

DevTools에서 Profiles 탭을 클릭합니다.
Record heap allocations를 선택하고 Start를 클릭합니다.
데이터 수집이 완료되면 Stop recording heap profile (프로파일링 창의 왼쪽 하단에 있는 빨간색 원)을 클릭합니다.

캔버스 프로파일링 (실험용)

마지막으로 완전히 실험적인 기능을 살펴보겠습니다. 캔버스 프로파일링을 사용하면 캔버스 요소에서 이루어진 WebGL 호출을 녹음하고 재생할 수 있습니다. 개별 WebGL 호출 또는 호출 그룹을 단계별로 실행하고 렌더링된 결과를 확인할 수 있습니다. 또한 특정 호출을 재생하는 데 걸린 시간도 확인할 수 있습니다.

캔버스 프로파일링을 사용하려면 다음 안내를 따르세요.

DevTools 설정의 실험 탭에서 캔버스 검사 기능을 사용 설정합니다. (이 탭이 표시되지 않으면 about:flags를 열고 개발자 도구 실험 사용을 사용 설정한 다음 Chrome을 다시 시작합니다.)
프로필 탭을 클릭합니다.
캔버스 프레임 캡처를 선택하고 스냅샷 촬영을 클릭합니다.
이제 캔버스 프레임을 만드는 데 사용된 호출을 살펴볼 수 있습니다.