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

DevTools의 새로운 기능 (Chrome 61)

Kayce Basques

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

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

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

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

Device Mode에서 저사양 및 미드티어 휴대기기 시뮬레이션

이제 Device Mode Throttling 메뉴가 기본적으로 표시되며, 이를 통해 중간급 또는 저사양 휴대기기를 타겟팅할 수 있습니다.

그림 1. 제한 메뉴

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

스토리지 사용량 보기

애플리케이션 패널의 저장용량 비우기 탭에 있는 새로운 사용량 섹션에서 원본이 사용 중인 저장용량 및 이 기기의 출처에 대한 최대 할당량

사용 섹션

그림 3. 사용량 섹션을 보면 https://airhorner.com가 원본의 할당량 15214MB

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

Cache Storage 탭의 새로운 캐시된 시간 열을 통해 서비스 워커가 언제 캐시되었는지 알 수 있습니다. 확인할 수 있습니다

'캐시된 시간' 열

그림 4. 캐시된 시간 열

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

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

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

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

성능 기록을 통해 마우스휠 동작을 설정하여 확대/축소 또는 스크롤

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

예를 들어 녹화 파일의 기본 섹션에서 마우스휠을 사용하거나 기본 동작은 확대 또는 축소입니다. 이 스크롤으로 설정하면 이 동작이 위 또는 아래로 스크롤합니다.

'Flamechart 마우스 휠 동작' 설정

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

ES6 모듈 디버깅 지원

ES6 모듈은 Chrome 61에서 기본적으로 제공됩니다. 여기는 별다른 일들이 일어나지 않는 디버깅이 예상대로 작동하는 것 외에는 개발자 도구를 사용할 수 없습니다. 및 에 중단점을 설정해 보세요. Paul Irish의 ES6 모듈 구현 TodoMVC를 직접 확인해보세요.

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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