DevTools의 새로운 기능 (Chrome 119)

Sofia Emelianova
Sofia Emelianova
GitHub

요소 > 스타일의 @property 섹션 개선

수정 가능한 @property 규칙

이제 요소 > 스타일 창의 해당 섹션에서 @property CSS @규칙을 수정할 수 있습니다.

속성 규칙을 수정 가능하게 만들기 전후

Chromium 문제: 1471123

유효하지 않은 @property 규칙에 관한 문제가 보고됨

이제 문제 탭에 @property 규칙의 유효하지 않은 선언 관련 문제가 보고됩니다.

문제 탭에 보고된 속성 규칙의 문제입니다.

Chromium 문제: 1473283

에뮬레이션할 기기 목록 업데이트

설정을 탭합니다. 설정 > 기기의 사용자 에이전트 문자열이 브라우저 및 운영체제의 평균 사용량을 반영하도록 업데이트되었습니다. 이제 기기 모드에서 최신 기기를 더 많이 에뮬레이션할 수 있습니다.

기기 목록 업데이트 전후

Chromium 문제: 1479733

소스의 스크립트 태그에서 인라인 JSON에 대한 pretty print 적용

이제 소스 패널에서 더 쉽게 디버깅할 수 있도록 <script> HTML 태그의 인라인 JSON에 pretty print를 적용할 수 있습니다.

스크립트 태그에서 인라인 JSON에 pretty print를 적용하기 전과 후

Chromium 문제: 406900, 1473875

콘솔에서 비공개 입력란 자동 완성

이제 콘솔에서 클래스 범위 외부에서 비공개 클래스 필드를 평가할 때 이를 자동 완성할 수 있습니다.

클래스 범위 외부의 비공개 클래스 필드에 자동 완성을 지원하는 전후

Chromium 문제: 1483848, 1381806

Lighthouse 11.1.0

이제 Lighthouse 패널에서 Lighthouse 11.1.0이 실행됩니다. 전체 변경사항 목록을 참고하세요.

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

Chromium 문제: 772558

접근성 개선

이제 스크린 리더에서 다음을 읽어 줍니다.

  • 콘솔의 경고 및 오류
  • 코드를 콘솔 또는 소스에 붙여넣을 때 이 코드를 신뢰할 수 있나요? 대화상자에 표시되는 텍스트입니다.

또한 애플리케이션 패널에서 고대비 모드의 링크와 관련된 대비 문제가 수정되었습니다.

Chromium 문제: 1485257, 1486643, 1485263

Web SQL 지원 중단

Web SQL 데이터베이스 API가 더 이상 유지관리되지 않으므로 Chrome 123에서 애플리케이션 > Web SQL 섹션이 삭제됩니다. 이 버전에서는 예정된 삭제에 관한 섹션에 경고가 추가되었습니다.

Web SQL 지원 중단 경고입니다.

자세한 내용은 웹 SQL 지원 중단 및 삭제를 참고하세요.

Chromium 문제: 1485966

애플리케이션 > 매니페스트의 스크린샷 가로세로 비율 유효성 검사

이제 애플리케이션 > 매니페스트 섹션에서 폼 팩터 (wide 또는 narrow)가 동일한 웹 앱의 스크린샷의 가로세로 비율이 동일한지 확인합니다.

폼 팩터가 동일한 스크린샷의 가로세로 비율이 잘못되었음을 알리는 경고

자세한 내용은 프로그레시브 웹 앱 디버그 및 웹 앱 매니페스트 추가를 참고하세요.

DevTools팀은 이전 버전에서 이 변경사항과 기타 매니페스트 경고 개선사항을 적용한 Alexey Rodionov에게 감사를 표합니다.

Chromium 문제: 1476656

기타 주요 내용

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

  • 요소:
    • 확장 가능한 약식 CSS 속성 아래에 있는 긴 형식 CSS 속성의 애니메이션 타이밍 함수 견본이 표시되지 않습니다 (1149182).
    • 이제 contain-intrinsic-*의 자동 완성 기능에서 잘못된 단일 auto 값을 제공하지 않습니다. auto <length> (1480415)여야 하기 때문입니다.
    • 지원 중단되고 잘못된 -webkit-* 속성에 대한 지원이 삭제되었습니다 (1086089, 1030765).
  • 중단점: 중단점 유형이 변경될 때 중단점 수정 대화상자가 사라지는 버그가 수정되었습니다 (1485782).
  • 성능:
    • 성능 기록 중에 발생하는 색상 파싱 오류가 수정되었습니다 (1480205).
    • 타이밍 트랙에 LCP가 표시되지 않는 버그가 수정되었습니다 (1487136).
  • 네트워크: 이제 쿠키 설정 열에 설정된 쿠키의 올바른 수가 표시되며 차단된 쿠키 (1486903)는 제외됩니다.
  • 이제 차단되지 않은 호스트로 이동한 후 DevTools 확장 프로그램이 로드됩니다 (1476264).
  • 확장의 스크립트 실행 컨텍스트가 잘못된 버그를 수정했습니다 (1275331).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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