"여기서 다루는 기능은 기본적으로 크롬 Canary에서 동작합니다. 일반적으로 Official은 대부분 8~10주 뒤에 적용되므로 혼동이 없으시기 바랍니다. Chrome Canary Version은 여기에서 다운로드하시기 바랍니다."
크롬 개발자도구 12월 다이제스트
최근 많은 개선된 기능들이 크롬 개발자도구에 포함되고 있으며 몇 가지는 작은 것이지만 몇가지는 아주 큰 기능들입니다. 오늘은 엘리먼트 패널의 업데이트에 대한 이야기부터 시작하여 콘솔, 타임라인 등으로 주제를 넓혀나가보려 합니다.
비활성화되어 있는 스타일 규칙의 복사가 코멘트처럼 처리
Styles pane에서 전체 CSS 규칙을 복사하는 것은 이제 토글로 꺼둔것을 포함하며 클립보드에는 코멘트처리한 것처럼 존재하게 됩니다. [crbug.com/316532]
CSS 경로로써 복사하기
‘Copy as CSS path’가 이제 엘리먼트 패널의 DOM 노드의 메뉴 아이템에서 사용가능합니다. (Copy XPath 메뉴와 유사합니다.)
CSS 셀렉터의 생성은 여러분의 스타일시트/자바스크립트에 제한되지 않으며 WebDriver 테스트의 로케이터 전략으로 대체될 수도 있습니다.[crbug.com/277286]
쉐도우 DOM 엘리먼트 스타일 보기
이제 쉐도우 루트의 자식 엘리먼트는 별도로 확인 가능한 스타일을 가집니다. [crbug.com/279390]
콘솔의 copy()가 객체에 대해 동작
커맨드라인 API의 copy() 메소드가 이제 객체에 대해 동작합니다. 일단 가서 콘솔 패널에 copy({foo:'bar'})를 입력하고 어떻게 문자열화가 되는지와 객체의 형식화된 버전이 클립보드에 어떻게 남아 있는지 확인하시기 바랍니다. [crbug.com/289348]
콘솔을 위한 정규표현 필터
콘솔 패널에서 정규 표현식을 이용한 콘솔 메시지의 필터가 가능합니다.[crbug.com/318308]
손쉬운 이벤트 리스너 제거
콘솔 패널에서 document의 첫번째 마우스 이벤트 리스너를 검색하기 위해getEventListeners(document).mousewheel[0];를 실행하여 보시기 바랍니다. 계속해서 이벤트 리스너를 제거하기 위해 $_.remove();를 실행하여 보시기 바랍니다.($_는 가장 최근에 평가된 표현의 값입니다.) [crbug.com/309524]
CSS 경고의 제거
"Invalid CSS property value(유효하지 않은 CSS 속성값)"과 같은 스타일 경고는 이제 제거되었습니다. 브라우저의 핵(hack)을 포함하여 실제 CSS에 대해 더 견고한 구현을 만들기 위한 노력은 계속되고 있습니다. [crbug.com/309982]
타임라인 동작의 파이차트 요약
타임라인 패널은 이제 Details pane 내에 렌더링 비용의 소스를 시각적으로 보여주는 파이 차트를 포함합니다. - 이는 슬쩍 보는 것만으로도 성능의 병목지점을 파악하는데 도움을 줄 것입니다.
이제 pane 자체에서 알려주는 팝오버 디스플레이를를 사용하여 더 많은 정보를 발견할 수 있습니다. 이를 보기 위해 타임라인 기록을 시작하고 프레임을 선택하여 파이차트를 포함하는 새로운 Details pane을 보시기 바랍니다. 프레임뷰를 볼 때 평균 FPS (1000ms/프레임)과 같은 흥미로운 상태값을 선택한 프레임에 대해 볼 수 있습니다. [crbug.com/247786]
이미지 리사이즈 이벤트 상세정보
이제 이미지의 리사이즈 및 디코딩 이벤트가 타임라인 패널에 엘리먼트 패널 내의 DOM 노드에 대한 링크를 포함합니다.
이미지 URL 링크는 리소스 패널에서 관련된 리소스를 찾을 수 있도록 해줍니다. [crbug.com/244159]
GPU 프레임
GPU에서 발생하는 프레임들은 이제 최상단 및 메인 스레드 상의 프레임 위에서 보여집니다. [crbug.com/305863]
popstate 리스너 상에서의 브레이크
'popstate'는 이제 Sources panel의 사이드바에서 이벤트 리스너 중단점처럼 사용이 가능합니다. [crbug.com/88112]
렌더링 설정의 서랍(Drawer) 기능
서랍을 열면 이제 많은 pane들이 표시되며 그 중의 하나가 새로 그리는 영역을 표시하는(역주: 이전의 기능에서는 Show paint rectangles로 설정할 수 있는 기능입니다.) 렌더링 패널, FPS 메터기 등입니다. 이것이 이제 설정(Settings) > "Show 'Rendering' view in console drawer"가 가능하도록 기본 설정이 되었습니다.
이미지의 Data URL 복사
리소스 패널의 이미지들은 이제 그들의 컨텐츠를 data URI (data:image/png;base64,iVBO...) 형태로 복사할 수 있습니다. 이를 사용하기 위해서는 Frames > [Resource] > Images에서 이미지 리소스를 찾아 이미지 미리보기 화면에서 오른쪽 클릭으로 컨텍스트 메뉴를 열고 ‘Copy Image as Data URL’를 선택하면 됩니다. [crbug.com/321132]
Data URI 필터링
만약 그것들이 없다고 생각되신다면 Data URIs는 이제 Network 탭에서 걸러내질 수 있습니다. 다른 리소스 필터 타입을 보기 위해서는 필터 아이콘()을 클릭하시기 바랍니다. [crbug.com/313845]
네트워크 타이밍 버그의 수정
만약 이미지가 다운로드되는데 300,000년이 걸린다는 것을 본적이 있으시다면 사과드리겠습니다. ;) 이러한 네트워크 리소스에 대한 잘못된 시간 계산은 이제 수정되었습니다. [crbug.com/309570]
네트워크 기록 동작에 대한 조작성 향상
네트워크 기록 동작이 약간 달라졌습니다. 첫번째로 기록 버튼이 타임라인이나 CPU 프로파일에서 기대하던 것처럼 동작합니다. 그리고 여러분들이 원했던 방식으로 개발자도구가 열려있는 동안 페이지를 리로딩한다면 네트워크 기록은 자동으로 시작할 것입니다. 그리고 나서 자동으로 꺼지므로 페이지 로딩 뒤의 네트워크 동작을 캡쳐하고 싶으시다면 이를 다시 켜시면 됩니다. 이는 여러분의 임시적인 네트워크 요청으로 인한 결과의 왜곡없이 폭포수 모델을 손쉽게 시각화할 수 있도록 해줍니다. [crbug.com/325878]
개발자도구의 테마가 이제 Extension을 통해 가능
사용자의 스타일시트가 개발자도구에 대한 커스텀 스타일을 적용하기 위한 크롬 익스텐션을 허가하는 개발자도구의 실험실 기능("Allow custom UI themes" 체크박스)을 통해 가능합니다. Sample DevTools Theme Extension에서 예제를 보실 수 있습니다. [crbug.com/318566]
개발자도구 요약의 이번 에디션은 여기까지입니다. 기존 것을 보신 적이 없으시다면 11월 에디션도 확인해보시기 바랍니다.
댓글 없음:
댓글 쓰기