DevTools의 새로운 기능 (Chrome 61)

Kayce Basques
Kayce Basques
X GitHub

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

아래에서 출시 노트의 동영상 버전을 확인하거나 계속 읽고 자세히 알아보세요.

기기 모드에서 로우엔드 및 미드티어 휴대기기 시뮬레이션

이제 기기 모드 제한 메뉴가 기본적으로 표시되며, 몇 번의 클릭으로 로우엔드 또는 미드티어 휴대기기를 시뮬레이션할 수 있습니다.

제한 메뉴

그림 1. 제한 메뉴

제한 메뉴 정의

그림 2. 제한 메뉴 위로 마우스를 가져가거나 캡처 설정 메뉴를 열어 중간급 모바일 및 보급형 모바일의 정의를 확인합니다.

스토리지 사용량 보기

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

사용 섹션

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

서비스 워커가 응답을 캐시한 시점 확인

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

시간 캐시됨 열

그림 4. 캐시된 시간 열

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

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

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

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

성능 기록으로 마우스 휠 동작을 확대/축소 또는 스크롤로 설정

설정을 열고 새 프레임 그래프 마우스 휠 작업 설정을 지정하여 성능 패널에서 마우스 휠이 작동하는 방식을 변경합니다.

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

'Flamechart 마우스 휠 작업' 설정

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

ES6 모듈 디버깅 지원

ES6 모듈은 Chrome 61에서 기본적으로 제공됩니다. 디버깅이 예상대로 작동한다는 점을 제외하면 DevTools와 관련해 특별한 점은 없습니다. TodoMVC의 Paul Irish의 ES6 모듈 구현에서 몇 가지 중단점을 설정하고 단계별로 실행하여 직접 확인해 보세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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