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

DevTools의 새로운 기능 (Chrome 61)

Kayce Basques

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

휴대기기 제한 시뮬레이션 CPU 및 네트워크 제한을 동시에 설정하여 중급 또는 저가형 휴대기기를 시뮬레이션합니다.
저장용량 사용량 기술(IndexedDB, 캐시, 로컬, 세션 등)별로 원본에서 사용 중인 저장용량을 확인합니다.
캐시 타임스탬프 서비스 워커가 응답을 캐시한 시점을 확인합니다.
명령어 메뉴에서 FPS 미터를 사용 설정합니다.
성능 패널에서 마우스 휠 및 트랙패드 동작 변경
ES6 모듈을 기본적으로 디버그합니다.

참고: chrome://version에서 실행 중인 Chrome 버전을 확인할 수 있습니다. Chrome은 약 6주마다 새로운 메인 버전으로 자동 업데이트됩니다.

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

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

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

그림 1. 제한 메뉴

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

저장용량 사용량 보기

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

사용 섹션

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

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

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

캐시된 시간 열

그림 4. 캐시된 시간 열

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

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

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

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

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

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

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

'Flamechart 마우스 휠 작업' 설정

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

ES6 모듈 디버깅 지원

ES6 모듈은 Chrome 61에서 기본적으로 제공됩니다. 여기에서는 디버깅이 예상대로 작동하는 것 외에는 DevTools와 관련된 작업이 거의 없습니다. TodoMVC의 폴 아이리시의 ES6-Module-implementation에서 몇 가지 중단점을 설정하고 단계별로 실행해 보세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

crbug.com에서 의견 및 기능 요청을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools에 트윗하세요.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 댓글을 남겨주세요.