Chrome 133 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

영구 AI 채팅 기록

이제 AI 어시스턴스 패널이 세션 전반에서 채팅 기록을 로컬에 유지하므로 DevTools 또는 Chrome을 새로고침한 후에도 Gemini와의 이전 대화를 볼 수 있습니다.

성능 패널 개선사항

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

이미지 전송 통계

이제 성능 > 통계 탭에서 파일 크기를 최적화할 수 있는 이미지를 강조 표시할 수 있습니다. 통계에서 이미지를 클릭하면 네트워크 트랙에서 강조 표시됩니다.

이미지 전송 통계가 강조표시된 실적 패널

이미지 전송을 최적화하는 방법을 자세히 알아보려면 이미지를 효율적으로 인코딩을 참고하세요.

기존 및 최신 키보드 탐색

이제 성능 패널에서 원하는 키보드 탐색 스타일을 선택할 수 있으며, 다음과 같은 주요 차이점이 있습니다.

  • 기존: 마우스 휠 (터치패드 위 또는 아래)로 확대/축소하고 Shift + 마우스 휠로 세로 스크롤합니다.
  • 최신: 마우스 휠을 사용한 세로 스크롤, Shift + 마우스 휠을 사용한 가로 스크롤, Command/Control + 마우스 휠을 사용한 확대/축소

원하는 스타일을 선택하려면 패널의 오른쪽 상단에서 바로가기 표시를 클릭하고 기존 또는 모던을 선택합니다. 단축키 대화상자에는 사용 가능한 단축키의 요약본도 제공됩니다.

성능 패널에서 사용할 수 있는 단축키가 있는 단축키 대화상자

플레임 차트에서 관련 없는 스크립트 무시

이제 코드에 더 집중할 수 있도록 성능 패널에서 바로 무시 목록에 관련 없는 스크립트를 추가할 수 있습니다. 패널은 과도한 중첩을 자동으로 접습니다.

무시 목록에 스크립트를 추가하려면 상단 작업 표시줄에서 무시 목록 설정 대화상자 표시를 클릭하고 입력란에 정규 표현식을 입력합니다. 입력하는 동안 플레임 차트에 새 규칙이 적용됩니다.

DevTools는 설정 > 무시 목록에 추가한 무시 목록 규칙을 저장하며, 이 규칙은 대화상자에서 원하는 대로 사용 설정 또는 사용 중지할 수 있습니다.

마우스를 가져가면 타임라인 마커 및 범위 강조 표시

이제 성능 트레이스를 더 잘 이해할 수 있도록 성능 패널에서 다음 작업을 실행합니다.

  • 타임라인 위로 마우스를 가져가면 전체 성능 트레이스에 걸쳐 수직 마커가 표시됩니다.
  • 기본 트랙의 항목 위로 마우스를 가져가면 타임라인의 범위가 강조표시됩니다.

권장 제한 설정

이제 성능 패널의 실시간 측정항목과 관련 캡처 설정 드롭다운 메뉴에서 모두 제한 설정이 추천됩니다.

설정 메뉴에 제한 권장사항을 추가하기 전과 후

권장되는 CPU 제한은 현재 가장 자주 사용되는 4x slowdown이며 네트워크 권장사항은 실시간 측정항목에서 사용 설정된 경우 Chrome UX 보고서 데이터를 기반으로 합니다.

또한 이제 성능 패널의 작업 표시줄에 있는 최근 세션 드롭다운 메뉴의 각 트레이스 옆에 사용한 제한 설정이 표시됩니다.

오버레이의 타이밍 마커

타이밍 마커가 타이밍 트랙에서 트레이스 하단으로 이동했으며 이제 모든 트랙 위에 겹쳐 표시되며 타이밍 트랙이 숨겨져 있더라도 표시됩니다.

마커를 트레이스 하단으로 이동하기 전과 후

타이밍 트랙은 맞춤 mark() 및 measure() 호출을 유지합니다.

요약의 JavaScript 호출 스택 트레이스

이제 성능 > 요약 탭에 비동기 호출을 포함한 JavaScript 호출의 스택 트레이스가 표시됩니다.

요약 탭에 스택 트레이스를 추가하기 전과 후

배지 설정이 Elements의 메뉴로 이동함

요소 패널의 배지 설정이 기본적으로 숨겨진 작업 표시줄에서 해당하는 마우스 오른쪽 버튼 메뉴로 이동했습니다.

배지 설정을 메뉴로 이동하기 전과 후

새로운 '새로운 소식' 패널

새로운 소식 패널이 Chrome의 디자인을 더 잘 따르는 새로운 디자인으로 변경되었습니다.

'새로운 소식' 패널의 이전 버전과 새 버전

Chromium 문제: 325441858

Lighthouse 12.3.0

이제 Lighthouse 패널에서 Lighthouse 12.3.0이 실행됩니다.

이번 업데이트에서는 COOP 및 강력한 HSTS 정책을 통해 적절한 출처 분리를 확인하는 새로운 감사를 추가합니다. 변경사항 전체 목록을 참고하세요.

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

Chromium 문제: 40543651

기타 하이라이트

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

  • 소스: 일시중지 시 디버거가 일시중지 후에 생성된 경우 예기치 않게 서비스 워커 컨텍스트로 전환되지 않습니다 (373893057).
  • 실적:
    • 스크립트 위로 마우스를 가져가면 플레임 차트의 도움말에 URL이 표시됩니다(있는 경우)(368541957).
    • 요약: 원형 차트가 막대 표현으로 대체됩니다.
    • 캡처 설정의 확장 프로그램 데이터 체크박스의 이름이 맞춤 트랙 표시로 변경되었습니다.
    • 이제 통계 탭에 기본적으로 접힌 통과한 통계 (N) 섹션이 있습니다.
  • 애플리케이션 > 저장소: 기술적으로 유효하므로 빈 키로 저장소 항목을 만들 수 있습니다 (373703285).
  • 이제 chrome:// 페이지에서 기기 모드가 사용 중지됩니다 (40186276).
  • 네트워크:
    • 이제 해당 설정이 사용 설정된 경우 HAR 내보내기를 한 번 클릭하면 정리된 버전과 민감한 정보가 포함된 버전이라는 두 가지 옵션이 포함된 메뉴가 열립니다. 이전에는 길게 눌러 메뉴를 열었습니다 (378076279).
    • 이제 cURL로 복사가 -H 'cookie:...' 대신 -b 속성을 사용하여 쿠키를 우회하고 더 읽기 쉽게 합니다. (40791742)
  • 접근성: 이제 컨텍스트 메뉴를 사용하여 패널 내 탭을 왼쪽이나 오른쪽으로 이동할 수 있습니다 (383164782).
  • 네트워크 요청 차단: 이제 이 명령 메뉴 설정이 해당 체크박스와 동기화됩니다 (378058733).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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