최근 Chrome DevTools에 여러 업데이트된 기능이 추가되었습니다. 일부는 작고 일부는 큽니다. 먼저 요소 패널의 업데이트 사항을 살펴본 후 Console, 타임라인 등에 대해 알아보겠습니다.
사용 중지된 스타일 규칙이 주석 처리된 상태로 복사됨
이제 스타일 창에서 전체 CSS 규칙을 복사하면 사용 중지한 스타일이 포함되며, 클립보드에 주석 처리된 상태로 존재합니다. [crbug.com/316532]
CSS 경로로 복사
이제 'CSS 경로로 복사'를 요소 패널의 DOM 노드에 대한 메뉴 항목으로 사용할 수 있습니다 (XPath 복사 메뉴 항목과 유사).
CSS 선택자 생성은 스타일시트/JavaScript로 제한되지 않으며 WebDriver 테스트에서 로케이터 전략의 대안이 될 수도 있습니다. [crbug.com/277286]
Shadow DOM 요소 스타일 보기
이제 섀도우 루트의 하위 요소의 스타일을 검사할 수 있습니다. [crbug.com/279390]
콘솔의 copy()가 객체에 작동함
이제 명령줄 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]
이미지 크기 조절 이벤트 세부정보
이제 타임라인 패널의 이미지 크기 조절 및 디코딩 이벤트에 요소 패널의 DOM 노드 링크가 포함됩니다.
이미지 URL 링크를 클릭하면 리소스 패널에서 해당 리소스로 이동합니다. crbug.com/244159]
GPU 프레임
이제 GPU에서 발생하는 프레임이 기본 스레드의 프레임 위에 상단에 표시됩니다. crbug.com/305863]
popstate 리스너에서 중단
이제 'popstate'를 소스 패널 사이드바에서 이벤트 리스너 중단점으로 사용할 수 있습니다. [crbug.com/88112]
드로어에서 사용할 수 있는 렌더링 설정
이제 창을 열면 여러 창이 표시되며 그중 하나가 렌더링 창입니다. 이 창을 사용하여 페인트 직사각형, FPS 미터 등을 표시합니다. 이 창은 기본적으로 설정 > '콘솔 창에 '렌더링' 뷰 표시'에서 사용 설정됩니다.
데이터 URL로 이미지 복사
이제 리소스 패널의 이미지 애셋 콘텐츠를 데이터 URI (data:image/png;base64,iVBO...)로 복사할 수 있습니다.
이 기능을 사용해 보려면 프레임 > [리소스] > 이미지에서 이미지 리소스를 찾아 이미지 미리보기를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴에 액세스한 다음 '이미지를 데이터 URL로 복사'를 선택합니다. crbug.com/321132]
데이터 URI 필터링
데이터 URI가 여기에 속한다고 생각한 적이 없다면 이제 네트워크 탭에서 데이터 URI를 필터링할 수 있습니다. 필터 아이콘을 선택합니다.
네트워크 타이밍 버그가 수정되었습니다.
이미지를 다운로드하는 데 30만 년이 걸리는 것처럼 보였다면 죄송합니다. ;) 네트워크 리소스의 잘못된 타이밍이 이제 수정되었습니다. crbug.com/309570]
네트워크 녹화 동작을 더 세부적으로 제어할 수 있습니다.
녹화 네트워크의 동작은 약간 다릅니다. 먼저 녹화 버튼은 타임라인이나 CPU 프로필에서 예상하는 것처럼 작동합니다. 당연히 DevTools가 열려 있는 동안 페이지를 새로고침하면 네트워크 녹화가 자동으로 시작됩니다. 그러면 사용 중지되므로 페이지 로드 후 네트워크 활동을 캡처하려면 사용 설정하세요. 이렇게 하면 최신 네트워크 요청으로 결과가 왜곡되지 않고 폭포식 차트를 더 쉽게 시각화할 수 있습니다. crbug.com/325878]
이제 확장 프로그램을 통해 DevTools 테마를 사용할 수 있습니다.
이제 Chrome 확장 프로그램이 DevTools에 맞춤 스타일을 적용할 수 있는 DevTools 실험 (체크박스: '맞춤 UI 테마 허용')을 통해 사용자 스타일 시트를 사용할 수 있습니다. 예시는 샘플 DevTools 테마 확장 프로그램을 참고하세요. crbug.com/318566]
DevTools 다이제스트의 이번 버전은 여기까지입니다. 아직 확인하지 못하신 경우 11월 버전을 확인하세요.