DevTools의 새로운 기능 (Chrome 61)

Kayce Basques

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

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

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에서 기본적으로 제공됩니다. 여기는 별다른 일들이 일어나지 않는 디버깅이 예상대로 작동하는 것 외에는 DevTools가하지 않습니다. 및 Paul Irish의 ES6 모듈 구현 TodoMVC를 직접 확인해보세요.

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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