DevTools의 새로운 기능 (Chrome 61)

Kayce Basques

Chrome 61의 DevTools에 도입되는 새로운 기능과 주요 변경사항은 다음과 같습니다.

아래에서 출시 노트의 동영상 버전을 확인하거나 자세한 내용을 알아보세요.

기기 모드에서 저가형 및 중급형 휴대기기 시뮬레이션

이제 기기 모드 제한 메뉴가 기본적으로 노출되며 클릭 몇 번으로 저가형 또는 중급형 휴대기기를 시뮬레이션할 수 있습니다.

제한 메뉴

그림 1. 제한 메뉴

제한 메뉴 정의

그림 2. 제한 메뉴 위로 마우스를 가져가거나 캡처 설정 메뉴를 열어 미드티어 모바일 및 로우엔드 모바일의 정의를 확인합니다.

저장용량 사용량 보기

애플리케이션 패널의 저장용량 지우기 탭에 있는 새로운 사용량 섹션에는 출처가 사용 중인 저장용량과 이 기기의 출처에 대한 최대 할당량이 표시됩니다.

사용 섹션

그림 3. 사용량 섹션에 https://airhorner.com가 출처의 할당량 15214MB 중 66.9KB를 사용하고 있는 것으로 표시됩니다.

서비스 워커가 응답을 캐시한 시점 보기

캐시 저장소 탭의 새 캐시된 시간 열에는 서비스 워커가 응답을 캐시한 시점이 표시됩니다.

캐시된 시간 열

그림 4. 캐시된 시간 열

명령어 메뉴에서 FPS 미터 사용 설정

이제 명령 메뉴에서 FPS 측정기를 사용 설정할 수 있습니다.

명령어 메뉴에서 FPS 측정기 사용 설정

그림 5. 명령어 메뉴에서 FPS 측정기 사용 설정

성능 녹화로 확대/축소 또는 스크롤하도록 마우스 휠 동작 설정

설정을 열고 새 Flamechart 마우스 휠 작업 설정을 지정하여 성능 패널에서 마우스 휠의 동작 방식을 변경합니다.

예를 들어 녹화의 기본 섹션에서 마우스 휠을 사용하거나 트랙패드에서 두 손가락을 사용해 스와이프하면 기본 동작은 확대 또는 축소입니다. 설정을 스크롤로 변경하면 이 동작으로 위 또는 아래로 스크롤할 수 있습니다.

'Flamechart 마우스 휠 작업' 설정

그림 6. Flamechart 마우스 휠 작업 설정

ES6 모듈 디버깅 지원

ES6 모듈은 Chrome 61에서 기본적으로 제공됩니다. 여기에서는 디버깅이 예상대로 작동하는 것 외에는 DevTools와 관련된 작업이 거의 없습니다. 폴 아이리시의 ES6-Module-implementation에서 TodoMVC의 일부 브레이크포인트를 설정하고 단계별로 살펴보면서 직접 확인해 보세요.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.