DevTools의 새로운 기능, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

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

소스 패널 개선사항

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

자동 pretty print 적용 및 괄호 닫기 구성

이제 소스의 편집기에서 자동 pretty print 적용 및 괄호 닫기를 사용 설정하거나 사용 중지할 수 있습니다. Pretty print를 사용하면 축소된 파일을 읽을 수 있습니다. 괄호 닫기는 왼쪽 괄호를 입력할 때 오른쪽 괄호 () 또는 }) 또는 태그 (>)를 자동으로 추가합니다.

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

자동 pretty print 적용 및 괄호 닫기를 위한 새 설정을 추가하기 전과 후

Chromium 문제: 40865010, 324314570

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

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

즉, 소스 > 중단점 > 포착되지 않은 예외에서 일시중지가 사용 설정된 경우 디버거는 다음과 유사한 문에서 일시중지되지 않습니다.

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

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

Chromium 문제: 40283993

콘솔의 오류 원인

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

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

`Caused by` 접두사가 있는 스택 트레이스를 인쇄하기 전후

Chromium 문제: 40182832

네트워크 패널 개선사항

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

조기 힌트 헤더 검사

Early Hints 헤더는 네트워크 패널의 요청 헤더 탭에 전용 섹션이 있습니다. 이전에는 응답 헤더 섹션에서 관련 헤더를 확인할 수 있었습니다.

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

Early Hints 전용 섹션을 추가하기 전과 후

자세한 내용은 Early Hints를 사용하여 서버 생각 시간을 통해 페이지 로드 속도 높이기를 참고하세요.

Chromium 문제: 40222701

폭포형 열 숨기기

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

워터폴 열을 숨기는 옵션을 추가하기 전과 후

Chromium 문제: 40574989

성능 패널 개선사항

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

CSS 선택자 통계 캡처

성능 패널에 장기 실행 스타일 재계산 이벤트의 CSS 선택자 통계를 캡처할 수 있는 새로운 설정이 추가되었습니다.

통계를 보려면 스타일 재계산 이벤트를 선택하고 새 선택기 통계 탭을 엽니다. 탭에는 각 선택기의 경과 시간, 일치 시도 및 횟수, 느린 경로 불일치 비율에 대한 정보가 표시됩니다.

선택기 통계를 추가하기 전과 후

Chromium 문제: 324282954

트랙 순서 변경 및 숨기기

성능 패널에 트랙 순서를 변경하고 트랙을 숨길 수 있는 새로운 구성 모드가 추가되었습니다.

구성 모드로 전환하려면 트랙 이름 왼쪽에 있는 수정 버튼을 클릭합니다. 그런 다음 위쪽 또는 아래쪽을 클릭하여 트랙을 이동하거나 숨기기를 클릭합니다. 완료되면 트랙 이름 오른쪽에 있는 확인 버튼을 클릭합니다.

다음 버전인 Chrome 126에서는 이 UI가 더욱 개선될 예정입니다.

Chromium 문제: 311439339

메모리 패널에서 보관자 무시

이제 메모리 패널로 캡처한 힙 스냅샷에서 리테이너를 무시할 수 있습니다.

리테이너를 무시하려면 객체를 선택하고 리테이너 섹션에서 리테이너를 마우스 오른쪽 버튼으로 클릭한 후 드롭다운 메뉴에서 이 리테이너 무시를 선택합니다. 무시된 리테이너는 거리 열에 ignored 값으로 표시됩니다. 무시를 중지하려면 상단의 작업 표시줄에서 무시된 계약금 복원을 클릭합니다.

리테이너를 무시하는 옵션을 추가하기 전과 후

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

Chromium 문제: 327337527

Lighthouse 11.7.1

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

주요 변경사항 중 하나는 이 버전에서 오래된 게시자 광고 플러그인 지원이 중단되었다는 것입니다.

게시자 광고 플러그인 지원을 추가하고 삭제한 후의 모습

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

Chromium 문제: 772558

기타 주요 내용

이번 출시의 주목할 만한 수정사항과 개선사항은 다음과 같습니다.

  • 레코더 패널이 이제 정식 버전으로 출시되었습니다 (329271496).
  • 이제 맞춤 포맷터가 body() 함수의 null를 반환할 때 콘솔에 오류가 표시되지 않습니다. 이는 유효한 동작입니다 (329400119).
  • 소스 패널의 구문 강조 표시기가 업데이트되었습니다. 특히 이제 정규 표현식에서 v 및 d 플래그가 지원됩니다.
  • 네트워크 > 쿠키 탭에서 예외 쿠키를 응답 쿠키에 매핑하는 버그가 수정되었습니다 (41491846).
  • 이제 요소 > 스타일 탭에서 다음 작업을 실행합니다.
    • 커스텀 속성이 있는 완전히 오버로드된 상속 규칙을 표시합니다 (41489874).
    • 색상 테마에 따라 light-dark()에서 적용된 값을 강조 표시합니다 (331123816).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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