Chrome 135의 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선사항

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

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

이제 실적 > 요약 탭에 프로필 및 함수 호출과 관련된 스크립트 및 출처 링크가 표시되므로 기본 트랙에서 이러한 이벤트 위로 마우스를 가져갈 필요가 없습니다.

요약 탭에 소스 및 출처를 추가하기 전과 후

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

Chromium 문제: 368541957

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

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

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

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

성능 > 통계 탭에 새로운 네트워크 종속 항목 트리 통계가 컬렉션에 추가됩니다. 이 통계는 중요한 요청을 체이닝했는지 알려줍니다. 이는 권장되지 않습니다. 통계에 나열된 요청 위로 마우스를 가져가면 네트워크 트랙에서 요청이 강조 표시됩니다.

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

가장 무거운 스택 강조 표시

이제 호출 트리 또는 하향식 > 가장 큰 스택 사이드바에서 기본 트랙의 항목 위로 마우스를 가져가면 해당 항목이 강조 표시되고 나머지는 어두워집니다. 이렇게 하면 호출 스택에서 가장 시간이 많이 걸리는 중첩된 항목을 시각적으로 찾을 수 있습니다.

Elements의 접근성 트리 보기

이제 요소 패널에서 전체 페이지 접근성 트리 뷰가 기본적으로 사용 설정됩니다. 이를 통해 보조 기술이 콘텐츠를 보는 방식을 검사하고 DOM 노드의 ARIA 속성과 계산된 접근성 속성을 확인할 수 있습니다.

접근성 트리 보기를 열려면 요소 패널의 DOM 트리 오른쪽 상단에 있는 접근성 트리 보기로 전환 버튼을 클릭합니다.

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

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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