Chrome 136 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선사항

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

새로운 실적 통계

실적 > 통계 탭에 새로운 통계가 표시됩니다.

  • 이전 HTTP/1.1 프로토콜을 사용하는 요청을 강조 표시하는 최신 HTTP
  • 효율적인 캐시 수명을 사용하여 캐시 수명을 늘리는 데 도움이 되는 요청을 강조 표시하고 웹사이트의 로드 시간을 단축합니다.
  • font-display를 최적화할 경우 예상 절감 시간을 보여주는 글꼴 표시

통계 탭에 새로운 통계 3가지가 추가되었습니다.

클릭하여 강조 표시

이제 요약, 하향식, 호출 트리, 이벤트 로그 표에서 항목을 클릭하여 성능 트레이스를 탐색할 때 트레이스에서 해당 이벤트를 강조 표시하고 나머지는 어둡게 표시할 수 있습니다.

네트워크 요청 요약의 서버 시간

이제 성능 패널의 요약 탭에 서버 측 렌더링 기술을 구현하는 네트워크 요청의 서버 타이밍이 표시됩니다.

네트워크 요청 요약의 '서버 시간' 표

성능 패널은 Server-Timing 응답 헤더 헤더의 데이터를 가져옵니다.

'개인 정보 보호 및 보안'에서 쿠키 필터링

개인 정보 보호 및 보안 > 개인 정보 보호 > 서드 파티 쿠키 섹션의 표에 필터가 적용되므로 관심 있는 쿠키를 더 빠르게 찾을 수 있습니다.

'서드 파티 쿠키' 표의 필터

패널의 테이블에 표시되는 크기(KB 단위)

동일한 컨텍스트 내에서 단위를 동일하게 유지하기 위해 이제 네트워크 및 메모리 패널의 표와 성능 > 요약의 퍼스트 파티 / 서드 파티 표에 모든 크기가 KB로 표시됩니다. 이렇게 하면 MB, kB, B 단위를 주시하는 대신 동일한 열과 패널 간의 숫자를 직접 비교할 수 있습니다.

크기 단위 통합 전과 후

자동 완성에서 요소 > 스타일에서 corner-shape 및 corner-*-shape를 지원합니다.

이제 요소 > 스타일의 자동 완성 기능에서 corner-shape 및 corner-*-shape 속성에 해당하는 값을 제안할 수 있습니다.

'corner-shape' 속성의 자동 완성 옵션입니다.

Chromium 문제: 402346406

실험용: DOM의 요소 및 속성 문제 강조 표시

이 새로운 실험적 기능을 사용하면 요소 패널에서 DOM 요소 또는 속성의 문제를 빨간색 물결선 아래선으로 강조 표시할 수 있습니다. 이러한 요소 또는 속성 위로 마우스를 가져가면 문제 패널에 해당 오류로 연결되는 링크가 포함된 도움말이 표시됩니다.

도움말과 문제 패널 링크가 있는 DOM 트리에서 DOM 문제를 강조 표시한 전후 모습

현재 요소 패널은 잘못된 <select>의 하위 요소, 일치하지 않는 ARIA 정의, 잘못된 ARIA 속성을 강조 표시합니다.

Chromium 문제: 378738916

Lighthouse 12.5.0

이제 Lighthouse 패널에서 Lighthouse 12.5.0이 실행됩니다.

특히 이 버전에서는 legacy-javascript가 esmodules 대신 기준선을 사용합니다. 변경사항 전체 목록을 참고하세요.

DevTools에서 Lighthouse 패널을 사용하는 기본사항을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.

Chromium 문제: 40543651

기타 하이라이트

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

  • 성능 > 유용한 정보 > 네트워크 종속 항목 트리: 이제 네트워크 트리의 모든 네트워크 요청에 대한 시간이 표시됩니다 (400708304).
    • 네트워크 종속 항목 트리: 이제 네트워크 트리의 모든 네트워크 요청에 대한 시간이 표시됩니다 (400708304).
  • 애니메이션: 캡처된 애니메이션 400635410으로 인해 분리된 요소가 메모리 패널에 표시되는 버그가 수정되었습니다.
  • Recorder: 이제 녹화를 처음 실행할 때 코드 붙여넣기와 동일한 확인 대화상자를 사용합니다.
  • 레이어: 이제 하단의 상태 표시줄에 총 레이어 수와 표시된 모든 레이어의 총 메모리가 표시됩니다.
  • 메모리: 하나의 작업자를 사용하는 대신 두 개의 작업자 간에 태스크를 병렬화하여 힙 스냅샷 초기화가 향상되었습니다 (42203857).
  • 문제: 이제 로컬 네트워크 액세스 (LNA) CORS 오류 (395895368)를 보고합니다.
  • 접근성:
    • 도움말: 이제 포커스가 아닌 핫키 누르기에 표시됩니다 (396311936).
    • 요소 > 스타일: 이제 var() 함수를 키보드로 상호작용할 수 있습니다. 즉, --custom-property를 선택하고 Enter 키를 눌러 링크 타겟 (401212692)으로 이동할 수 있습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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