Chrome 137의 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025 에디션

올해 Google I/O에서 Chrome DevTools가 큰 비중을 차지할 예정입니다. 라이브 세션과 녹화된 세션이 혼합되어 제공됩니다.

흥미로운 새로운 기능에 대해 알아보려면 다음을 시청하세요.

또한 2025년 5월 20일 오후 4시 30분(PT)에 진행되는 Rachel Andrew의 웹의 새로운 기능 세션도 시청하세요.

최신 동영상을 통해 최신 주요 소식을 간략하게 살펴보세요.

Gemini로 작업공간의 CSS 변경사항 수정 및 저장

이제 몇 번의 클릭만으로 Gemini가 CSS를 수정하고 수정할 수 있으며, 연결된 작업공간 폴더를 사용하면 변경사항을 컴퓨터의 소스 파일에 다시 저장할 수 있습니다.

자동 워크스페이스는 실험 단계에 있는 기능입니다. 기존 소스 폴더를 연결하거나 데모를 사용해 볼 수 있습니다.

작업공간 폴더가 연결된 상태에서 요소 패널에서 AI에게 물어보기를 클릭하고, Gemini에게 CSS를 수정해 달라고 요청하고, 계속을 클릭하여 변경사항을 라이브로 테스트한 다음, 저장되지 않은 변경사항을 펼치고, 작업공간에 적용을 클릭하고, 차이점을 검토하고, 모두 저장을 클릭합니다.

작업공간 폴더를 연결하고 변경사항을 소스 파일에 다시 저장

이제 자동으로 (또는 수동으로) 작업공간 폴더를 연결하여 DevTools에서 JavaScript, HTML, CSS 변경사항을 컴퓨터에 저장된 소스 파일에 다시 저장할 수 있습니다.

JavaScript에서 작동하는 방식은 다음과 같습니다.

Chromium 문제: 404170628

실적 통계에 관해 Gemini에게 물어보기

이제 버튼을 클릭하여 Gemini와 채팅을 시작하고 다음 실적 통계를 조사하고 조치를 취할 수 있습니다.

  • 단계별 LCP
  • LCP 요청 검색
  • 렌더링 차단 요청
  • 레이아웃 변경 원인
  • 문서 요청 지연 시간

성능 패널의 통계에 'AI에 질문하기' 버튼을 추가하기 전과 후

이 기능에 대한 의견이 있으면 crbug.com/371170842에 남겨주세요.

Gemini로 실적 결과에 주석 달기

이제 Gemini에게 성능 트레이스의 이벤트에 관한 주석을 생성해 달라고 요청할 수 있습니다.

기본 트랙에서 이벤트를 더블클릭한 다음 입력 필드 옆에 있는 라벨 생성을 클릭합니다. Gemini는 스택 트레이스와 컨텍스트를 기반으로 라벨을 제안할 수 있습니다.

Gemini와의 채팅에 스크린샷 추가하기

이제 AI 지원 패널에서 스크린샷 찍기 버튼을 클릭하여 페이지의 스크린샷을 캡처하고 Gemini와의 채팅에 제출할 수 있습니다.

스크린샷을 사용하여 프롬프트에 시각적 맥락을 추가할 수 있습니다. 예를 들어 표시되는 모든 버튼의 간격이 동일한지 확인할 수 있습니다.

'AI 지원' 패널에 '스크린샷 찍기' 버튼을 추가하기 전과 후

성능 패널의 새로운 통계

이 버전에서는 성능 패널에 중복된 JavaScript와 레거시 JavaScript라는 두 가지 새로운 통계가 추가됩니다.

중복된 JavaScript

새로운 성능 > 통계 > 중복된 JavaScript에서는 페이지에 있는 경우 번들에서 중복된 대형 JavaScript 모듈의 요청을 네트워크 트랙에서 강조 표시합니다.

성능 패널의 '중복된 JavaScript' 통계

통계에서 트리맵 보기를 클릭하여 JavaScript 종속 항목을 살펴볼 수도 있습니다.

기존 JavaScript

새로운 성능 > 통계 > 레거시 JavaScript는 페이지에 있는 경우 네트워크 트랙에서 레거시 JavaScript 요청을 강조 표시합니다. 예를 들어 이전 브라우저에서 새로운 JavaScript 기능을 사용할 수 있도록 하는 폴리필 및 변환이 있습니다. 하지만 최신 브라우저에서는 대부분 필요하지 않습니다.

성능 패널의 '기존 JavaScript' 통계

이제 추측에서 규칙 태그 지원

이제 애플리케이션 > 추측 로드에 태그가 있는 경우 규칙 세트의 URL 대신 태그가 표시됩니다.

규칙 세트 URL을 태그로 대체하기 전과 후

Chromium 문제: 393408589

Lighthouse 12.6.0

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

이 버전에서 가장 주목할 만한 점은 Lighthouse가 성능 통계 감사로 이동한다는 것입니다. 이제 Lighthouse 보고서의 성능 카테고리에서 유용한 정보 사용해 보기를 사용할 수 있습니다.

Lighthouse 보고서에서 통계로 전환하는 옵션을 추가하기 전후

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

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

Chromium 문제: 40543651

기타 하이라이트

이번 출시의 주목할 만한 수정사항과 개선사항은 다음과 같습니다.

  • 네트워크: 알려진 서버 타이밍 형식의 파싱이 추가되었습니다.
  • 이제 Cmd/Ctrl + 클릭으로 표에서 행을 선택 해제할 수 있습니다 (Chromium 문제: 409474445).
  • 성능 > 통계 > 효율적인 캐시 수명 사용에서 TTL이 30일 이상인 애셋이 무시됩니다.

접근성

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

  • 성능: 트레이스의 이니시에이터 화살표가 이제 더 잘 보입니다.
  • 요소: 이제 단축키 A를 사용하여 전체 페이지 접근성 트리 뷰를 전환할 수 있습니다 (Chromium 문제: 40888478).

  • 이제 스크린 리더에서 다음과 같은 내용을 알립니다.

    • 코드 블록에서 복사할 때 '클립보드에 복사됨'
    • AI 지원 채팅에서 작업공간에 변경사항을 적용할 때 '작업공간에 적용'
    • 실적 > 주석에서 AI에 라벨 생성을 요청하면 '라벨 생성 중'이라고 표시됩니다.
    • AI 지원 채팅에 추천 프롬프트가 있습니다.
    • 실적 > 통계에서 관련 통계의 예상 절감액을 읽어줍니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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