Chrome 144에서 팀은 Chrome DevTools MCP 서버에 많은 기대를 모은 새로운 요청 조건 패널과 글꼴 및 채택된 스타일시트 디버깅 개선사항을 제공했습니다.
이로써 2025년 한 해 동안 출시된 놀라운 기능 목록이 마무리됩니다. 놓친 알림이 있는지 확인하고 싶으신가요? 그런 다음 아래의 주요 내용을 확인하거나 이전 버전의 DevTools의 새로운 기능을 살펴보세요.
DevTools MCP 서버 업데이트
DevTools MCP 서버의 다양한 수정사항이 적용되었으며 v0.12.1이 출시되었습니다. 이 버전에는 기존 브라우저 세션을 재사용할 수 있는 자동 연결이라는 새로운 주요 기능이 도입되었습니다. 자동 연결을 사용하면 Chrome에서 직접 디버깅을 시작한 다음 DevTools MCP를 동일한 Chrome 인스턴스로 지정하여 중단한 부분부터 계속할 수 있습니다.
관련 블로그 게시물에서 DevTools MCP 자동 연결에 대해 자세히 알아보세요. 변경사항 및 버그 수정의 전체 목록은 GitHub의 공개 변경 로그를 참고하세요.
개별 네트워크 요청 제한
네트워크 요청 차단 패널의 이름이 요청 조건으로 변경되었습니다. 이제 이 패널에서 요청을 차단하는 것 외에도 개별 요청을 제한할 수 있습니다.
⋮ > 도구 더보기 > 요청 조건에서 패널을 엽니다. 차단 및 제한 사용 설정 체크박스를 전환하여 요청 차단을 사용 설정합니다. + 버튼을 클릭하여 새 텍스트 패턴을 추가합니다. 아이콘을 클릭하여 모든 규칙을 삭제합니다.
업데이트된 문서에서 개별 네트워크 요청을 제한하는 방법을 알아보세요.
@font-face 및 @font-feature-values 규칙 수정
이제 @font-face 및 @font-feature-values이 스타일 패널에 표시되며 여기에서 수정할 수 있습니다.
요소 패널의 채택된 스타일시트
이제 요소 패널에 섀도우 루트 및 문서 루트 아래에 채택된 스타일시트가 표시됩니다. 이를 통해 구성된 스타일시트를 사용하는 사용자가 요소에 영향을 미치는 스타일시트를 찾고 스타일을 디버그하기가 더 쉬워집니다. 특히 스타일이 예기치 않게 적용되지 않는 경우에 유용합니다.
DevTools 2025의 새로운 기능
AI 혁신
콘솔 통계를 시작으로 AI 혁신은 이제 Chrome DevTools의 필수적인 부분이 되었으며, AI 어시스턴스 패널은 컨텍스트 인식 AI 지원 디버깅의 기본 허브가 되었습니다. 콘솔 및 소스 패널의 코드 추천과 성능 추적의 Gemini 자동 주석을 통해 DevTools는 워크플로를 간소화하는 포괄적인 AI 기반 도구 세트를 제공합니다.
- 엔드 투 엔드 스타일 수정: Gemini에게 CSS 문제를 수정해 달라고 요청하고, 작업공간과 함께 디스크의 소스 파일에 변경사항을 직접 저장합니다.
- 성능에 관해 질문하기: 이제 AI 지원을 통해 전체 성능 트레이스를 논의하거나, 성능 통계를 자세히 살펴보고, Gemini를 사용하여 트레이스에 주석을 추가할 수 있습니다.
- 시각적 디버깅: AI 지원 패널이 멀티모달이 되어 이미지를 업로드하거나 스크린샷을 찍어 Gemini가 시각적 결함을 이해하고 디버깅하는 데 도움을 줄 수 있습니다.
성능
성능 디버깅이 덜 부담스럽고 더 실용적이 되도록 성능 패널이 재설계되었습니다. 예를 들어 이제 기록된 트레이스에는 병목 현상을 더 빠르게 식별하고 트레이스를 더 빠르게 탐색하는 데 도움이 되는 선별된 통계가 제공됩니다. 기타 개선사항은 다음과 같습니다.
- 실행 가능한 통계: 성능 통계를 도입하여 단계별 LCP, 레이아웃 이동 원인, 문서 요청 지연 시간과 같은 구체적인 문제를 파악합니다.
- 실제 컨텍스트: 필드 데이터와 CrUX 데이터를 성능 패널에 직접 통합하여 실제 사용자 환경에 대해 실험실 결과를 검증할 수 있습니다.
- 프레임워크 컨텍스트: 이제 Angular v20 및 React v19.2에서 확장성 API를 사용합니다. 구성요소 트리를 직접 확인하면 기본 스레드 병목 현상을 더 쉽게 이해할 수 있습니다. Angular 및 React팀과의 파트너십에 감사드립니다.
- 공동작업 개선: 트레이스에 주석을 달고 리소스 콘텐츠와 소스 맵을 내보내는 옵션을 통해 트레이스를 더 쉽게 공유할 수 있으므로 동료나 나중에 다시 볼 때 필요한 모든 컨텍스트를 확보할 수 있습니다.
웹 플랫폼
DevTools는 진화하는 웹 플랫폼에 발맞춰 최신 CSS 사양을 위한 전용 도구를 추가하는 한편 기존 기능의 개발자 환경을 개선했습니다.
복잡한 CSS 변수 체인에 대한 심층 추적, 속성 도움말에 대한 기준선 가용성을 추가했으며, 최근에는 @starting-style 규칙을 사용한 복잡한 진입 애니메이션에 대한 디버깅 지원과 새로운 display: masonry 레이아웃을 위한 시각적 편집기를 도입했습니다.
미리보기 채널 다운로드
Chrome Canary, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 문제를 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
다음 옵션을 사용하여 새로운 기능, 업데이트 또는 DevTools와 관련된 기타 사항을 논의하세요.
- crbug.com에서 의견 및 기능 요청을 제출합니다.
- DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 알립니다.
- @ChromeDevTools에 트윗합니다.
- 'DevTools의 새로운 기능' YouTube 동영상 또는 'DevTools 팁' YouTube 동영상에 댓글을 남깁니다.