DevTools, Chrome 143의 새로운 기능

DevTools MCP 서버 업데이트

DevTools MCP 서버의 다양한 개선사항이 적용되었으며 v0.11.0이 출시되었습니다.

  • 이제 MCP 클라이언트 (Gemini CLI, Cursor 등)에서 프롬프트를 표시할 때 요소 및 네트워크 패널에서 선택한 요소와 네트워크 요청을 참조할 수 있습니다.
  • 이제 list_console_messages 도구에는 문제 패널에 표시된 문제도 포함됩니다.
  • 이제 새로운 press_key 도구를 사용하여 양식 요소와 관련이 없는 키보드 이벤트를 디버그할 수 있습니다.
  • 이제 접근성 트리 스냅샷을 디스크에 저장할 수 있음
  • 이제 캐시를 선택적으로 무시하고 페이지를 새로고침할 수 있습니다.
  • 기존 Chrome 프로필을 사용하도록 --user-data-dir 플래그 구성

변경사항 및 버그 수정사항의 전체 목록은 GitHub의 공개 변경 로그를 참고하고, DevTools MCP 서버에 관한 자세한 내용은 공지사항 블로그 게시물을 참고하세요.

트레이스 공유 개선

성능 패널의 트레이스 공유 대화상자

이제 성능 트레이스를 내보낼 때 내보낸 파일에 추가 데이터를 포함하여 향후 자신이나 동료가 더 쉽게 디버깅할 수 있습니다. 이제 다음 항목을 포함할 수 있습니다.

  • 리소스 콘텐츠: 모든 HTML, CSS, JavaScript 파일의 사본(확장 프로그램 스크립트 제외)
  • 스크립트 소스 맵: 작성된 코드에 대한 매핑으로, 원래 함수 이름과 소스 파일을 볼 수 있습니다.

업데이트된 문서에서 공유할 정보와 비공개로 유지하는 것이 좋은 정보를 알아보세요.

이 기능을 구현하기 위해 협력하고 초기 작업을 주도한 Microsoft 동료들에게 감사의 말씀을 전합니다.

@starting-style 지원

이제 요소 패널에서 새로운 CSS @starting-style 규칙 디버깅을 지원합니다. 이 규칙은 진입 애니메이션을 만드는 데 필수적입니다.

이제 관련 요소 옆의 요소 트리에서 starting-style 장식자를 확인하고, 필을 클릭하여 요소의 starting-style 상태를 전환하고, 스타일 탭에서 @starting-style 블록을 검사하고 디버그할 수 있습니다.

디스플레이용 편집기 위젯: masonry

이제 CSS Masonry 레이아웃을 실험하는 경우 display에서 익숙한 것과 동일한 편집기 위젯을 사용할 수 있습니다. flex 및 grid 레이아웃을 사용하여 masonry 레이아웃의 다양한 정렬 옵션을 빠르게 전환할 수 있습니다.

Lighthouse 13

이제 Lighthouse 패널에서 Lighthouse 13이 실행됩니다. 이번 마일스톤으로 DevTools와 Lighthouse 전반에서 성능 통계를 통합하는 작업이 완료됩니다.

자세한 내용은 공지사항 블로그 게시물을 참고하세요. Lighthouse가 유용한 경우와 DevTools의 성능 패널에 연결되는 방법을 알아보려면 Lighthouse: 웹사이트 최적화를 참고하세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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