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-printing은 축소된 파일을 읽을 수 있도록 합니다. 여는 괄호 닫기는 여는 괄호 () 또는 }) 또는 태그 (>)를 입력할 때 자동으로 추가됩니다.

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

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

Chromium 문제: 40865010, 324314570

거부된 처리된 약속이 포착된 것으로 인식됨

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

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

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

폭포식 구조 열 숨기기

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

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

Chromium 문제: 40574989

성능 패널 개선사항

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

CSS 선택자 통계 캡처

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

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

선택기 통계 추가 전과 후

Chromium 문제: 324282954

순서 변경 및 트랙 숨기기

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

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

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

Chromium 문제: 311439339

메모리 패널에서 리테이너 무시

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

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

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

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

Chromium 문제: 327337527

Lighthouse 11.7.1

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

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

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

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

Chromium 문제: 772558

기타 주요 정보

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

DevTools의 새로운 기능

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