지난 9월 16~17일간 토론토에서 열렸던 WEB UNLEASHED 2015에서 Addy Osmani가 발표한 What's new in Chrome DevTools?를 간단하게 요약했다. 발표자료와 동영상이 각각 제공되고 있으니 관심있는 분은 꼭 원본 자료를 살펴보기 바란다. 발표자료보다 동영상에서 확인할 수 있는 내용이 많으므로 자료를 살펴볼 결심을 했다면 동영상을 볼 것을 추천한다.
DevTools 공통
- DevTools 상단의 메뉴탭의 위치를 drag & drop으로 변경 가능
- Console에서 다양한 syntax highlighting 지원
Network Panel
> Filmstrip 지원
- 시간별로 스크린샷을 기록.
- 실제 화면에 렌더링되는 내용을 알 수 있음.
> Throttling
- 브라우저에서 네트워크 속도를 조절할 수 있음.
- 이미 정해져 있는 속도 중에서 선택하거나 임의로 조건을 지정할 수 있음.
> Block Request
- 특정 요청을 보내지 않도록 막을 수 있음.
- 특정한 요청으로 인해 속도가 느려지는 것으로 의심된다면 해당 요청만 막은 후 테스트 가능.
Timeline
> long frame times
- 붉은 삼각형은 jank가 존재하는 것을 나타냄
- Jank: 16ms(실제로는 10ms)내에 화면이 갱신되지 못해 프레임 속도가 떨어지는 현상
> Filmstrip
- 메뉴의 Screenshots를 선택
- 애니메이션과 같이 화면에 그려지는 내용을 확인할 수 있음
- 타임라인의 특정 위치를 선택하면 해당 시간에서 화면에 그려지는 내용을 알 수 있음
> Aggregated Details
- 실행 비용이 가장 높은 코드를 쉽게 볼 수 있음
- URL을 기준으로 모아볼 수 있음
> Paint Profiler
- 메뉴의 Paint 선택
- 페인트된 내용, 그리는데 걸리는 시간, 페인트에 대한 상세한 내용을 알 수 있음.
Elements Panel
> Animation Inspection
- about:flags에서 기능을 활성화해야 사용 가능
- Elements > Styles > Toggle Animation controls
- playback 속도, 실행 시간등을 간단히 변경하면서 테스트 가능
> Cubic Bezier Editor
- transition이 적용된 엘리먼트에서 직접 값을 변경해가며 테스트 가능
> DOM Animation Changes
- Class 변경으로 애니메이션이 이루어질 때 변경이 발생하는 dom에 대한 하이라이트 지원
> Colors & Pallettes
- Eye Dropper로 페이지상의 색을 바로 선택 가능
- 페이지에서 사용중인 Color pallettes 지원
- Matirial Design palette 지원
- Custom palette 지원
> Search selectors
- ctrl+f 후 셀렉터를 입력해서 element를 찾을 수 있음
> Event Listeners
- 임의의 Dom에 등록된 이벤트 리스너를 확인할 수 있음
- Framework를 사용하여 등록된 이벤트 리스너도 확인 가능
> HTML in Console
- console에서 html element를 바로 수정할 수 있으며 화면에도 반영됨
Console
> tips
- $0: 마지막으로 선택한 dom node
- $$('header'): query selector의 alias
- copy(): clipboard로 복사
- inspect(): 코드로 특정한 코드를 선택하여 inspect할 수 있음
- console.timeStamp: timeline에 라벨을 붙일 수 있음
Sources
> inline variables
- 디버깅 중에 변수의 값을 인라인으로 표시
> Proactive Compilation
- 컴파일러처럼 오류가 있을 경우 바로 표시
> Blackboxing JS libraries
- 특정한 파일을 블랙박스 처리하여 해당 파일은 디버깅 과정에서 건너뛸 수 있음
> ES2015 Promises Inspector
- about:flags에서 기능을 활성화해야 사용 가능
- promise의 다양한 정보를 제공하여 디버깅을 편리하게 만듬
- Async모드: 비동기적으로 실행되는 경우에도 call stack을 정상적으로 보여줌
이 외에도 계속 기능을 추가하고 있음