Chrome 138의 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선사항

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

'네트워크 종속 항목 트리' 통계의 사전 연결된 출처

이제 실적 > 통계 > 네트워크 종속성 트리 통계에 사용되거나 사용되지 않은 사전 연결된 출처와 사전 연결 후보 목록이 표시됩니다(있는 경우).

사전 연결 힌트를 사용하면 사이트에서 중요한 서드 파티 원본에 대한 조기 연결을 설정하고 페이지 로드 속도를 개선할 수 있습니다.

'네트워크 종속 항목 트리' 통계에 사전 연결된 출처와 후보를 추가하기 전후

자세한 내용은 필수 원본에 사전 연결을 참고하세요.

'문서 요청 지연 시간' 통계의 서버 응답 및 리디렉션 시간

성능 > 통계 > 문서 요청 지연 시간 통계에 서버 응답 시간과 리디렉션 수 및 리디렉션 시간이 표시됩니다(있는 경우).

리디렉션 및 서버 응답 시간을 '문서 요청 지연 시간' 통계에 추가하기 전후

네트워크 요청 요약의 리디렉션

이제 성능 패널의 네트워크 요청 요약과 도움말에 리디렉션 URL이 표시됩니다.

네트워크 요청의 요약 및 도움말에 리디렉션 URL을 추가하기 전과 후

Chromium 문제: 402353313

성능 트레이스의 노이즈 감소

이제 성능 패널에 v8 JavaScript 엔진의 compile 카테고리 이벤트가 표시되지 않습니다. 이전에는 이러한 이벤트로 인해 불필요한 오버헤드와 노이즈가 많이 발생했습니다. 특히 compile code 이벤트가 그랬습니다.

성능 트레이스에서 '컴파일 코드' 이벤트를 삭제하기 전과 후

중요한 일부 이벤트가 누락된 경우 crbug.com/414330508에 의견을 남겨 주세요.

'자바스크립트 샘플 사용 중지' 지원 중단

성능 > 캡처 설정의 JavaScript 샘플 사용 중지 옵션은 유용성이 드물고 사용량이 적어 지원 중단되고 삭제되었습니다.

'캡처 설정'에서 'JavaScript 샘플 사용 중지' 옵션을 삭제하기 전과 후

Chromium 문제: 414734883

센서의 위치정보 정확도 매개변수

이제 센서 패널에서 위치정보 에뮬레이션의 정확도를 설정할 수 있습니다. 이렇게 하면 다양한 수준의 GPS 정확도 처리를 테스트할 수 있습니다.

센서 패널의 위치정보 에뮬레이션에 '정확도' 매개변수를 추가하기 전과 후

Chromium 문제: 40074843

요소 패널 개선사항

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

복잡한 CSS 값을 더 쉽게 디버그

복잡한 CSS 값을 디버깅할 수 있도록 이제 요소 > 스타일 탭에 마우스를 가져가면 툴팁에 다음이 표시됩니다.

  • 여러 링크를 클릭하지 않아도 되도록 CSS 변수의 전체 정의 체인
  • 복잡한 CSS 계산을 단계별로 평가하여 버그를 더 효율적으로 식별하고 값이 계산되는 방식을 더 깊이 이해할 수 있습니다.

툴팁에는 각 정의에 대해 하나씩 여러 줄로 정의 체인이 표시되며, 복잡한 계산을 펼치고 값 위로 마우스를 가져가 계산된 값을 강조 표시하고 초기 표현식으로 다시 추적할 수 있습니다.

정의 체인과 확장 가능한 복잡한 계산이 포함된 도움말을 추가하기 전과 후

Chromium 문제: 396080529

요소 > 스타일의 @function 지원

Chrome의 @function 지원을 준비하기 위해 이제 요소 > 스타일 탭에서 전용 섹션의 정의에 맞춤 함수 이름을 연결합니다.

맞춤 함수 이름을 해당 섹션에 연결하기 전후

네트워크 패널 개선사항

이 버전에서는 네트워크 패널이 여러 가지로 개선되었습니다.

필터 has-request-header개

이제 네트워크 패널에서 특정 요청 헤더 이름으로 필터링할 수 있는 has-request-header 필터를 지원합니다.

'has-request-header' 필터를 네트워크 패널에 추가하기 전과 후

Chromium 문제: 397481040

분리형 웹 앱의 Direct Sockets

이제 네트워크 패널에서 TCPSocket, UDPSocket (바운드 모드), UDPSocket (연결 모드)을 통해 격리된 웹 앱 (IWA)의 트래픽을 모니터링할 수 있습니다.

이렇게 하려면 표에서 일반 요청 옆에 있는 directscoket 연결을 선택하고 메시지 탭에서 메시지를 선택합니다.

IWAs의 Direct Sockets 지원을 네트워크 패널에 추가하기 전과 후

분리형 웹 앱 (IWA)은 웹 애플리케이션을 위한 신뢰도가 높은 보안 모델을 제공합니다. 자세한 내용은 분리형 웹 앱 시작하기를 참고하고 Direct Sockets API를 구현하는 데모 앱을 확인하세요.

기타 하이라이트

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

  • 애플리케이션 > 스토리지: 지원 중단된 Web SQL 옵션이 삭제되었습니다 (crbug.com/412707590).
  • 요소:
  • 네트워크: 브라우저 동작을 제어하는 응답 헤더이며 클라이언트 측 명령어가 아니므로 가져오기로 복사 옵션에서 Referrer-Policy HTTP 헤더를 삭제했습니다 (crbug.com/413904896).
  • 성능: 작업자 스레드가 기본 스레드를 차단하지 않으므로 작업자 스레드에서 '긴 작업' 경고가 삭제되었습니다 (crbug.com/40248589).
  • 문제. 이제 다음과 같이 보고됩니다.
    • 사용자를 추적하는 것으로 의심되는 리소스가 차단된 경우
    • 리디렉션 중에 스토리지에 액세스하는지 여부와 관계없이 이탈 추적 감소
  • 접근성 이제 요소 > 스타일의 다음 요소에 키보드 포커스를 지정할 수 있습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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