DevTools의 새로운 기능 (Chrome 145)

게시일: 2026년 2월 11일

Chrome 139와 마찬가지로 Chrome 145의 경우 Chrome DevTools팀은 제품 우수성을 우선시하여 알려진 문제를 해결하고, UI 구현을 통합하고, 테스트 상태를 개선했습니다. 이러한 노력을 통해 다양한 패널에서 수많은 미묘한 수정 및 개선사항이 적용되어 일상적인 디버깅 및 개발 워크플로가 더 원활하고 안정적이며 생산적으로 이루어질 것입니다.

DevTools MCP 서버 업데이트

DevTools MCP 서버 가 v0.11.0에서 v0.14.0으로 크게 업데이트되어 주요 자동화 및 에뮬레이션 기능이 도입되었습니다.

  • 자동 연결: 새로운 --auto-connect 플래그를 사용하면 서버가 실행 중인 Chrome 인스턴스를 자동으로 검색하고 연결할 수 있으므로 WebSocket URL을 수동으로 복사할 필요가 없습니다.
  • 통합 에뮬레이션: 이제 단일 emulate 도구가 위치정보, 네트워크 상태 (오프라인/느린 3G), CPU 스로틀링, 사용자 에이전트 재정의를 처리합니다.
  • 보존된 로그: 이제 탐색 전반에서 네트워크 요청 및 콘솔 메시지에 액세스하여 DevTools의 '로그 보존' 기능을 미러링할 수 있습니다.

전체 변경사항 목록은 GitHub의 공개 변경 로그 를 참고하세요.

이제 추적 뷰에 소프트 탐색이 표시됨

웹사이트에서 SPA (단일 페이지 애플리케이션) 아키텍처를 사용하는 경우 이제 성능 패널 추적 뷰에 소프트 탐색 및 소프트 LCP 마커가 표시됩니다. 이렇게 하면 전체 페이지를 새로고침하지 않고 탐색 이 발생하는 최신 웹 애플리케이션에서 성능을 훨씬 쉽게 디버깅할 수 있습니다.

이 블로그 게시물에서 소프트 탐색에 관해 자세히 알아보세요. 실시간 측정항목 뷰와 성능 분석에는 소프트 탐색이 반영되지 않지만 이 API에 대한 작업이 계속됨에 따라 향후 출시에서 이 작업이 계획되어 있습니다.

youtube.com의 트레이스가 있는 성능 패널의 소프트 탐색 마커

Chromium 문제: 450673886, 450673887

이제 훨씬 더 정확한 라인 수준 프로파일러 타이밍

성능 패널에서 추적을 기록한 후 소스 패널에 추적에서 관찰된 타이밍이 라인별로 표시됩니다. 이를 통해 실행 시간이 가장 많이 소요되는 코드 줄을 정확하게 식별할 수 있습니다.

이전에는 소스가 보기 좋게 형식이 지정되었거나 ({} 버튼 사용) 소스 매핑된 스크립트를 사용하는 경우 이 기능에 안정성을 떨어뜨리는 버그가 있었습니다. 이러한 문제가 해결되어 라인 수준 프로파일링이 정확하고 프로덕션 준비가 완료된 축소된 코드에 사용할 수 있게 되었습니다.

소스 패널의 행 번호 옆에 실행 타이밍이 표시됩니다.

더 빠른 추적 상호작용

성능 패널의 주요 병목 현상이 해결되었습니다. 이전에는 시간 범위를 선택하거나 사용량이 많은 추적을 패닝하면 중복 이벤트 정렬로 인해 상당한 UI 지연이 발생할 수 있었습니다. 이 문제가 최적화되어 복잡한 화염 차트와의 상호작용이 훨씬 더 반응성이 높아졌습니다.

Chromium 문제: 457866795

렌더링을 지연시키는 리소스 식별

이제 네트워크 패널에 전용 렌더링 차단 열이 포함됩니다. 이를 통해 브라우저가 페이지 콘텐츠를 페인트하지 못하도록 하는 리소스 (JavaScript, CSS, 글꼴)를 즉시 식별하여 첫 페인트 성능을 최적화할 수 있습니다.

네트워크 패널의 새로운 렌더링 차단 열

Chromium 문제: 41169154

개별 네트워크 요청 스로틀링

Chrome 144에서 도입된 요청 조건 패널 (이전의 네트워크 요청 차단)에는 이제 개별 요청 스로틀링이 기본적으로 사용 설정 되어 있습니다.

이 기능은 이전 마일스톤에서 도입되었지만 늦은 회귀로 인해 사용 중지되었습니다. Chrome 145에서는 이제 특정 네트워크 요청을 안정적으로 스로틀링하여 느린 종속 항목을 시뮬레이션하거나 앱이 특정 리소스 지연을 처리하는 방식을 테스트할 수 있습니다.

> 기타 도구 > 요청 조건 에서 패널을 열어 특정 패턴의 스로틀링 또는 차단을 시작합니다.

@starting-style 디버깅 개선사항

이제 CSS @starting-style 규칙 디버깅 지원이 기본적으로 사용 설정 되어 있습니다. 이 기능을 사용하면 요소가 처음 렌더링될 때 적용되는 스타일을 검사할 수 있으며, 이는 진입 애니메이션 및 전환을 디버깅하는 데 필수적입니다.

Chromium 문제: 465367572

AI 지원 업데이트

  • 멀티모달 입력: 이제 클립보드에서 AI 지원 채팅으로 이미지를 직접 붙여넣어 시각적 문제에 관해 질문할 수 있습니다.

Chromium 문제: 470997699

기타 주요 내용

  • 요소: 루트 <html> 태그 옆에 새로운 소스 보기 배지가 추가되어 문서의 소스 코드로 빠르게 이동할 수 있습니다.
  • 소스: 이제 수정 가능한 JSON 파일에서 되돌릴 수 있는 보기 좋게 인쇄 전환을 지원하므로 원래 형식을 유지하면서 데이터를 더 쉽게 수정할 수 있습니다.
  • 네트워크: 컨텍스트 메뉴 항목이 문장 대소문자를 사용하도록 업데이트되어 가독성이 향상되었습니다.
  • 콘솔: 페이지를 새로고침한 후 포착되지 않은 예외 필터가 손실되는 문제가 해결되었습니다.

Chromium 문제: 378870233, 461041921, 433162438

접근성 공지사항

이 버전에는 다음과 같은 접근성 개선사항이 적용되었습니다.

  • 검색: 이제 스크린 리더가 Ctrl+F를 사용할 때 검색 결과 수를 알립니다 (예: "5개 중 1개").
  • 레코더: 이제 스크린 리더가 녹음이 성공적으로 삭제되거나 가져온 경우 알립니다.
  • 설정: 이제 스크린 리더가 실험 탭에서 필터링할 때 결과 수를 알립니다.
  • 개인 정보 보호: 이제 개인 정보 보호 패널의 출처 그룹에 키보드를 사용하여 완전히 액세스할 수 있습니다.
  • UI: 고대비 및 강제 색상 모드의 사용자를 위해 도크 아이콘과 사용 중지된 선택 요소의 가시성이 개선되었습니다.

Chromium 문제: 448675917, 392090449, 471713944, 471141907, 471095586