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

DevTools의 새로운 기능, Chrome 125

Sofia Emelianova

Gemini로 콘솔의 오류 및 경고를 더 잘 이해

이 Chrome 버전에서는 사용자가 발생하는 오류와 경고를 더 잘 이해할 수 있도록 생성형 AI 기능을 DevTools 콘솔에 제공합니다.

오류 또는 경고에 대한 AI 생성 설명을 보려면 Console의 메시지 옆에 있는 이 오류 이해하기 (경고) 버튼을 클릭하고 안내를 따릅니다.

오류에 대한 AI 생성 설명입니다.

자세한 내용은 AI로 오류 및 경고 이해하기를 참고하세요.

요소 > 스타일에서 `@position-try` 규칙 지원

CSS 앵커 위치를 디버그하는 데 도움이 되도록 이제 요소 > 스타일 탭에서 @position-try CSS 규칙을 지원합니다. 이 탭은 position-try-options 값을 확인하고 각 옵션을 전용 @position-try --name 섹션에 연결합니다.

@position-try CSS 규칙을 지원하기 전과 후입니다.

자세한 내용은 CSS 앵커 배치로 요소를 서로 테더링하기를 참고하세요.

Chromium 문제: 40279608

소스 패널 개선

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

프리티 프린트 및 괄호 닫기 자동 설정

이제 출처에서 편집기의 자동 예쁘게 인쇄 및 괄호 닫기 기능을 사용 또는 사용 중지할 수 있습니다. 프리티 프린트를 사용하면 축소된 파일을 읽을 수 있습니다. 괄호 닫기를 사용하면 여는 괄호 () 또는 }) 또는 태그 (>)가 자동으로 추가됩니다.

관련 동작을 구성하려면 설정 설정 > 환경설정 > 출처에서 새로운 체크박스 자동 닫기 괄호 및 check_box 축소된 소스 자동 예쁘게 인쇄 옵션을 선택 또는 선택 해제합니다.

Chromium 문제: 40865010, 324314570

처리된 거부된 프로미스가 포착된 것으로 인식됨

이제 Sources 패널에서는 거부된 프로미스를 .catch() 또는 2인수 .then()로 처리한 경우 이를 포착된 것으로 올바르게 인식합니다.

즉, 소스 > 중단점 > check_box 확인할 수 없는 예외에서 일시중지가 사용 설정되면 디버거는 다음과 유사한 문에서 일시중지되지 않습니다.

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

포착된 거부를 인식하기 전과 후

Chromium 문제: 40283993

Console의 오류 원인

이제 콘솔에는 스택 트레이스에 오류 원인의 체인이 표시됩니다(있는 경우).

오류를 포착하고 다시 생성할 때 오류 원인을 지정하면 디버깅을 더 쉽게 할 수 있습니다. 콘솔이 원인 체인을 따라갈 때 각 오류 스택을 Caused by: 접두사와 함께 출력하므로 원래 오류를 계속 볼 수 있습니다.

`Caused by` 접두사로 스택 트레이스를 출력하기 전과 후

Chromium 문제: 40182832

네트워크 패널 개선

이 버전에서는 네트워크 패널이 개선되었습니다.

Early Hints 헤더 검사

사전 힌트 헤더는 Network 패널의 요청 Headers 탭에 전용 섹션이 있습니다. 이전에는 응답 헤더 섹션에서 관련 헤더를 찾을 수 있었습니다.

초기 힌트는 최종 응답 전에 예비 HTTP 응답을 전송하는 데 사용되는 HTTP 상태 코드 (103 Early Hints)입니다. 따라서 서버가 기본 리소스를 생성하는 동안에도 서버가 중요한 하위 리소스 (예: 스타일시트 또는 주요 자바스크립트) 또는 페이지에서 사용할 가능성이 있는 출처에 대한 힌트를 브라우저에 보낼 수 있습니다.

사전 힌트 전용 섹션을 추가하기 전과 후

