2014년 7월 20일 일요일

[튜토리얼/한글화] 크롬 버전 35의 개발자도구 요약(DevTools Digest - Chrome 35)

HTML5Rocks에 +Umar Hansa의 '크롬 버전 35의 개발자도구 요약(DevTools Digest - Chrome 35)' 한글 튜토리얼이 업데이트되었습니다. :)

"크롬 개발자도구는 크롬에서 가장 빠르게 업데이트되는 항목 중의 하나입니다. 35 버전에서의 주요 업데이트는 양이 많지는 않지만 에디팅 기능, 네트워크 리소스에 대한 필터링, 이벤트 리스너 및 기타 편집 편의 기능들이 제공됩니다."



TL;DR;


본문의 내용이 길지 않으므로 이번 업데이트에 대한 요약은 전반적으로 추가된 기능에 대해서만 정리합니다.

> 네트워크 패널 필터링


도메인(Domain)과 같은 확실한 필드들을 통해 리소스들을 필터링할 수 있습니다. 또한 타이핑하고 있는 쿼리들에 대해 실시간의 유효한 필터 값들을 제안하는 자동완성 기능 역시 지원됩니다.

> Shadow DOM 컨텐츠 편집


개발자도구는 Element 패널 내에서 정규적인 HTML의 수정이 항상 가능했으며, 이러한 기능들은 이제 Shadow DOM의 엘리먼트 부분까지 확장되었습니다.

> CodeMirror 4.0으로의 업그레이드


자바스크립트 기반의 텍스트 에디터로써 Source 패널의 일부분으로 사용되고 있는 CodeMirror가 버전 4로 업그레이드되었습니다. 키보드 단축키를 포함한 많은 새로운 기능들이 추가되었습니다.

> CSS 속성의 빠른 검색


이제 Style 패널의 새로운 검색 상자에서 속성 이름들이나 룰 셀렉터들을 검색할 수 있습니다. 결과물은 여러분이 타이핑하고 있는 쿼리에 대해 실시간으로 강조처리됩니다.

> 콘솔 메세지에 대한 타임스탬프


로그 메세지들이 빠르고 연쇄적으로 발생하는 경우 메세지가 출력된 정확한 시간을 확인할 수 있는 것은 유용할 것입니다. (개발자도구 실험실 기능)

> 힙 스냅샷에 대한 통계적 메모리 명세


기록된 힙 스냅샷을 볼 때 자바스크립트의 관점에서 어떠한 부분이 대부분의 메모리를 소모하는지를 확인하기 위한 시각적이고 컬러화된 통계 파이 차트를 확인할 수 있습니다. 현재 실험실 기능이므로 “Heap snapshot statistics”의 활성화를 통해 확인할 수 있습니다.

> console.log의 Wrapping version이 아닌 원본 소스 보기


여러분은 아마도 console.log의 래퍼 함수(Wrapper function)을 가지고 있을 때 개발자도구는 원래 위치를 가지고 있습니다.

> 작지만 강력한 추가 기능들


  • Element 패널 내에서 Event Listeners 새로고침 후 이벤트 리스너의 추가/삭제 가능
  • Ctrl + ` 를 이용한 콘솔 입력에 포커스 설정
  • border- 스타일의 자동완성 지원
  • Restore defaults and reload(초기화 및 갱신) 버튼이 Setting 패널에 추가
  • dock to left(왼쪽으로 도킹하기)를 적용 가능(실험실 기능)
  • "Wheel"을 이벤트 리스너의 중단점(breakpoint)으로 추가


자세한 내용은 튜토리얼을 참조하시기 바랍니다.

번역 링크