DevTools, Chrome 139의 새로운 기능

Sofia Emelianova
Sofia Emelianova
GitHub

더 안정적이고 생산적인 Chrome DevTools

이 버전에서 Chrome DevTools는 제품 우수성을 우선시했습니다. 여기에는 오래된 시각적 결함, 사용성 문제, 디자인의 불일치부터 성능 및 기능 문제에 이르기까지 다양한 알려진 문제를 해결하는 것이 포함되었습니다. 전반적으로 미해결 문제 수가 27% 감소했습니다.

오래된 문제를 해결하는 한편 성능 패널과 AI 지원과 같은 최신 기능도 개선했습니다. 그 결과 전반적으로 개발자 환경이 크게 개선되었습니다.

Google은 테스트 적용 범위를 개선하고, 복잡한 테스트 실패를 조사하고, 테스트를 더 강력한 기반으로 이전하고, 그 과정에서 발견된 버그를 해결하기 위해 대대적인 노력을 기울였습니다. 테스트 관련 문제 수를 54% 줄였습니다.

다양한 패널에서 이러한 수많은 미묘한 수정사항과 개선사항을 경험하여 일상적인 디버깅 및 개발 워크플로가 더 원활하고 안정적이며 생산적으로 이루어지기를 바랍니다.

스타일 지정을 위한 AI 지원에 이미지 업로드

이제 프롬프트에 시각적 맥락을 추가하기 위해 자동으로 스크린샷을 찍을 뿐만 아니라 AI 지원 패널에서 Gemini와의 채팅에 임의의 이미지를 업로드할 수도 있습니다.

DOM 요소를 선택하고 AI에 질문하기를 클릭하여 요소 패널에서 대화를 시작하면 요소가 대화 컨텍스트로 지정됩니다. 그런 다음 입력란에서 이미지 추가를 클릭합니다.

임의 이미지 업로드를 지원하기 전과 후

네트워크의 표에 요청 헤더 추가

이제 네트워크 패널에서 요청 표의 열 이름을 마우스 오른쪽 버튼으로 클릭하고 여러 요청 헤더를 선택하여 열로 추가할 수 있습니다.

메뉴에 '요청 헤더' 옵션을 추가하기 전과 후

Chromium 문제: 397481040

Google I/O 2025 주요 내용 확인하기

아직 사용해 보지 않았다면 Google I/O 2025에서 강조한 새로운 주요 Chrome DevTools 기능을 사용해 보세요.

또한 새로운 성능 통계인 중복된 JavaScript와 기존 JavaScript를 확인하세요.

기타 주요 내용

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

  • 애플리케이션: IndexedDB 객체 스토어는 되돌릴 수 없는 작업이므로 이를 삭제하는 확인 대화상자가 추가되었습니다 (crbug.com/326987147).
  • 소스: 코드 줄 옆에 있는 로그 포인트 및 조건부 중단점 배지에 마우스를 가져가면 해당 로그 메시지 또는 조건이 포함된 도움말이 표시됩니다 (crbug.com/40266230).

  • 성능:

    • 이제 레이아웃 변경 원인 통계에 크기가 지정되지 않은 이미지 링크가 표시됩니다 (crbug.com/416449602).
    • 이제 LCP 요청 탐색 통계에 가장 이른 시작 시간 후의 이미지 로드 지연이 표시됩니다.
    • 제한: 일부 사용자가 로컬에 저장한 제한 설정의 오래된 형식이 수정되었습니다.
    • 이벤트 로그: 필터링 속도가 향상되었습니다 (crbug.com/40783421).

  • 애니메이션: 애니메이션 그룹을 클릭하여 미리보기를 하면 유사하고 더 나은 환경을 제공하므로 미리보기 스크린샷이 지원 중단되었습니다 (crbug.com/330179643).

  • 접근성:

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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