DevTools Digest

Updates to the Developer tools in Chrome 33

HTML5 Rocks

이번 개발자도구 요약의 최신 버전에서는 편집 위치에 따른 코드 편집 경험의 개선, 컬럼 바로가기의 추가, 등록된 이벤트 리스너를 getEventListners()를 사용한 탐색 및 몇가지 작은 개발자도구의 UI 개선 사항들 전부에 대해 알아보도록 하겠습니다.

비동기적인 호출 스택

스택 추적은 이제 이벤트의 비동기적인 소스와도 연관되어집니다. 타이머, 애니메이션 프레임, XHR, 이벤트 리스너 등이 지원됩니다. 곧 HTML5Rocks에 비동기적인 호출 스택에 대한 완전한 글을 포스팅할 것입니다. (개발자도구의 실험실 기능에서 'Enable support for async stack traces'를 체크하는 것을 잊지 마시기 바랍니다.) [crbug.com/272416]

getEventListeners(window)

페이지의 DOM을 볼 때 어떠한 DOM에서라도 등록된 자바스크립트 이벤트 리스너를 가진 엘리먼트가 무엇인지를 항상 명확하게 알 수는 없었습니다. 이제 window 객체 상의 모든 등록된 이벤트 리스너는 콘솔 패널에서 getEventListeners를 통해 탐색할 수 있습니다. [crbug.com/336472]

Sources 패널이 코드 편집기에서 원래의 커서 위치들인 편집 위치 개념을 도입하였습니다. Alt-는 이전 편집 위치(이전에 위치한 코드 조각이 있는)로 이동하며 Alt+는 앞으로 이동합니다. ([crbug.com/281507]

Box Shadow의 자동 추천기능 업데이트

CSS 속성 box-shadow에 대한 자동 값 추천 기능이 none 키워드를 포함하도록 업데이트되었습니다. [crbug.com/332355]

특정 라인 및 컬럼 위치로 이동하기

Sources 패널의 ‘Search by filename’ (Ctrl + O 혹은 Cmd + O) 다이얼로그 박스에서 :line:column을 사용하여 어떤 라인의 특정 컬럼으로 이동할 수 있습니다. [crbug.com/337909]

더 쉬워진 툴바 핸들 기반 크기조절

이제 개발자도구의 메인 툴바에서 모든 비어있는 공간이 유효한 크기조절 핸들로 동작합니다. [crbug.com/304730]

레티나에 친화적인 네트워크 막대

네트워크 막대들이 이제부터는 이미지가 아닌 해상도와 독립적이며 레티나에 친화적인 CSS로 생성됩니다. [crbug.com/330659]

콘솔의 노이즈 감소

알 수 없는 인자들이 메타 뷰포트(meta viewport) 태그로 전달되어도 더 이상 콘솔에 에러로 표시되지 않습니다. 대신 여러분을 위해 덜 시끄럽도록 걸러진 경고를 출력합니다. [crbug.com/332794]

컬러 포맷의 cog 제거

이제 스타일 영역(Style pane)에서 컬러 포맷의 변경을 위한 cog가 제거되었습니다. 그렇지만 개발자도구의 설정에서 여전히 이를 변경할 수 있습니다. [crbug.com/333840]

붙어있는 콘솔 탭

이제 서랍(Drawer) 속의 콘솔 탭이 재로딩 뒤에도 그에 대한 상태를 바르게 기억합니다. [crbug.com/328551]

개선된 텍스트 자동크기조정 설명

에뮬레이션과 텍스트 자동크기조정에 대한 추가적인 설명을 위해 개발자도구 내에 모바일 에뮬레이션 문서에 대한 링크가 추가되었으며 텍스트 자동크기조정(Text autoresizing) 체크박스에 대해서도 툴팁이 나타닙니다. [crbug.com/319092]

리모트 IP 주소

이제 Network 패널의 리소스 뷰에서 호스트의 IP 주소를 볼 수 있습니다. [crbug.com/255602]


읽어주셔서 감사합니다. 여러분은 이 기능들을 카나리(Canary)에서 적용해 볼 수 있으며 또한, 12월 버전에서 언급된 기능들의 많은 부분들이 크롬 정식 버전(Chrome stable)에서 사용가능합니다!

Comments

0