DevTools의 새로운 기능, Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

성능 패널 개선사항

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

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

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

수정 버튼을 메뉴 옵션으로 바꾼 전후

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

Chromium 문제: 336266699

Flame Chart에서 스크립트 무시하기

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

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

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

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

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

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

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

Chromium 문제: 338094915

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

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

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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