DevTools Digest - Chrome 35

Updates to the Developer Tools in Chrome 35

HTML5 Rocks

개발자도구 요약: Chrome 35 버전

모두들 안녕한가요? 우리는 개발자도구 요약의 지난 버전에서 강력한 비동기 호출 스택과 몇가지 다른 기능에 대해 확인해보았습니다. 이 버전에서 개선된 (자동완성 기능을 가진) 네트워크 패널 필터링, Shadow DOM 컨텐츠를 수정할 수 있는 기능, 코드 미러 4의 업데이트 등을 확인해볼 것입니다.

네트워크 패널 필터링

도메인(Domain)과 같은 확실한 필드들을 통해 리소스들을 필터링할 수 있습니다. 하나의 필터 형식의 예는 Domain:website.com입니다. 필터링 기능에 대해 추가적으로 타이핑하고 있는 쿼리들에 대해 실시간의 유효한 필터 값들을 제안하는 자동완성 기능 역시 확인할 수 있을 것입니다. 이는 특정 도메인에서 제공되는 전체 리소스를 검색할 필요가 있을 때 유용할 것입니다. [crbubg.com/258421]

Network panel filtering

Shadow DOM 컨텐츠 편집

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

Edit Shadow DOM content

CodeMirror 4.0으로의 업그레이드

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

CSS 속성의 빠른 검색

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

Quick search for a CSS-property

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

로그 메세지들이 빠르고 연쇄적으로 발생하는 경우 메세지가 출력된 정확한 시간을 확인할 수 있는 것은 유용할 것입니다. 이를 개발자도구의 실험실 기능을 통해 활성화할 수 있습니다. [crbug.com/131714]

Timestamps next to console messages

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

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

Memory Statistics breakdown for heap snapshots

console.log의 감싸진 버전(Wrapping version)이 아닌 원본 소스 보기

여러분은 아마도 console.log의 래퍼 함수(Wrapper function)을 가지고 있겠지만 불행하게도 콘솔에서 모든 메세지는 util.js:46와 같은 무언가로부터 발생합니다. 이제 개발자도구는 원래 위치를 가지고 있습니다. 개발자도구가 블랙박스를 가지고 있기 위해 콘솔 로그 메세지를 감싸고 있는 파일을 “Skip stepping through sources with particular names” 입력 상자 내에 입력하면 로그 문장의 실제 소스를 보여 줍니다. [crbug.com/231007]

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

  • Element 패널 내에서 Event Listeners 상자를 새로고침하고 나서 동적으로 자바스크립트 이벤트 리스너를 추가하거나 삭제할 수 있습니다. [crbug.com/341044]

  • 콘솔 입력에 포커스를 설정하기 위해 Ctrl+`를 사용할 수 있습니다. 이는 개발자도구의 키보드 전용 작업흐름을 사용하고자 할 때 유용할 것입니다. [crbug.com/144943]

  • border-스타일 값의 자동완성 제안 사항들(dotted, dashed, double, groove)이 규격에 맞게 업데이트되었습니다. [crbug.com/349998]

  • 정확히 주장하는 대로 Restore defaults and reload(초기화 및 갱신) 버튼이 Setting 패널에 추가되었습니다. [crbug.com/135451]

  • 현재 실험실 기능에서 여러분의 작업흐름에 적합하도록 dock to left(왼쪽으로 도킹하기)를 적용해볼 수 있습니다. 다른 레이아웃 모드는 메인 윈도우 (좌우)에 도킹되고 별도의 윈도우로 도킹이 해제됩니다. [crbug.com/134282]

  • "휠(Wheel)"이 이제 이벤트 리스너의 중단점(event listener breakpoint)으로 추가되며, 이는 일반적인 click, mousemove, mousedown 등의 이벤트에 대한 추가사항입니다. [crbug.com/347562]

이것이 전체 사항합니다. 읽어주셔서 고맙습니다!

Comments

0