자세한 내용은 Early Hints를 통해 서버 고려 시간을 사용해 페이지 로드 속도 향상을 참고하세요.

Chromium 문제: 40222701

폭포식 구조 열 숨기기

이제 다른 열을 숨기는 방법과 유사하게 네트워크 패널에서 폭포식 구조 열을 숨길 수 있습니다. 열 이름을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 check_box_outline_blank 폭포식 구조 체크박스를 선택 해제합니다.

폭포식 구조 열을 숨기는 옵션을 추가하기 전과 후

Chromium 문제: 40574989

성능 패널 개선

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

CSS 선택자 통계 캡처

Performance 패널에는 장기 실행 Recalculate Style 이벤트의 CSS 선택기 통계를 캡처할 수 있는 새로운 설정이 추가되었습니다.

통계를 보려면 Recalculate Style 이벤트를 선택하고 새로운 Selector Stats 탭을 엽니다. 이 탭에는 경과 시간, 일치 시도 및 횟수, 각 선택기의 느린 경로 일치하지 않는 비율에 대한 정보가 표시됩니다.

선택기 통계 추가 전과 후

Chromium 문제: 324282954

순서 변경 및 트랙 숨기기

성능 패널에는 트랙의 순서를 변경하고 트랙을 숨길 수 있는 새로운 구성 모드가 도입됩니다.

설정 모드를 시작하려면 트랙 이름 왼쪽에 있는 수정 수정 버튼을 클릭합니다. 그런 다음 arrow_upward를 위로 또는 arrow_downward를 클릭하여 트랙을 이동하거나 visibility_off 숨기기를 클릭합니다. 작업을 마치면 트랙 이름 오른쪽에 있는 완료 확인 버튼을 클릭합니다.

다음 버전인 Chrome 126에서는 이 UI가 더 개선됩니다.

Chromium 문제: 311439339.

메모리 패널의 유지자 무시

이제 Memory 패널로 캡처하는 힙 스냅샷의 보관 프로그램을 무시할 수 있습니다.

자문 서비스를 무시하려면 객체를 선택하고, 리테일러 섹션에서 자문 서비스를 마우스 오른쪽 버튼으로 클릭하고, 드롭다운 메뉴에서 이 자문 서비스 무시를 선택합니다. 무시된 보관자는 Distance 열에 ignored 값으로 표시됩니다. 무시를 중지하려면 맨 위의 작업 모음에서 무시한 자문 서비스 복원을 클릭합니다.

유지자 무시 옵션을 추가하기 전과 후입니다.

또한 힙 스냅샷은 이제 더 많은 수억 개의 포함 에지와 노드를 지원합니다(332350576).

Chromium 문제: 327337527

Lighthouse 11.7.1

이제 Lighthouse 패널에서 Lighthouse 11.7.1을 실행합니다. 변경사항 전체 목록을 확인하세요.

주목할 만한 변경사항 중 하나는 이번 버전에서 지원 중단된 게시자 광고 플러그인의 지원 중단입니다.

게시자 광고 플러그인 지원을 추가하기 전과 후

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

Chromium 문제: 772558.

기타 주요 사항

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

Recorder 패널은 이제 공식적으로 미리보기 상태가 아닙니다 (329271496).
이제 맞춤 형식 지정 도구에서 body() 함수에 대해 null를 반환할 때 Console에 오류가 표시되지 않습니다. 이는 유효한 동작 (329400119)입니다.
Sources 패널에서 업데이트된 구문 하이라이터, 특히 이제 정규 표현식에서 v 및 d 플래그를 지원합니다.
네트워크 > 쿠키 탭에서 예외 쿠키를 응답 쿠키에 매핑할 때 발생하는 버그를 수정했습니다. (41491846)
이제 요소 > 스타일 탭에서 다음 작업이 실행됩니다.
- 맞춤 속성이 있는 완전히 오버로드된 상속된 규칙을 표시합니다 (41489874).
- 색상 테마에 따라 Light-dark()에서 적용된 값을 강조표시합니다. (331123816)

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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