DevTools, Chrome 142의 새로운 기능

Matthias Rohmer

Gemini의 코드 추천

이제 콘솔 및 소스 패널에서 AI 생성 자동 완성 추천을 받을 수 있습니다.

콘솔 및 소스 패널의 코드 추천 기능

이 기능을 사용 설정하려면 설정 > AI 혁신으로 이동하여 코드 제안을 전환합니다.

DevTools MCP 서버 개선사항

v0.2.1로 DevTools MCP 서버의 공개 미리보기를 출시한 이후 커뮤니티의 기여를 통해 다양한 개선사항을 적용하고 v0.9.0을 출시했습니다.

  • Node.js 지원이 Node.js 20까지 확장되었습니다.
  • 네트워크 요청과 콘솔 메시지는 토큰을 저장하기 위해 페이지로 나눌 수 있으며 요청 유형 (예: 스크립트, 스타일시트, 이미지) 및 메시지 유형 (로그, 경고, 오류)에 따라 필터링할 수 있습니다.
  • 스크린샷은 특정 경로로 다양한 형식으로 출력할 수 있습니다.
  • 구성 가능한 도구 카테고리를 사용하면 노출되는 기능을 정리하여 불필요한 노이즈를 줄일 수 있습니다.
  • 이제 MCP 서버에서 사용하는 Chrome 인스턴스에 실행 인수를 전달할 수 있습니다.

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

AI 지원에 더 빠르게 액세스

이제 DevTools에 AI 지원을 여는 링크가 더 많이 포함됩니다. AI에 질문하기 컨텍스트 메뉴 항목의 이름이 AI로 디버그로 변경되었으며, 컨텍스트에 따라 AI가 지원할 수 있는 직접 작업으로 수정되었습니다.

DevTools의 오른쪽 상단에 있는 새로운 버튼을 사용하면 DevTools 내 어디에서나 AI 어시스턴스를 열 수 있습니다.

DevTools 전반의 AI 지원에 대한 새로운 진입점

Gemini로 전체 성능 트레이스 디버그

이제 성능 패널에서 트레이스를 기록한 후 사전의 특정 컨텍스트를 선택하지 않고도 동일한 대화 내에서 Gemini와 전체 트레이스, 관련 성능 통계, 필드 데이터에 관해 채팅할 수 있습니다. 이렇게 하면 더 자세히 살펴보기 전에 성능 문제를 더 전체적으로 파악할 수 있습니다.

Gemini의 도움을 받아 잠재적인 문제를 파악한 후에는 추적 이벤트나 성능 통계와 같은 더 구체적인 컨텍스트 항목을 원활하게 선택하여 자세히 살펴보고 동일한 채팅을 계속할 수 있습니다.

마찬가지로 이제 성능 > 통계의 모든 통계를 Gemini와 채팅할 수 있습니다.

창 방향 전환

이제 드로어를 옆으로 이동할 수도 있습니다. 이렇게 하면 패널이 쌓이지 않고 나란히 표시됩니다. 기본 탭 표시줄에서 패널 이름을 마우스 오른쪽 버튼으로 클릭하고 서랍으로 이동을 선택하여 선택한 패널을 서랍으로 이동합니다.

⋮ > 도구 더보기에서 드로어에 패널을 추가합니다.

창에서 방향을 변경하는 새로운 전환 버튼

Google Developer Program

이제 Google 개발자 프로그램이 DevTools에 통합되어 프로필 관리용 직접 링크와 획득할 수 있는 새로운 배지가 제공됩니다.

DevTools 설정의 Google 개발자 프로필 컨트롤

배지는 선택 가능한 기능입니다. 배지를 사용 설정하려면 설정 > 환경설정 > 계정으로 이동하여 배지 획득을 전환합니다.

기타 주요 내용

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

  • 이제 애플리케이션 패널에서 서비스 워커, 공유 워커, 전용 워커를 비롯한 모든 워커 유형의 저장소를 검사할 수 있습니다.
  • :target-current이 스타일 패널에 표시됩니다.
  • 이제 네트워크 패널에서 새로운 Is ad-related 불리언을 기반으로 요청을 필터링할 수 있습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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