DevTools의 새로운 기능 (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

누락된 스타일시트 디버깅 개선

DevTools에서 누락된 스타일시트 문제를 더 빠르게 식별하고 디버그할 수 있도록 여러 가지 개선사항이 적용되었습니다.

  • 이제 소스 > 페이지 트리에는 혼란을 최소화하기 위해 배포 및 로드가 완료된 스타일시트만 표시됩니다.
  • 이제 Sources > Editor에서 실패한 @import, url(), href 문이 강조 표시되고 그 옆에 인라인 오류 도움말이 표시됩니다.

소스 패널에 도움말이 있는 밑줄이 그어진 문장

  • 이제 Console에서 실패한 요청 링크 외에도 로드되지 않은 스타일시트를 참조하는 정확한 줄에 대한 링크도 제공합니다.

콘솔은 문제가 있는 문이 있는 정확한 줄에 대한 링크를 제공합니다.

  • 네트워크 패널은 Initiator 열에 로드되지 않은 스타일시트를 참조하는 정확한 줄에 대한 링크를 일관되게 채웁니다.

  • 문제 패널에는 잘못된 URL, 요청 실패, 잘못 배치된 @import 문을 비롯한 모든 스타일시트 로드 문제가 표시됩니다.

소스 및 요청 링크가 있는 문제 패널

Chromium 문제: 1440626, 1442198, 1453611

요소 > 스타일 > 애니메이션 편집기에서 선형 타이밍 지원

요소 > 스타일의 Easing 편집기 이중 편집기를 사용하면 클릭 한 번으로 transition-timing-function 및 animation-timing-function 값을 조정할 수 있습니다. 이 버전에서는 Easing 편집기 이중 편집기에서 선형 타이밍 함수 지원을 받습니다.

선형 타이밍을 구성하려면 선형 선택 도구 버튼을 클릭합니다. 제어점을 추가하려면 선의 아무 곳이나 클릭합니다. 제어점을 삭제하려면 제어점을 더블클릭합니다. linear, elastic, bounce, emphasized 사전 설정 중 하나를 선택할 수도 있습니다. 동영상을 시청하여 선형 조정이 어떻게 작동하는지 확인하세요.

Chromium 문제: 1421241

저장소 버킷 지원 및 메타데이터 보기

애플리케이션 > 저장용량 섹션에 저장용량 버킷 지원이 추가되었습니다. 스토리지 버킷은 서로 독립적이므로 데이터 슬라이스에 대한 제거 우선순위를 지정하고 가장 중요한 데이터가 삭제되지 않도록 할 수 있습니다. 각 저장소 버킷은 IndexedDB 및 CacheStorage와 같은 기존 저장소 API와 연결된 데이터를 저장할 수 있습니다.

이 Fiddle을 확인하여 기능을 테스트하세요. DevTools를 열고 Application(애플리케이션) > Storage(저장소) > Indexed DB(색인 생성 DB)로 이동한 후 코드를 실행합니다. 이제 DevTools에 버킷과 콘텐츠가 표시됩니다. 메타데이터를 보려면 버킷을 선택합니다.

버킷의 메타데이터 보기

이제 로컬, 세션, 캐시 저장소 섹션에서도 통합 메타데이터 뷰를 사용할 수 있습니다.

새로운 통합 메타데이터 뷰

Chromium 문제: 1448011, 1406017

Lighthouse 10.3.0

이제 Lighthouse 패널에서 Lighthouse 10.3.0이 실행됩니다. 특히 이 버전에는 표 헤더 및 캡션, 입력 버튼 이름, 언어 불일치와 관련된 다양한 접근성 문제를 포착하는 새로운 감사 4가지가 추가되었습니다. 예를 들면 다음과 같습니다.

통과한 표 헤더 검사

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

Chromium 문제: 772558

접근성: 키보드 명령어 및 향상된 화면 읽기

이제 DevTools에서 더 많은 단축키를 지원하고 스크린 리더 관련 문제를 수정합니다.

  • 이제 Windows 및 여러 Linux 배포에서 Shift+F10과 같은 단축키를 사용하여 컨텍스트 메뉴를 열 수 있습니다. MacOS 바로가기는 대체 포인터 작업을 참고하세요.
  • 스크린 리더 애플리케이션:
    • 체크박스 라벨을 불필요하게 두 번 알리지 않습니다.
    • '열 헤더 읽기' 단축키를 누르면 정렬 가능한 열의 열 헤더 이름을 알려줍니다.

DevTools팀은 이러한 개선사항을 제공해 준 Yanling Wang님과 Elorm Coch님께 감사의 인사를 전합니다.

Chromium 문제: 1446482, 1414952

기타 하이라이트

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

  • Network 패널은 타임라인과 상호작용한 후에도 네트워크 활동을 계속 기록합니다 (1422552).
  • 이제 범위 패널에서 사전 렌더링 활성화 또는 뒤로/앞으로 캐시 탐색이 있었는지 인식하고 새로고침하라는 메시지를 표시합니다 (1393057).
  • 이제 키보드(위쪽 화살표 및 아래쪽 화살표: 이동, 스페이스바: 선택)를 사용하여 소스 > 중단점 창을 탐색할 수 있습니다(1446150).
  • Network 패널에서 HAR 파일 업로드 및 필터링이 수정되었습니다 (1450622).
  • 이제 성능 패널의 플레임 차트가 더 나은 렌더링을 위해 트레이스 사이에 작은 간격을 둡니다 (1452150).
  • 소스 맵에 삽입된 파일의 자동 매핑을 수정했습니다. 1446383

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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