최근에는 여러 가지 업데이트된 기능이 Chrome DevTools에 추가되었습니다. 요소 패널의 업데이트부터 시작해 콘솔, 타임라인 등에 관해 알아보겠습니다.
사용 중지된 스타일 규칙은 주석 처리된 상태로 복사됨
이제 스타일 창에서 전체 CSS 규칙을 복사하면 사용 중지한 스타일이 포함되며, 주석 처리된 상태로 클립보드에 남아 있습니다. [crbug.com/316532]
CSS 경로로 복사
이제 'CSS 경로로 복사'가 Elements 패널에서 DOM 노드의 메뉴 항목으로 제공됩니다 (XPath 복사 메뉴 항목과 유사함).
CSS 선택자 생성은 스타일시트/자바스크립트로 제한되지 않아도 되며, WebDriver 테스트에서 위치 검색기 전략을 대체할 수도 있습니다. [crbug.com/277286]
Shadow DOM 요소 스타일 보기
이제 섀도우 루트의 하위 요소에서 스타일을 검사할 수 있습니다. [crbug.com/279390]
콘솔의 copy()가 객체에 대해 작동함
이제 Command Line API의 copy() 메서드가 객체에 대해 작동합니다. Console 패널로 copy({foo:'bar'})를 이동하여 이제 문자열화되고 형식이 지정된 버전의 객체가 클립보드에 어떻게 표시되는지 확인하세요. [crbug.com/289348]
콘솔용 정규식 필터
콘솔 패널에서 정규 표현식을 사용하여 콘솔 메시지를 필터링합니다. crbug.com/318308]
손쉬운 이벤트 리스너 제거
콘솔 패널에서 getEventListeners(document).mousewheel[0];를 사용하여 문서의 첫 번째 마우스휠 이벤트 리스너를 검색해 보세요. 계속해서 $_.remove()를 사용해 보세요. 해당 이벤트 리스너를 삭제합니다 ($_ = 가장 최근에 평가된 표현식의 값). crbug.com/309524]
CSS 경고 삭제
표시되었을 수 있는 '잘못된 CSS 속성 값' 스타일 경고가 이제 삭제되었습니다. 브라우저 해킹을 비롯한 실제 CSS를 대상으로 더욱 강력하게 구현하기 위해 지속적인 노력을 기울이고 있습니다. crbug.com/309982]
원형 차트로 요약된 타임라인 작업
이제 타임라인 패널에 렌더링 비용의 소스를 시각적으로 보여주는 원형 차트가 세부정보 창에 포함됩니다. 이를 통해 병목 현상을 한눈에 파악할 수 있습니다.
팝오버에 표시되던 많은 정보가 이제 자체 창으로 승격된 것을 확인할 수 있습니다. 타임라인 기록을 보고 프레임을 선택하려면 원형 차트가 포함된 새로운 세부정보 창을 참고하세요. 프레임 뷰에서는 선택한 프레임의 평균 FPS(1000ms/frame duration)와 같은 흥미로운 통계를 확인할 수 있습니다. [crbug.com/247786]
이미지 크기 조절 이벤트 세부정보
이제 타임라인 패널의 이미지 크기 조절 및 디코딩 이벤트에 Elements 패널의 DOM 노드 링크가 포함됩니다.
이미지 URL 링크를 클릭하면 리소스 패널의 해당 리소스로 이동합니다. crbug.com/244159]
GPU 프레임
이제 GPU에서 발생하는 프레임이 기본 스레드의 프레임 위에 상단에 표시됩니다. crbug.com/305863]
popstate 리스너 중단
이제 소스 패널 사이드바에서 'popstate'를 이벤트 리스너 중단점으로 사용할 수 있습니다. [crbug.com/88112]
창에서 렌더링 설정 사용 가능
이제 창을 열면 여러 창이 표시되며 그중 하나는 Rendering 패널입니다. 이 패널을 사용하여 페인트 직사각형, FPS 측정기 등을 표시합니다. 이 기능은 설정 > '콘솔 창에 '렌더링' 뷰 표시'에서 기본적으로 사용 설정됩니다.
이미지를 데이터 URL로 복사
이제 리소스 패널의 이미지 애셋에서 콘텐츠를 데이터 URI (data:image/png;base64,iVBO...)로 복사할 수 있습니다.
이 방법을 사용해 보려면 프레임 > [리소스] > 이미지에서 이미지 리소스를 찾고 이미지 미리보기를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴에 액세스한 다음 ‘이미지를 데이터 URL로 복사’를 선택하세요. crbug.com/321132]
데이터 URI 필터링
데이터 URI가 해당하는지 생각해본 적이 없다면 이제 네트워크 탭에서 데이터 URI를 필터링할 수 있습니다. 필터 아이콘을 선택합니다.
Network Timing 버그를 수정했습니다.
이미지를 다운로드하는 데 30만 년이 걸린 것으로 보셨다면 사과드립니다. ;) 네트워크 리소스의 잘못된 타이밍이 수정되었습니다. crbug.com/309570]
네트워크 기록 동작의 제어 기능 강화
네트워크 녹화 동작은 약간 다릅니다. 첫째, 기록 버튼은 타임라인이나 CPU 프로필에서 예상하는 것처럼 작동합니다. 예상하셨겠지만, DevTools가 열려 있는 동안 페이지를 새로고침하면 네트워크 기록이 자동으로 시작됩니다. 그런 다음 기능이 꺼집니다. 따라서 페이지 로드 후 네트워크 활동을 캡처하려면 이 기능을 사용합니다. 이렇게 하면 최신 네트워크 요청으로 인해 결과가 왜곡되지 않고 폭포식 구조를 더 쉽게 시각화할 수 있습니다. crbug.com/325878]
이제 확장 프로그램을 통해 DevTools 테마를 사용할 수 있습니다.
이제 DevTools 실험 (체크박스: '맞춤 UI 테마 허용')에서 사용자 스타일시트를 사용할 수 있으며, 이를 통해 Chrome 확장 프로그램이 DevTools에 맞춤 스타일을 적용할 수 있습니다. 샘플 DevTools 테마 확장 프로그램에서 예를 참고하세요. crbug.com/318566]
DevTools 다이제스트는 여기까지입니다. 11월 버전을 아직 확인하지 않으셨다면 확인해 보세요.