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("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 가상 클래스 및 다양한 가상 요소 지원

이제 요소 패널의 스타일 > :hov > 특정 요소 상태 강제 적용 섹션에서 <details>, <select>, <dialog>, <input>과 같은 특정 HTML 요소에 :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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.