DevTools의 새로운 기능, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

성능 패널 개선사항

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

실시간 측정항목 관찰

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

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

실적 패널의 측정항목에 관한 실시간 관찰

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

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

검색으로 찾은 네트워크 요청

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

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

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

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

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

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

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

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

요소 패널 개선사항

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

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

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

특정 요소 상태를 강제 적용하는 기능을 추가하기 전과 후

Chromium 문제: 40280012

이제 Elements(요소) > Styles(스타일)에서 더 많은 그리드 속성이 자동 완성됩니다.

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

그리드 선 이름을 수정할 때 자동 완성 옵션을 추가하기 전과 후

자세한 내용은 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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.