DevTools의 새로운 기능, Chrome 125

Gemini를 사용하여 콘솔의 오류 및 경고 더 잘 이해하기

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

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

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

요소 > 스타일의 @position-try 규칙 지원

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

자세한 내용은 CSS 앵커 위치 지정 API 소개를 참고하세요.

Chromium 문제: 40279608

소스 패널 개선사항

이 버전에서는 소스 패널에 몇 가지 개선사항이 적용되었습니다.

자동 형식 지정 및 괄호 닫기 구성

이제 소스에서 편집기의 자동 멋진 출력 및 대괄호 닫기를 사용 설정하거나 사용 중지할 수 있습니다. 예쁘게 인쇄를 사용하면 축소된 파일을 읽을 수 있습니다. 괄호 닫기는 시작 괄호를 입력할 때 자동으로 닫는 괄호 () 또는 }) 또는 태그 (>)를 추가합니다.

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

Chromium 문제: 40865010, 324314570

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

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

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

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

Chromium 문제: 40283993

Console의 오류 원인

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

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

Chromium 문제: 40182832

네트워크 패널 개선사항

이 버전에서는 네트워크 패널에 몇 가지 개선사항이 적용되었습니다.

조기 힌트 헤더 검사

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

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

자세한 내용은 조기 힌트를 사용하여 서버 생각 시간을 활용한 페이지 로드 속도 향상을 참고하세요.

Chromium 문제: 40222701

폭포식 열 숨기기

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

Chromium 문제: 40574989

성능 패널 개선사항

이 버전에서는 성능 패널에 몇 가지 개선사항이 적용되었습니다.

CSS 선택자 통계 캡처

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

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

Chromium 문제: 324282954

순서 변경 및 트랙 숨기기

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

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

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

Chromium 문제: 311439339

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

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

리테이너를 무시하려면 객체를 선택하고 Retainer 섹션에서 리테이너를 마우스 오른쪽 버튼으로 클릭한 다음 드롭다운 메뉴에서 Ignore this retainer를 선택합니다. 무시된 리테이너는 거리 열에 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).
  • 색상 테마(331123816)에 따라 light-dark()에서 적용된 값을 강조 표시합니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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