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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.