DevTools의 새로운 기능, Chrome 129

녹음기에서 Firefox용 Puppeteer로 내보내기 지원

WebDriver BiDi 지원의 일환으로 이제 Recorder 패널에서 녹화 파일을 Firefox용 Puppeteer로 내보낼 수 있습니다. Puppeteer의 Firefox 지원 덕분에 이제 Chrome DevTools Recorder 패널을 사용하여 사용자 플로우를 기록하고 내보내어 Firefox와 Chrome 모두에서 실행할 수 있습니다.

자세한 내용은 WebDriver BiDi - 교차 브라우저 자동화의 미래를 참조하세요.

성능 패널 개선사항

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

실시간 측정항목 관찰

이제 성능 패널에 로컬 머신과 Chrome UX 보고서의 필드 데이터를 기반으로 Core Web Vitals에 관한 실시간 관찰 결과가 표시됩니다. 이를 통해 성능 트레이스를 캡처하지 않고도 성능 문제를 발견하고 사용자 환경과 비교했을 때 내 환경이 얼마나 대표성이 있는지 파악할 수 있습니다.

LCP 및 CLS의 실시간 관찰 결과를 보려면 실적 패널을 엽니다. INP를 보려면 페이지에서 상호작용을 실행합니다. 로컬 측정항목을 Chrome UX 보고서의 집계된 사용자 환경과 비교하려면 필드 데이터를 추가합니다. 오른쪽의 필드 데이터 섹션에서 설정을 클릭하고 대화상자에서 확인을 클릭합니다. 측정항목 값 위로 마우스를 가져가면 자세한 정보가 포함된 도움말이 표시됩니다.

실적 패널에는 개선이 필요한 측정항목이 강조표시되며 현지 환경과 사용자의 환경을 일치시키는 방법에 대한 통계와 제안이 제공됩니다. 예를 들어 CPU 또는 네트워크를 제한하려면 오른쪽의 녹화 설정 섹션에서 동일한 화면을 사용하면 됩니다.

네트워크 트랙의 검색 요청

이제 성능 패널의 검색 상자가 네트워크 트랙에서도 작동하므로 Ctrl / Cmd + F 단축키를 사용하여 요청을 찾을 수 있습니다.

performance.mark 및 performance.measure 호출의 스택 트레이스 보기

이제 Summary 탭의 Performance 패널에 performance.mark 및 performance.measure 호출의 스택 트레이스가 표시됩니다. 이러한 호출을 사용하여 커스텀 데이터로 성능 트레이스를 확장할 수 있습니다.

자세한 내용은 확장성 API로 성능 데이터 맞춤설정을 참고하세요.

자동 완성 패널에서 테스트 주소 데이터 사용

이제 자동 완성 패널에서 주소 양식의 테스트 데이터를 제공합니다. 이렇게 하면 Chrome에 저장된 주소가 없거나 게스트 프로필을 사용하는 경우 웹사이트에서 주소 양식을 더 쉽게 테스트할 수 있습니다.

테스트 데이터로 주소 양식을 자동 완성하려면 자동 완성 패널을 열고 check_box 자동 완성 메뉴에 테스트 주소 표시를 사용 설정합니다. 그런 다음 페이지에 등록된 주소 양식을 마우스 오른쪽 버튼으로 클릭하고 개발자 도구 메뉴에서 옵션 중 하나를 선택합니다.

요소 패널 개선사항

이 버전에서는 요소 패널에 몇 가지 개선사항이 포함되어 있습니다.

특정 요소에 더 많은 상태 강제 적용

이제 요소 > 스타일의 :hov 섹션에서 강제로 사용 설정할 수 있는 의사 클래스를 더 많이 제공합니다. 새로운 옵션 세트는 특정 요소 강제 적용 상태 드롭다운 아래에 있으며 선택한 특정 요소에만 적용됩니다. 예를 들어 <label>과 <input>에는 서로 다른 옵션 세트가 있습니다.

Chromium 문제: 40280012

요소 > 스타일이 이제 더 많은 그리드 속성을 자동 완성합니다.

이제 그리드 영역 및 선 이름을 수정할 때 요소 > 스타일 탭에서 자동 완성 옵션이 제공됩니다.

자세한 내용은 CSS 그리드 레이아웃 검사 및 특히 선 이름 표시 섹션을 참고하세요.

Lighthouse 12.2.0

이제 Lighthouse 패널에서 Lighthouse 12.2.0을 실행합니다.

이 업데이트에서는 여러 가지 버그 수정이 적용되었습니다. 변경사항 전체 목록을 참고하세요.

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

Chromium 문제: 772558

기타 하이라이트

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

• 요소:
  • 오버로드된 길이 속성 357020613의 잘못된 렌더링과 관련된 버그가 수정되었습니다.
  • position-try-options는 사양에 따라 position-try-fallbacks로 이름이 변경되었습니다.
  • 이제 페이지를 새로고침하면 iframe 40719145 내에서도 선택한 노드가 복원됩니다.
  • 접근성: 이제 스크린 리더가 요소 표시 버튼 357382536을 읽어줍니다.
• 성능 > 네트워크: 이제 네트워크에서 표시 메뉴 옵션을 사용하면 관련 네트워크 요청의 헤더 탭이 열립니다.
• 콘솔:
  • 이제 C/C++ 확장 프로그램에서 발생하는 오류로 인해 Console 356320158이 강제로 열리지 않습니다.
  • 일시중지 시 평가되지 않는 JS 모듈의 import.meta 관련 버그를 수정했습니다. 40743793
• 메모리: 보관자 327337527을 무시한 후 무시된 보관자 복원이 표시되지 않는 버그를 수정했습니다.

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

• crbug.com에서 의견 및 기능 요청을 제출하세요.
• DevTools에서 more_vert 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고하세요.
• @ChromeDevTools에서 트윗하세요.
• DevTools의 새로운 기능 관련 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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