DevTools의 새로운 기능 (Chrome 58)

DevTools 출시 노트의 첫 번째 버전을 소개합니다. 이제부터 새 버전의 Chrome을 처음 열면 DevTools에서 해당 버전의 출시 노트 링크가 포함된 새로운 기능 창을 엽니다.

하이라이트

  • 타임라인 패널의 이름이 성능 패널로 변경되었습니다.
  • 프로필 패널의 이름이 메모리 패널로 변경되었습니다.
  • 이제 쿠키 값을 수정할 수 있습니다.
  • 이제 DevTools가 메모리 부족 오류가 발생하기 전에 자동으로 일시중지됩니다.

새로운 기능

수정 가능한 쿠키

쿠키 탭에서 셀을 더블클릭하여 값을 수정합니다.

쿠키 수정
그림 1. 쿠키 수정

kdzwinel님, 제출해 주셔서 감사합니다.

스타일 창에서 검사하고 수정할 수 있는 CSS 변수

이제 스타일 창에서 CSS 변수를 검사하고 수정할 수 있습니다. CSS 변수 데모를 참고하여 직접 사용해 보세요.

메모리 부족 중단점

이제 앱이 단시간에 많은 메모리를 할당하면 DevTools에서 자동으로 일시중지하고 힙 한도를 늘립니다. 이렇게 하면 힙을 검사하고 콘솔에서 명령어를 실행하여 메모리를 확보하고 문제를 계속 디버그할 수 있습니다. 자세한 내용은 Chrome의 작은 한 걸음, V8의 거대한 힙을 참고하세요.

메모리 부족 중단점에서 일시중지됨
그림 2. 메모리 부족 중단점에서 일시중지됨

캔버스 생성 시 중단점

이제 새 캔버스 컨텍스트가 생성될 때마다 트리거되는 이벤트 리스너 브레이크포인트를 만들 수 있습니다.

이벤트 리스너 중단점 창의 캔버스 컨텍스트 만들기 체크박스를 통한 캔버스 생성 중단점
그림 3. 이벤트 리스너 중단점 창의 캔버스 컨텍스트 만들기 체크박스를 통한 캔버스 생성 중단점

타이밍 탭의 시작 시간 통계

이제 타이밍 탭 상단에서 요청이 대기열에 추가되고 시작된 시점을 확인할 수 있습니다.

타이밍 탭의 시작 시간 통계
그림 4. 타이밍 탭의 시작 시간 통계

타이밍 탭의 서버 통계

이제 타이밍 탭에 맞춤 서버 통계를 삽입할 수 있습니다. 예시는 서버 타이밍 값 데모를 참고하세요.

타이밍 탭의 서버 통계
그림 5. 타이밍 탭의 서버 통계

sroussey님, 제출해 주셔서 감사합니다.

변경사항

타임라인 패널이 이제 성능 패널로 변경됨

타임라인 패널의 이름이 목적을 더 잘 반영하도록 '실적' 패널로 변경되었습니다.

프로필 패널이 메모리 패널로 변경됨

프로필 패널의 이름이 메모리 패널로 변경되었습니다. 이는 패널의 목적을 더 잘 반영하기 위함입니다.

CPU 프로파일러가 숨겨진 패널 뒤에 있음

이제 프로필 패널이 메모리 패널이라고 불리므로 더 이상 이 패널에 CPU 프로파일러를 두는 것은 적절하지 않습니다. 또한 장기적인 목표는 실적 패널에서 모든 사용자를 프로파일링하는 것입니다. 그동안 설정 > 도구 더보기 > JavaScript 프로파일러에서 이전 CPU 프로파일러에 계속 액세스할 수 있습니다.

성능 패널에서 CPU를 프로파일링하는 방법은 Chrome DevTools: Chrome 58의 JavaScript CPU 프로파일링을 참고하세요.

새 콘솔 UI

Console 패널과 창에 몇 가지 UI 변경사항이 적용되었습니다. 인기가 없는 일부 기능은 더 숨겨진 위치로 이동되었으며, 인기 있는 기능은 이제 더 쉽게 액세스할 수 있습니다.

  • 콘솔 설정 콘솔 설정을 클릭하여 콘솔 동작을 맞춤설정하는 설정에 액세스합니다.
  • 이제 콘솔 설정에서 로그 보존이 숨겨집니다.
  • 필터 버튼과 창이 사라집니다. 대신 드롭다운 메뉴를 사용하세요.
  • 이제 로그 필터링을 위한 텍스트 상자가 항상 표시됩니다. 이전에는 필터 창에 숨겨져 있었습니다.
  • 필터링 텍스트 상자는 정규식을 자동으로 허용하므로 정규식 체크박스가 사라집니다.
  • 위반 숨기기 체크박스가 사라집니다. 위반사항을 보려면 로깅 수준 드롭다운을 자세히로 설정합니다.
  • 기존 UI에서 모든 메시지 표시 체크박스를 선택 해제하면 새 UI의 콘솔 설정에서 선택한 컨텍스트만 표시 체크박스를 선택하는 것과 같습니다.
새로운 Console UI
그림 6. 새로운 Console UI

WebGL 이벤트 리스너 중단점이 이동함

WebGL 이벤트 리스너 브레이크포인트WebGL 카테고리에서 Canvas 카테고리로 이동했습니다. WebGL 카테고리가 삭제되었습니다.