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

DevTools의 새로운 기능 (Chrome 61)

Kayce Basques

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

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

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

아래 출시 노트의 동영상 버전을 확인하거나 계속 읽어보세요.

기기 모드에서 보급형 및 중간 등급 휴대기기 시뮬레이션

이제 Device Mode Throttling 메뉴가 기본적으로 노출되므로 이제 클릭 몇 번으로 저사양 또는 중간 등급 휴대기기를 시뮬레이션할 수 있습니다.

그림 1. 제한 메뉴

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

저장용량 사용량 보기

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

사용 섹션

그림 3. 사용량 섹션에는 https://airhorner.com이 원본 할당량인 15,214MB 중 66.9KB를 사용하고 있음을 보여줍니다.

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

캐시 저장소 탭의 새로운 캐시된 시간 열은 서비스 워커가 응답을 캐시한 시기를 보여줍니다.

캐시 시간 열

그림 4. 캐시된 시간 열

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

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

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

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

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

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

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

'Flamechart 마우스 휠 작업' 설정

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

ES6 모듈에 대한 디버깅 지원

ES6 모듈은 Chrome 61에서 기본적으로 제공됩니다. 여기서 DevTools와 관련된 작업은 별로 없지만, 디버깅이 예상대로 작동하는지는 다릅니다. 몇 가지 중단점을 설정하고 TodoMVC의 폴 아일랜드어 ES6 모듈 구현을 단계별로 따라해 보세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

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