DevTools, Chrome 140의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini로 더 많은 통계 디버그

이제 성능 > 통계에서 AI로 디버그 (이전 명칭: AI에 질문하기)를 클릭하여 AI 지원 패널에서 Gemini와 채팅하고 디버그하여 성능 통계를 확인할 수 있습니다.

  • 이미지 전송 개선
  • 기존 JavaScript
  • 중복된 JavaScript
  • 최신 HTTP

'AI로 디버그' 버튼을 더 많은 실적 통계에 추가하기 전후

'네트워크 조건'에서 'Save-Data' 헤더 에뮬레이션

이제 네트워크 조건 패널에서 Save-Data 요청 헤더의 동작을 에뮬레이션할 수 있습니다. 이 헤더는 데이터 사용량 감소에 대한 클라이언트의 선호도를 나타내는 네트워크 클라이언트 힌트입니다. navigator.connection.saveData API를 통해서도 사용할 수 있습니다.

'네트워크 조건'에 'Save-Data' 요청 헤더 에뮬레이션을 추가하기 전과 후

Chromium 문제: 40668980

CSS 속성 도움말에서 기준선 상태 확인

이제 요소 > 스타일에서 CSS 속성 위로 마우스를 가져가면 속성 정의 아래에 Baseline 상태에 따라 주요 브라우저에서 속성의 사용 가능 여부가 표시됩니다.

CSS 속성 도움말에 기준선 상태를 추가하기 전과 후

Chromium 문제: 417749762

사용자 에이전트 클라이언트 힌트에서 폼 팩터 재정의

이제 네트워크 상태 > 사용자 에이전트 클라이언트 힌트 드롭다운에서 폼 팩터, 특히 Sec-CH-UA-Form-Factors 요청 헤더 값을 재정의할 수 있습니다.

사용자 에이전트 클라이언트 힌트에 폼 팩터 재정의 옵션을 추가하기 전후

Chromium 문제: 422218341

Lighthouse 12.8.0

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

이 버전에서 가장 주목할 만한 점은 Lighthouse에 신뢰할 수 있는 유형으로 DOM 기반 XSS 완화라는 새로운 보고서가 추가되었다는 것입니다.

전체 변경사항 목록도 참고하세요.

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

Chromium 문제: 40543651

기타 주요 내용

이번 출시의 중요한 수정사항과 개선사항은 다음과 같습니다.

  • AI 지원:
    • 이제 설정에서 해당 AI 기능을 사용 중지하면 채팅 기록이 삭제됩니다.
    • 접근성: 이제 화면 리더가 컨텍스트 제목을 일찍, 답변 스트리밍이 시작되면 '답변 로드 중', 답변이 완료되면 '답변 준비 완료'라고 알립니다.
  • 요소:
    • 이제 스타일 탭에서 sibling-index(), sibling-count(), env() CSS 함수를 평가할 수 있습니다 (crbug.com/417128001, crbug.com/40196710).
    • ::view-transition-group-children 가상 요소 지원이 추가되었습니다 (crbug.com/425901164).
    • <summary> 요소의 대화형 콘텐츠에 관한 접근성 문제 지원을 추가했습니다 (crbug.com/427172874).
    • 이제 계산됨 탭에서 스타일의 긴 형식 속성으로 이동할 수 있습니다 (crbug.com/41486012).
    • 이징, 색상 편집기: 이제 키보드를 사용하여 애니메이션 전환을 위한 베지어 견본과 색상 견본과 상호작용할 수 있습니다 (crbug.com/401213421).
  • 네트워크: 이제 HAR 파일 가져오기에 요청 및 응답 쿠키도 포함됩니다 (crbug.com/432995868).
  • 기기 모드: Apple 기기의 사용자 에이전트가 최신 Safari 18.5로 업데이트되었습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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