Chrome 135의 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선사항

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

성능에서 프로필 및 함수 호출의 출처 및 스크립트 링크

이제 성능 > 요약 탭에 프로필 및 함수 호출과 관련된 스크립트 및 출처 링크가 표시되므로 기본 트랙에서 이러한 이벤트 위로 마우스를 가져가지 않아도 됩니다.

'요약' 탭에 소스와 출처를 추가하기 전후

또한 이제 네트워크 및 기본 트랙에서 이벤트 위로 마우스를 가져가면 툴팁에 서드 파티 이름이 표시됩니다(있는 경우).

Chromium 문제: 368541957

'단계별 LCP' 필드 데이터 지원

필드 데이터가 사용 설정된 경우 성능 > 통계 > 단계별 LCP 통계에 Chrome UX 보고서의 75번째 백분위수 이미지 타이밍이 추가 표에 표시되므로 통계에서 바로 타이밍을 비교할 수 있습니다.

'단계별 LCP' 통계에 필드 데이터 지원을 추가하기 전후

'네트워크 종속 항목 트리' 통계

성능 > 통계 탭의 컬렉션에 새로운 네트워크 종속성 트리 통계가 추가됩니다. 이 통계는 크리티컬 요청을 연결했는지 여부를 알려주며, 이는 권장되지 않습니다. 통계에 나열된 요청 위로 마우스를 가져가면 네트워크 트랙에서 강조 표시됩니다.

자세한 내용은 크리티컬 요청 체이닝 방지를 참고하세요.

가장 무거운 스택 강조 표시

이제 성능 패널에서 호출 트리 또는 하향식 > 가장 무거운 스택 사이드바에서 항목 위로 마우스를 가져가면 기본 트랙의 항목이 강조 표시되고 나머지는 어둡게 표시됩니다. 이를 통해 호출 스택에서 가장 많은 시간을 차지하는 중첩된 항목을 시각적으로 찾을 수 있습니다.

요소의 접근성 트리 보기

이제 요소 패널에서 전체 페이지 접근성 트리 보기가 기본적으로 사용 설정됩니다.

이전에는 요소 > 접근성 탭에서 별도의 접근성 트리를 탐색할 수 있었습니다. 이제 요소 패널의 DOM 트리 오른쪽 상단에 있는 접근성 트리 보기로 전환 버튼을 클릭하여 DOM과 전체 페이지 접근성 트리 간에 전환할 수 있으므로 트리와 트리 간의 관계를 더 쉽게 탐색할 수 있습니다.

전체 페이지 접근성 트리 보기를 기본적으로 사용 설정하기 전과 후

접근성 트리를 사용하면 지원 기술이 콘텐츠를 어떻게 인식하는지 검사하고 DOM 노드의 ARIA 속성과 계산된 접근성 속성을 확인할 수 있습니다. 자세한 내용은 Chrome DevTools의 전체 접근성 트리를 참고하세요.

Chromium 문제: 40808541

다양한 패널의 빈 상태 개선

다양한 패널, 섹션, 탭의 빈 상태 (열린 항목이 없는 경우)가 간소화되어 이러한 항목을 사용하려면 어떻게 해야 하는지 정확히 알 수 있습니다. 이제 네트워크 패널과 같은 일부 빈 상태에 페이지 새로고침과 같은 관련 유용한 버튼이 표시됩니다.

네트워크 및 검색 패널에서 빈 상태를 개선하기 전후

'AI에게 질문하기' 옵션이 메뉴 하단으로 이동

AI에게 질문하기 옵션이 이제 드롭다운 메뉴 상단이 아닌 하단에 표시됩니다.

'AI에게 질문하기' 옵션을 드롭다운 메뉴 하단으로 이동하기 전과 후

crbug.com/364805393의 AI 지원 패널에 의견을 남겨 주세요.

Lighthouse 12.4.0

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

이 버전에서는 일부 성능 감사를 통과한 감사 섹션에 숨기는 대신 통과 조건에서 정보 제공으로 표시합니다. 전체 변경사항 목록을 참고하세요.

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

Chromium 문제: 40543651

기타 주요 내용

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

  • 성능 > 요약: 총 시간 및 자체 시간 두 줄을 괄호 안에 (self time)도 표시하는 한 줄의 기간으로 대체했습니다(있는 경우)(crbug.com/395572753).
  • 문제: 접근성 트리의 <select> 문제와 네트워크 서비스에서 파싱 또는 유효성 검사 중에 발생하는 SRI 메시지 서명 오류라는 새로운 문제 유형이 추가되었습니다 (crbug.com/381044049, crbug.com/347890366).
  • 접근성: 이제 요소 > 스타일 탭에 키보드 탐색을 사용하여 단계별로 이동하는 요소가 표시됩니다 (crbug.com/396311936).
  • 요소: 이제 <select> 관련 문제가 지원되며 물결선으로 강조 표시됩니다 (crbug.com/378738916).
  • 네트워크: 이제 '재정의 점' 및 쿠키 경고 아이콘이 탭 이름의 왼쪽이 아닌 오른쪽에 표시됩니다 (crbug.com/390556283).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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