DevTools의 새로운 기능, Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선

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

업데이트된 트랙 구성 모드로 트랙 이동 및 숨기기

이제 트랙 이름을 마우스 오른쪽 버튼으로 클릭하고 트랙 구성을 선택하여 트랙 구성 모드를 시작할 수 있습니다. 추가 공간이 필요한 수정 버튼이 삭제되었습니다.

수정 버튼을 메뉴 옵션으로 대체하기 전과 후

트랙 구성 모드를 사용하면 트랙의 순서를 변경하고 숨길 수 있습니다. 위쪽 또는 아래쪽을 클릭하여 트랙을 이동하거나 숨기기를 클릭합니다. 구성 모드를 종료하려면 하단에서 트랙 구성 완료를 클릭합니다. 이 구성은 새 트레이스에서는 유지되지만 다음 DevTools 세션에는 지속되지 않습니다.

Chromium 문제: 336266699

플레임 차트에서 스크립트 무시

기본 트랙의 플레임 차트에 무시 목록 지원이 추가되었습니다. 이제 차트에서 스크립트를 마우스 오른쪽 버튼으로 클릭하고 목록에 스크립트 추가를 선택할 수 있습니다.

무시할 스크립트 목록, 무시된 것으로 표시된 스크립트, 설정에 상응하는 규칙을 추가하는 메뉴 옵션

차트에서는 무시된 스크립트를 접어 무시 목록으로 표시한 후 설정 > 무시 목록의 맞춤 제외 규칙에 추가합니다. 무시된 스크립트는 트레이스 또는 맞춤 제외 규칙에서 삭제할 때까지 저장됩니다.

Chromium 문제: 336266714

CPU를 20배 제한합니다.

성능 패널의 캡처 설정에 있는 CPU 제한 메뉴에 새로운 20배 느리게 옵션이 추가되었습니다. 따라서 이제는 고급형 컴퓨터에서도 실제 성능 문제를 보다 정확하게 재현하고 분석할 수 있습니다.

'캡처 설정'에 '20배 감속' 옵션을 추가하기 전과 후

Chromium 문제: 324978881

성능 통계 패널 지원 중단 예정

실험용 성능 통계 패널은 2024년에 지원 중단됩니다. DevTools팀은 가장 유용한 기능을 성능 패널에 통합하기 위해 노력하고 있습니다. 이제 실적 통계 패널 상단에 예정된 지원 중단에 관한 배너가 표시됩니다.

'성능 통계' 패널의 지원 중단 경고 배너

자세한 내용은 2024년 이후의 성능 도구를 참고하세요.

효과적인 부분, 개선이 필요한 부분, 개선이 필요한 부분에 관해 의견이 있으시면 의견을 보내주시기 바랍니다.

전체 헤더 문자열을 붙여넣어 재정의

헤더를 재정의할 때 이제 전체 헤더 문자열 (HEADER_NAME: VALUE)을 붙여넣을 수 있습니다. 그러면 DevTools에서 :의 문자열을 헤더 이름과 그 값으로 분할합니다.

다음 동영상에서 직접 확인해 보세요.

이제 헤더를 수정할 때 영숫자, 하이픈, 밑줄 이외의 문자를 입력하면 네트워크 패널에 경고가 표시됩니다.

헤더 이름 옆에 지원되지 않는 문자가 포함된 경우 표시되는 경고

또한, 메뉴 옵션 재정의 및 수정 버튼이 의도된 동작과 일치하는 chrome:// URL에서 사용 중지됩니다.

Chromium 문제: 330967147, 337012362, 328210785

힙 스냅샷에서 새 필터로 과도한 메모리 사용량 찾기

메모리 패널의 힙 스냅샷에 중복된 문자열, 분리된 DOM 노드 및 DevTools 콘솔에 의해 유지되는 객체와 같이 메모리 사용이 비효율적인 일반적인 사례를 찾는 데 도움이 되는 새로운 필터가 추가되었습니다.

비효율적인 메모리 사용의 일반적인 사례에 대한 필터 옵션을 추가하기 전과 후

Chromium 문제: 337094903

애플리케이션 > 저장소에서 스토리지 버킷 검사

이제 Application > Storage 섹션의 전용 트리에서 스토리지 버킷을 검사할 수 있습니다. 이 트리는 이전에 실험용이었지만 기본적으로 사용 설정되어 있습니다.

스토리지 섹션에서 스토리지 버킷 트리를 사용 설정하기 전과 후

Chromium 문제: 338094915

명령줄 플래그로 자체 XSS 경고 사용 중지

Chrome 사용을 자동화하거나 디버깅을 위해 명령줄에서 DevTools를 여는 경우, 새 DevTools 세션마다 표시되는 자체 XSS 경고를 사용 중지하는 것이 좋습니다.

Console의 자체 XSS 경고 대화상자

이제 Chrome에 --unsafely-disable-devtools-self-xss-warnings 명령줄 플래그를 전달하여 이 대화상자를 사용 중지할 수 있습니다.

Chromium 문제: 41491762

Lighthouse 12.0.0

이제 Lighthouse 패널에서 Lighthouse 12.0.0이 실행됩니다.

이 업데이트를 통해 PWA 카테고리 삭제, 검색엔진 최적화 카테고리 재구성, 전체 절감 기능 지원 중단, 새로운 감사, 감사 변경사항 등 다양한 변경사항이 적용되었습니다. 변경사항 전체 목록을 참고하세요.

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

Chromium 문제: 772558

기타 하이라이트

다음은 이번 버전에서 주목할 만한 수정사항과 개선사항입니다.

  • 실적:
    • 이제 다음 DevTools 세션에서 느린 캡처 설정 (고급 페인트 계측 사용 설정 및 CSS 선택자 통계 사용 설정)이 자동으로 지워집니다.
    • 이제 플레임 차트를 확대/축소하고 데이터가 변경될 때 선택기 통계 탭이 자동으로 하단으로 스크롤되지 않습니다(337999939).
  • 콘솔: 이제 Ctrl+` 단축키를 누르면 포커스가 있는 경우에만 창의 콘솔이 닫힙니다(40875466, 328210785).
  • 자동 완성: 주소 파싱이 수정되었습니다(335409093, 335409707).
  • 접근성: 현지화된 문자열에 관한 스크린 리더 알림이 수정되었습니다. (324930007)

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

DevTools의 새로운 기능

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