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

DevTools의 새로운 기능, Chrome 125

Sofia Emelianova

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

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

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

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

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

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

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

@position-try CSS 규칙 지원 전후입니다.

자세한 내용은 CSS 앵커 포지셔닝 API 소개를 참고하세요.

Chromium 문제: 40279608

소스 패널 개선

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

자동 프리티 인쇄 및 괄호 닫기 구성

이제 소스에서 편집기의 자동 프리티 인쇄 및 괄호 닫기를 사용 설정하거나 사용 중지할 수 있습니다. pretty-printing은 축소된 파일을 읽을 수 있도록 합니다. 여는 괄호 닫기는 여는 괄호 () 또는 }) 또는 태그 (>)를 입력할 때 자동으로 추가됩니다.

관련 동작을 구성하려면 check_box 설정 > 환경설정 > 소스에서 새로운 check_box 자동 닫기 괄호 및 check_box 자동으로 압축 축소된 소스에 인쇄 옵션을 선택하거나 선택 해제합니다.

자동 프리티 인쇄 및 괄호 닫기를 위한 새로운 설정을 추가하기 전과 후

Chromium 문제: 40865010, 324314570

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

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

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

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

포착된 거부를 인식하기 전과 후입니다.

Chromium 문제: 40283993

콘솔의 오류 원인

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

디버깅을 더 쉽게 하기 위해 오류를 포착하고 재전송할 때 오류 원인을 지정할 수 있습니다. 콘솔은 원인 체인을 찾아올 때 각 오류 스택을 Caused by: 접두사와 함께 출력하므로 원래 오류를 계속 확인할 수 있습니다.

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

Chromium 문제: 40182832

네트워크 패널 개선

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

조기 힌트 헤더 검사

조기 힌트 헤더는 네트워크 패널의 요청 헤더 탭에 전용 섹션을 가져옵니다. 이전에는 응답 헤더 섹션에서 관련 헤더를 찾을 수 있었습니다.

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

초기 힌트를 위한 전용 섹션 추가 전과 후

자세한 내용은 조기 힌트로 서버 Think-Time을 사용하여 페이지 로드 속도 높이기를 참고하세요.

Chromium 문제: 40222701

폭포식 구조 열 숨기기

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

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

Chromium 문제: 40574989

성능 패널 개선

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

CSS 선택자 통계 캡처

실적 패널에는 오랫동안 실행되는 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, Dev 또는 베타를 기본 개발 브라우저로 사용해 보세요. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스하고, 최첨단 웹 플랫폼 API를 테스트하고, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.

Chrome DevTools 팀에 문의하기

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

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