DevTools의 새로운 기능, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Recorder에서 Firefox용 Puppeteer로 내보내기 지원

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

레코더의 내보내기 메뉴에 'Firefox용 Puppeteer' 옵션을 추가하기 전과 후

자세한 내용은 WebDriver BiDi - 크로스 브라우저 자동화의 미래를 참고하세요.

성능 패널 개선사항

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

실시간 측정항목 관찰

이제 성능 패널에 로컬 머신과 Chrome UX 보고서의 필드 데이터를 기반으로 한 핵심 웹 바이탈에 관한 실시간 관찰이 표시됩니다. 이렇게 하면 성능 트레이스를 캡처하지 않고도 성능 문제를 파악하고 내 환경이 사용자 환경과 얼마나 유사한지 이해할 수 있습니다.

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

성능 패널의 측정항목에 관한 실시간 관찰입니다.

성능 패널은 개선할 수 있는 측정항목을 강조 표시하고, 로컬 환경을 사용자 환경과 일치시키는 방법에 관한 유용한 정보와 제안을 제공합니다. 예를 들어 CPU 또는 네트워크를 제한할 수 있으며, 이는 오른쪽의 녹화 설정 섹션에서 같은 화면에서 할 수 있습니다.

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

검색으로 찾은 네트워크 요청입니다.

performance.mark 및 performance.measure 호출의 스택 트레이시 확인

요약 탭의 성능 패널에 이제 performance.mark 및 performance.measure 호출의 스택 트레이스가 표시됩니다. 이러한 호출을 사용하여 맞춤 데이터로 성능 추적을 확장할 수 있습니다.

성능.mark 및 성능.measure 호출의 스택 트레이스를 보여주는 전후

자세한 내용은 확장성 API로 실적 데이터 맞춤설정하기를 참고하세요.

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

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

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

주소 양식 필드 드롭다운 메뉴에 자동 완성 테스트 데이터 옵션을 추가하기 전과 후

요소 패널 개선사항

이 버전에서는 요소 패널에 몇 가지 개선사항이 적용되었습니다.

특정 요소의 상태를 더 많이 강제 적용

이제 요소 > 스타일의 :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++ 확장 프로그램의 오류로 인해 콘솔이 강제로 열리지 않습니다(356320158).
    • 일시중지 시 평가되지 않는 JS 모듈의 import.meta 관련 버그를 수정했습니다(40743793).
  • 메모리: 리테이너를 무시한 후 무시된 리테이너 복원이 표시되지 않는 버그를 수정했습니다(327337527).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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