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

DevTools의 새로운 기능, Chrome 126

Sofia Emelianova

성능 패널 개선

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

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

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

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

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

Chromium 문제: 336266699

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

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

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

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

Chromium 문제: 336266714

CPU 20배 제한

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

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

Chromium 문제: 324978881

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

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

'실적 통계' 패널의 지원 중단 경고 배너

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

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

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

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

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

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

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

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

Chromium 문제: 330967147, 337012362, 328210785

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

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

메모리 사용이 비효율적인 일반적인 사례를 위한 필터 추가 전과 후

Chromium 문제: 337094903

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

이제 Application > 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

기타 주요 정보

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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