Chrome 137의 DevTools의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025 버전

Chrome DevTools는 올해 Google I/O에서 큰 역할을 할 예정입니다. 라이브 세션과 녹화 세션이 혼합되어 있습니다.

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

또한 2025년 5월 20일 오후 4시 30분(PT)에 레이첼 앤드류의 웹 관련 새로운 소식 세션을 시청하세요.

최신 하이라이트에 대한 간단한 개요를 확인하려면 최신 동영상을 시청하세요.

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 지원 패널에서 Take screenshot 버튼을 클릭하여 페이지의 스크린샷을 캡처하고 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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.