DevTools의 새로운 기능, Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선사항

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

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

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

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

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

Chromium 문제: 336266699

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

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

무시 목록에 스크립트를 추가하는 메뉴 옵션, 무시로 표시된 스크립트, 설정의 해당 규칙

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

Chromium 문제: 336266714

CPU를 20배 제한합니다.

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

'캡처 설정'에 '20x 슬로우 모션' 옵션을 추가하기 전과 후

Chromium 문제: 324978881

성능 통계 패널 지원 중단

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

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

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

효과적인 점, 효과적이지 않은 점, 개선이 필요하다고 생각되는 점에 관한 의견이 있으면 알려주세요.

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

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

다음 동영상에서 실제 작동 방식을 확인하세요.

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

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

또한 chrome:// URL의 경우 재정의 메뉴 옵션과 수정 버튼이 사용 중지되며 이는 의도한 동작과 일치합니다.

Chromium 문제: 330967147, 337012362, 328210785

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

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

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

Chromium 문제: 337094903

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

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

저장용량 섹션에서 저장용량 버킷 트리를 사용 설정하기 전과 후

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 카테고리 삭제, SEO 카테고리 재구성, 전반적인 비용 절감 지원 중단, 새로운 감사 및 감사 변경사항을 비롯한 여러 변경사항이 적용됩니다. 변경사항 전체 목록을 참고하세요.

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

Chromium 문제: 772558

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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