이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능, Chrome 126

Sofia Emelianova

성능 패널 개선

이 버전에서는 성능 패널이 개선되었습니다.

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

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

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

Chromium 문제: 336266699

Flame Chart의 스크립트 무시

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

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

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

Chromium 문제: 336266714

CPU 20배 제한

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

'캡처 설정'에 '20x 느림' 옵션을 추가하기 전과 후

Chromium 문제: 324978881

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

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

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

효과가 있었던 부분과 그렇지 않은 부분, 개선이 필요한 부분에 대해 의견이 있으시면 알려주시기 바랍니다.

재정의하려면 전체 헤더 문자열을 붙여넣으세요.

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

다음 동영상에서 실제 사례를 확인해 보세요.

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

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

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

Chromium 문제: 330967147, 337012362, 328210785.

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

Memory 패널의 힙 스냅샷에는 중복 문자열, 분리된 DOM 노드에 보관한 객체, DevTools 콘솔과 같이 비효율적인 메모리 사용의 일반적인 사례를 찾는 데 도움이 되는 새로운 필터가 제공됩니다.

비효율적인 메모리 사용의 일반적인 사례를 위한 필터 옵션 추가 전과 후입니다.

Chromium 문제: 337094903

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

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

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

Chromium 문제: 338094915

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

Chrome 사용을 자동화하거나 디버깅을 위해 명령줄에서 DevTools를 여는 경우, 매번 새로운 DevTools 세션에 표시되는 self-XSS 경고를 사용 중지해야 하는 경우가 많습니다.

콘솔의 self-xss 경고 대화상자

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

Chromium 문제: 41491762

Lighthouse 12.0.0

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

이번 업데이트에는 PWA 카테고리 삭제, 검색엔진 최적화 카테고리 재구성, 전체 비용 절감 지원 중단, 새로운 감사 및 감사 변경사항 등 여러 변경사항이 포함됩니다. 변경사항 전체 목록을 확인하세요.

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

Chromium 문제: 772558.

기타 주요 사항

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.