Chrome 134의 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

개인 정보 보호 및 보안 패널

기존 보안 패널이 개인 정보 보호 및 보안 패널로 발전하고 새로운 개인 정보 보호 전용 섹션이 추가됩니다. 이 섹션에서는 다음 작업을 할 수 있습니다.

  • DevTools가 열려 있는 동안 예외 유무에 따라 서드 파티 쿠키를 일시적으로 제한하고 웹사이트의 동작을 테스트합니다.
  • 임시 제한 모드에서 차단되었는지 또는 예외로 처리되었는지, 영향을 받을 수 있는 쿠키 유형 등 서드 파티 쿠키에 관한 정보가 포함된 표를 확인하세요.

보안 패널에 개인 정보 보호 섹션을 추가하기 전과 후

Chromium 문제: 352364594

성능 패널 개선사항

이 버전에서는 성능 패널이 여러 가지로 개선되었습니다.

보정된 CPU 제한 사전 설정

이제 자동으로 보정하고 저가형 및 중급 모바일 기기를 더 정확하게 근사하는 두 개의 추가 CPU 제한 사전 설정을 사용할 수 있습니다.

성능 > CPU 제한 드롭다운 메뉴에서 보정...을 선택한 다음 설정에서 보정, 계속을 클릭하고 DevTools에서 기기의 속도 저하 비율을 계산할 때까지 기다립니다. 교정된 스로틀링 옵션은 성능 > CPU 스로틀링 드롭다운 메뉴에서 다시 확인할 수 있습니다.

제한 설정 보정 추가 전후

동일한 AI 채팅에서 다른 실적 이벤트 선택

이제 AI 지원 패널을 사용하면 동일한 채팅에서 성능 트레이스의 선택된 이벤트를 변경할 수 있습니다. 즉, 다른 이벤트에 대해 이야기하기 위해 새 채팅을 시작할 필요가 없습니다.

성능의 퍼스트 파티 및 서드 파티 강조 표시

실적 패널의 요약 탭에 퍼스트 파티, 서드 파티, 확장 프로그램 데이터를 구분할 수 있는 새로운 표가 추가됩니다.

표의 항목 위로 마우스를 가져가면 관련 이벤트가 성능 추적에서 강조 표시됩니다. 서드 파티 흐리게 표시를 선택하여 퍼스트 파티 데이터에만 집중합니다.

또한 표에서 강조 표시된 항목 옆에 있는 아이콘을 클릭하여 서드 파티별로 그룹화된 하향식 탭으로 이동할 수 있습니다.

마커 도움말 및 통계의 필드 데이터

필드 데이터가 사용 설정되어 있으면 이제 측정항목 마커 도움말과 통계 탭에서 필드 데이터를 확인할 수 있습니다.

필드 데이터를 마커 도움말과 통계 탭에 추가하기 전후

Chromium 문제: 368135130

'강제 리플로우' 통계

성능 > 통계 탭에 강제 리플로우라는 새로운 통계가 추가됩니다. 강제 리플로우는 렌더링 엔진이 스타일과 레이아웃을 계산하기 위해 스크립트 실행을 일시중지할 때 발생합니다. 강제 리플로우는 피해야 할 병목 현상일 수 있습니다.

새 통계 위로 마우스를 가져가면 강제 리플로우가 있는 상위 함수 호출과 스택 트레이스가 강조 표시되고 총 리플로우 시간이 표시됩니다.

'강제 리플로우' 통계를 추가하기 전과 후

Chromium 문제: 369766156

'DOM 크기 최적화' 통계

또 다른 새로운 통계는 DOM 크기 최적화입니다. DOM 트리가 크면 페이지 성능이 저하될 수 있습니다.

이 통계에는 성능 추적에서 큰 DOM 크기의 영향을 받은 긴 레이아웃 리플로우와 스타일 재계산이 강조 표시되며 총 요소, 깊이, 가장 많은 하위 요소에 관한 통계가 제공됩니다.

'DOM 크기 최적화' 통계를 추가하기 전과 후

console.timeStamp로 성능 트레이스 확장

이제 확장성 API가 console.timeStamp를 지원합니다. 이제 performance.measure 및 performance.mark 외에도 성능 트레이스에서 맞춤 트랙을 만들고 console.timeStamp를 사용하여 맞춤 마크를 캡처할 수 있습니다. console.timeStamp는 브라우저의 내부 성능 타임라인에 항목을 추가하지 않고 성능 트레이스에만 표시하는 더 가벼운 대안입니다.

예를 들어 다음 구문을 사용할 수 있습니다.

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

캡처 설정 > 맞춤 트랙 표시를 사용하면 트레이스에 맞춤 트랙이 표시됩니다.

console.timeStamp 지원을 추가하기 전후

요소 패널 개선사항

이 버전에서는 요소 패널이 여러 가지로 개선되었습니다.

애니메이션 스타일의 실시간 값

이제 요소 > 스타일 탭에서 애니메이션 스타일의 값이 실시간으로 업데이트됩니다.

:open 가상 클래스 및 다양한 가상 요소 지원

이제 요소 패널에서 <details>, <select>, <dialog>, <input>과 같은 특정 HTML 요소의 경우 스타일 > :hov > 특정 요소 상태 강제 적용 섹션에서 :open 의사 클래스를 지원합니다.

&#39;:open&#39; 옵션을 추가하기 전과 후

또한 요소 패널에서 이제 ::checkmark, ::picker-icon, 캐러셀 관련 ::column, ::scroll-button, ::scroll-marker, ::scroll-marker-group과 같은 여러 새로운 의사 요소를 지원합니다.

Chromium 문제: 383157184, 379805728

모든 콘솔 메시지 복사

이제 콘솔 메시지를 한 번에 모두 마우스 오른쪽 버튼으로 클릭하여 복사할 수 있습니다.

&#39;콘솔 복사&#39; 옵션을 추가하기 전과 후

네트워크 > 요청 페이로드의 컨텍스트 메뉴에서도 유사한 복사 옵션을 확인할 수 있습니다.

Chromium 문제: 40206460, 384967020

메모리 패널의 바이트 단위

이제 메모리 패널에 큰 바이트 수 대신 적절한 바이트 단위로 크기가 표시됩니다.

바이트 단위를 표시하기 전과 후

Chromium 문제: 388589515

기타 하이라이트

이번 출시의 주목할 만한 수정사항과 개선사항은 다음과 같습니다.

  • 성능:
    • 주석: 이제 라벨을 클릭하여 해당 항목을 선택할 수 있습니다 (crbug.com/388224764).
    • 통계: 이제 통계 탭에서 CLS를 클릭하면 최악의 변경 대신 최악의 클러스터가 선택됩니다.
  • 무시 목록: 이제 node:로 시작하는 노드 내부가 기본적으로 무시됩니다 (crbug.com/382453615).
  • 실시간 표현식: 실시간 표현식이 $_ 명령어에 영향을 미치는 버그를 수정했습니다 (crbug.com/388437265).
  • 요소 > 스타일: 이제 상대 길이에 절대값을 표시하는 팝오버가 있습니다 (crbug.com/40778486).
  • 접근성: 이제 열 헤더가 정렬 가능한지 알려줍니다.
  • 이제 탭 아이콘이 왼쪽에 아닌 탭 이름 옆의 오른쪽에 표시됩니다.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 새로운 기능, 업데이트 또는 DevTools와 관련된 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.