DevTools, Chrome 141의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

AI 에이전트를 위한 Chrome DevTools (MCP)

이제 새로운 Chrome DevTools Model Context Protocol (MCP) 서버의 미리보기를 확인할 수 있습니다. Chrome DevTools의 기능을 AI 코딩 어시스턴트에 제공합니다.

이전에는 코딩 에이전트가 브라우저에서 실행될 때 생성한 코드가 실제로 어떤 작업을 하는지 확인할 수 없었습니다. Chrome DevTools MCP 서버는 이 문제를 해결합니다. AI 코딩 어시스턴트는 Chrome에서 직접 웹페이지를 디버그할 수 있으며 DevTools 디버깅 기능과 성능 통계를 활용할 수 있습니다. 이렇게 하면 문제를 식별하고 해결할 때 정확도가 향상됩니다.

작동 방식을 직접 확인해 보세요.

자세한 내용은 AI 에이전트를 위한 Chrome DevTools (MCP)를 참고하세요.

Gemini로 네트워크 종속 항목 트리 디버그

이제 성능 > 인사이트 > 네트워크 종속성 트리 통계에 AI로 디버그 버튼이 표시되어 AI 지원 패널로 이동할 수 있으므로 Gemini의 도움을 받아 해당 트리를 논의하고 디버그할 수 있습니다.

'네트워크 종속 항목 트리' 통계에 'AI로 디버그' 버튼을 추가하기 전과 후

Gemini와의 채팅 내보내기

이제 상단 작업 표시줄의 대화 내보내기 버튼을 클릭하거나 채팅에서 Gemini 메시지 아래에 있는 대답 복사를 클릭하여 Gemini와의 현재 채팅을 내보내거나 대답을 클립보드에 복사할 수 있습니다.

AI 지원에 내보내기 및 복사 버튼을 추가하기 전후

성능 패널에 지속된 트랙 구성

이제 성능 패널에서 기록된 트랙을 구성하면 DevTools에서 구성을 저장하고 다시 가져오거나 새 트랙을 기록할 때 적용합니다.

IP 보호 네트워크 요청 필터링

이제 네트워크 패널에서 IP 보호 프록시에 전송된 요청을 필터링할 수 있습니다.

'IP 보호 요청' 필터를 네트워크 패널에 추가하기 전과 후

요소 > 레이아웃 탭에 그리드 레이아웃 지원 추가

이제 요소 > 스타일 탭에서 Masonry 레이아웃을 검사할 수 있습니다.

Masonry 레이아웃은 한 축이 일반적인 엄격한 그리드 레이아웃(대부분 열)을 사용하고 다른 축이 masonry 레이아웃을 사용하는 레이아웃 메서드입니다.

요소 - 레이아웃에 masonry 레이아웃 지원을 추가하기 전과 후

Lighthouse 12.8.2

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

이 버전에서는 특히 Lighthouse가 CSS 맞춤 속성에서 발견된 문제를 자체 오류 메시지로 분리합니다.

전체 변경사항 목록도 참고하세요.

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

Chromium 문제: 40543651

기타 주요 내용

이번 출시의 중요한 수정사항과 개선사항은 다음과 같습니다.

  • 성능: 이제 유휴 상태 콜백 요청 이벤트에 timeout 속성이 포함됩니다 (crbug.com/441679219).
  • 접근성 이제 스크린 리더가 다음을 읽어 줍니다.
  • 네트워크: 네트워크 로그 항목을 마우스 오른쪽 버튼으로 클릭하면 선택됩니다 (crbug.com/368510578).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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