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

2013년 Chrome DevTools 혁신

Arthur Evans

Tim Statler

소개

웹 애플리케이션의 복잡성과 기능이 증가함에 따라 Chrome DevTools도 발전했습니다. 폴 아이리시의 Google I/O 2013 강연 Chrome DevTools 혁명 2013을 요약한 이 동영상에서는 웹 애플리케이션을 빌드하고 테스트하는 방식을 혁신하는 최신 기능을 살펴봅니다.

폴의 강연을 놓쳤다면 위에서 다시 시청하거나 (실컷 시청하세요. 기다리겠습니다) 기능 요약으로 바로 이동하세요.

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

이 기능은 Chrome 28에서 사용 가능하며 이제 안정화 업데이트 채널에서 사용할 수 있습니다.

작업공간

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

아래 스크린샷은 워크스페이스가 작동하는 모습을 보여줍니다. Calendar 사이트가 localhost를 통해 로드되었으며 소스 패널에는 사이트의 루트 폴더의 로컬 파일 시스템 뷰가 표시됩니다. 이 폴더의 파일을 수정하면 디스크에 유지됩니다. 아래 스크린샷에서는 Calendar.css에 저장되지 않은 변경사항이 일부 적용되어 파일 이름 옆에 별표가 표시되어 있습니다.

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

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

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

워크스페이스 폴더 추가

작업 영역을 사용하려면 두 가지 작업을 해야 합니다. 로컬 폴더의 콘텐츠를 DevTools에서 사용할 수 있도록 만들고 해당 폴더를 URL에 매핑하는 것입니다.

새 워크스페이스 폴더를 추가하려면 다음 단계를 따르세요.

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

소스 패널에는 localhost를 통해 로드된 소스와 함께 새 워크스페이스 폴더가 표시됩니다. 이제 워크스페이스 폴더 내에서 파일을 실시간으로 수정할 수 있으며 변경사항은 디스크에 유지됩니다.

폴더를 URL에 매핑

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

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

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

이제 소스 패널에 아래와 같이 localhost 소스가 아닌 사이트의 로컬 워크스페이스 폴더의 콘텐츠만 표시됩니다.

네트워크 폴더를 워크스페이스 폴더에 연결하는 다른 두 가지 방법이 있습니다.

네트워크 리소스를 마우스 오른쪽 버튼으로 클릭하거나 Control 키를 누른 채 클릭하고 Map to File System Resource를 선택합니다.
DevTools 설정 대화상자의 Workspace 탭에서 매핑을 수동으로 추가합니다.

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을 로컬호스트에서 실행 중인 웹 서버에 쉽게 연결할 수 있습니다. 이는 DNS 트릭 없이는 일부 네트워크 환경에서 어렵습니다.

ADB 확장 프로그램 사용

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

설치가 완료되면 Chrome에 회색 Android 메뉴 아이콘이 표시됩니다. ADB를 시작하려면 아이콘을 클릭한 다음 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에서 Enable Developer Tools experiments(개발자 도구 실험 사용 설정)를 사용 설정하고 Chrome을 다시 시작합니다.
about:inspect를 엽니다. 휴대기기와 열려 있는 탭 목록이 표시됩니다.
나열된 사이트 옆에 있는 '검사' 링크를 클릭합니다.
DevTools 창이 열리면 설정 패널을 엽니다.
'실험'에서 역방향 포트 전달 사용 설정을 사용 설정합니다.
DevTools 창을 닫고 about:inspect로 돌아갑니다.

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

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

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

JavaScript 프로필의 Flame 차트 시각화

새로운 Flame Chart 뷰는 타임라인 및 네트워크 패널에 있는 것과 유사하게 JavaScript 처리가 시간이 지남에 따라 어떻게 변하는지 시각적으로 보여줍니다.

가로축은 시간이고 세로축은 콜 스택입니다. 패널 상단에는 전체 녹화 파일을 보여주는 개요가 표시되며 아래와 같이 마우스로 개요의 특정 영역을 선택하여 '확대'할 수 있습니다. 세부정보 보기 타임스케일이 그에 따라 축소됩니다.

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

이름: 함수의 이름입니다.
자체 소요 시간: 함수의 현재 호출을 완료하는 데 걸린 시간으로, 함수 자체의 문이 포함되며 호출된 함수는 포함되지 않습니다.
총 시간: 이 함수의 현재 호출과 이 함수가 호출한 모든 함수를 완료하는 데 걸린 시간입니다.
집계된 자체 시간: 기록 전체에서 함수의 모든 호출에 대한 집계 시간으로, 이 함수에서 호출한 함수는 포함되지 않습니다.
집계된 총 시간: 이 함수에서 호출한 함수를 포함하여 함수의 모든 호출에 걸린 총 시간을 집계한 값입니다.

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

플 flame 차트를 사용하려면 다음 단계를 따르세요.

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

5가지 주요 실적 측정 기능

DevTools의 혁신적인 발전에 관한 이 설문조사를 마무리하는 것은 성능 문제를 조사하기 위한 몇 가지 새로운 기능입니다.

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

연속 페인팅 모드

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

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

이렇게 하면 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에서 프로필 탭을 클릭합니다.
힙 할당 기록을 선택하고 시작을 클릭합니다.
데이터 수집이 완료되면 힙 프로필 기록 중지 (프로파일링 창 왼쪽 하단의 빨간색 원)를 클릭합니다.

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

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

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

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