DevTools 출시 노트의 첫 번째 글에 오신 것을 환영합니다. 이제부터 새 버전의 Chrome을 처음 열면 DevTools가 해당 버전의 출시 노트 링크가 있는 새로운 기능 창을 엽니다.
하이라이트
- 타임라인 패널의 이름이 실적 패널로 변경되었습니다.
- 프로필 패널 이름이 메모리 패널로 바뀌었습니다.
- 이제 쿠키 값을 수정할 수 있습니다.
- 이제 DevTools가 메모리 부족 오류가 발생하기 전에 자동으로 일시 중지합니다.
새로운 기능
수정 가능한 쿠키
쿠키 탭의 셀을 더블클릭하여 값을 수정합니다.
참여해 주신 kdzwinel님께 감사드립니다.
Styles 창에서 검사 및 편집 가능한 CSS 변수
이제 스타일 창에서 CSS 변수를 검사하고 수정할 수 있습니다. CSS 변수 데모를 참조하여 직접 사용해 보세요.
메모리 부족 중단점
앱이 짧은 시간에 많은 양의 메모리를 할당하면 이제 DevTools가 자동으로 일시중지하고 힙 한도를 늘립니다. 이를 통해 힙을 검사하고 콘솔에서 명령어를 실행하여 메모리를 확보하며 문제를 계속 디버그할 수 있습니다. 자세한 내용은 One Small Step For Chrome, One Giant Heap For V8을 참조하세요.
캔버스 생성 시 중단점
이제 새 캔버스 컨텍스트가 생성될 때마다 트리거되는 이벤트 리스너 중단점을 만들 수 있습니다.
'시간' 탭의 시작 시간 통계
이제 Timing 탭 상단에서 요청이 큐에 추가되고 시작된 시점을 확인할 수 있습니다.
타이밍 탭의 서버 통계
이제 타이밍 탭에 커스텀 서버 통계를 삽입할 수 있습니다. 예는 서버 시간 값 데모를 참고하세요.
참여해 주신 sroussey님께 감사드립니다.
변경사항
실적 패널로 변경된 타임라인 패널
타임라인 패널의 목적을 더 잘 반영하기 위해 Performance 패널로 이름이 변경되었습니다.
'Profiles(프로필)' 패널이 'Memory(메모리)' 패널로 변경되었습니다.
프로필 패널의 용도를 더 잘 반영하기 위해 메모리 패널로 이름이 변경되었습니다.
숨겨진 패널 뒤에 있는 CPU 프로파일러
이제 프로필 패널을 메모리 패널이라고 부르기 때문에 이 패널에 CPU 프로파일러를 두는 것은 의미가 없습니다. 또한 장기적인 목표는 성능 패널에서 모든 사용자 프로파일링을 가져오는 것입니다. 그때까지는 Settings > More Tools > JavaScript Profiler에서 이전 CPU 프로파일러에 계속 액세스할 수 있습니다.
Performance 패널에서 CPU를 프로파일링하는 방법을 알아보려면 Chrome DevTools: Chrome 58에서 JavaScript CPU 프로파일링을 참고하세요.
새로운 콘솔 UI
Console 패널과 창에 일부 UI가 변경되었습니다. 일부 인기 없는 기능은 더 많은 숨겨진 위치로 이동했으며, 이제 인기 있는 기능에 더 쉽게 액세스할 수 있습니다.
- 콘솔 설정
을 클릭하여 콘솔 동작을 맞춤설정하기 위한 설정에 액세스합니다. - 이제 콘솔 설정에서 로그 보존이 숨겨집니다.
- Filters 버튼과 창이 사라집니다. 대신 드롭다운 메뉴를 사용하세요.
- 이제 로그 필터링 텍스트 상자가 항상 표시됩니다. 이전에는 필터 창에 숨겨져 있었습니다.
- 필터링 텍스트 상자에 자동으로 정규식이 입력되므로 Regex 체크박스가 사라집니다.
- 위반사항 숨기기 체크박스가 사라졌습니다. 위반을 확인하려면 로깅 수준 드롭다운을 상세로 설정합니다.
- 기존 UI에서 Show all messages(모든 메시지 표시) 체크박스를 선택 해제하는 것은 새 UI의 Console Settings(콘솔 설정)에서 Selected context only(선택한 컨텍스트만) 체크박스를 선택하는 것과 같습니다.
WebGL 이벤트 리스너 중단점이 이동함
WebGL 이벤트 리스너 중단점이 WebGL 카테고리에서 Canvas 카테고리로 이동했습니다. WebGL 카테고리가 삭제되었습니다.