DevTools의 새로운 기능 (Chrome 152)

Matthias Rohmer

게시일: 2026년 8월 25일

Chrome 152에서는 요청 재전송 및 바이너리 페이로드 검사, 맞춤 요소 장식 및 요소의 향상된 CSS 중첩, 성능 실시간 측정항목의 소프트 탐색을 위한 Core Web Vitals, 콘솔의 구조화된 표 내보내기, DevTools MCP 서버 개선을 통해 네트워크 디버깅이 크게 개선되었습니다.

상담사용 DevTools

최신 v1.7.0 버전의 Chrome DevTools MCP 서버는 이전에 도입된 Antigravity, Claude, Codex 등의 코딩 에이전트용 메모리 디버깅 기능을 빌드합니다.

  • 힙 스냅샷 객체 세부정보 (get_heapsnapshot_object_details): 힙 스냅샷에서 직접 자세한 JavaScript 객체 속성, 클래스 이름, GC 루트 유지 경로를 검사합니다.
  • 네이티브 V8 컨텍스트 필터링: 네이티브 실행 컨텍스트별로 힙 스냅샷 객체를 필터링하고 스냅샷 요약에서 네이티브 컨텍스트를 검사합니다.
  • 데몬 안정성 및 수명 주기 개선: 탐색당 제한된 네트워크 요청 보관, 세션 ID 유효성 검사, CLI-데몬 버전 불일치 경고, 컨텍스트 삭제 시 정상적인 작업자 해체가 추가되었습니다.

자세한 내용을 알아보고 시작하려면 GitHub의 에이전트용 DevTools 저장소를 참고하세요.

네트워크: 요청 수정 및 재전송, 미리 로드 통계, 바이너리 페이로드 디코딩

네트워크 패널에 가져오기 요청의 새로운 다시 보내기 컨텍스트 메뉴 옵션, 사전 로드 요소로 복사 옵션, 페이로드 탭의 바이너리 디코딩 전환기가 표시되어 있습니다.

  • 가져오기 및 XHR 요청 다시 보내기: 이전의 'XHR 재생' 컨텍스트 메뉴 항목이 이제 다시 보내기로 변경되었습니다. 이제 가져올 수 있는 모든 네트워크 요청을 지원하며, XHR과 함께 전체 리플레이 충실도를 유지하면서 표준 요청을 fetch() 호출로 변환합니다. 요청은 실행 컨텍스트와 콘솔 발신자를 추적하고 표시하기도 합니다.
  • 미리 로드됨 열 및 '미리 로드 요소로 복사': 새로운 전용 미리 로드됨 열은 추측 미리 로드를 사용하여 네트워크 요청이 시작되었는지 여부를 표시합니다. 요청을 마우스 오른쪽 버튼으로 클릭하고 프리로딩 요소로 복사를 선택하여 HTML에 바로 삽입할 수 있는 <link rel="preload"> 태그를 생성할 수도 있습니다. 이제 Early Hints가 Initiator 열 아래에 분류됩니다.
  • 요청 페이로드용 바이너리 뷰어: 이제 페이로드 탭에 바이너리 및 압축 요청 페이로드용 디코딩 방법 옵션 (Base64, 16진수, UTF-8)이 포함되어 응답 탭을 미러링합니다.
  • 고정된 요청 번호 열: 이제 요청 # 열이 네트워크 데이터 그리드의 첫 번째 위치에 고정되어 요청을 더 쉽게 참조할 수 있습니다.
  • 동일 사이트 호스트 필터링: 이제 네트워크 필터 표시줄에서 도메인, 호스트 이름 또는 포트(예: localhost 또는 example.com)를 검색하면 동일 사이트 요청이 정확하게 필터링됩니다.
  • 기본 쿼리 매개변수 디코딩: 이제 페이로드 탭의 쿼리 및 양식 매개변수가 모든 요청에 대해 자동으로 디코딩됩니다.

Chromium 문제: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

요소: 맞춤 요소 장식, 중첩된 CSS 상위 선택기 상호작용, $0 의사 요소 선택

맞춤 요소 어도너 배지가 맞춤 HTML 태그 옆에 표시되고 중첩된 CSS 규칙에서 상위 선택자를 마우스로 가져가 페이지에서 일치하는 요소를 강조 표시하는 요소 패널 DOM 트리

요소 패널에서 웹 구성요소와 최신 CSS를 검사하고 작성하는 것이 더 빠르고 직관적입니다.

  • 맞춤 요소 어도너 배지: 이제 맞춤 HTML 요소 (하이픈 태그 또는 맞춤 내장 요소의 is="..." 속성으로 식별됨)가 DOM 트리 개요에 custom-element 어도너 배지를 표시합니다.
  • 중첩된 CSS 상위 선택자 상호작용 및 구체성: 이제 중첩된 CSS 규칙 및 상속된 중첩 규칙에서 상위 선택자 위로 마우스를 가져가면 페이지에서 일치하는 요소가 강조 표시되고 스타일 탭 필터링에 응답합니다. @nested-declarations 규칙에 대한 구체성 도움말 팝오버가 추가되었습니다.
  • $0를 통한 가상 요소 선택: 이제 요소 DOM 트리에서 ::before 또는 ::after와 같은 가상 요소를 선택하면 즉시 JavaScript 검사를 위해 $0 콘솔 변수에 직접 바인딩됩니다.
  • text-wrap 및 <image> 유형의 자동 완성: 이제 스타일 창에서 text-wrap (wrap, nowrap, balance, pretty, stable)의 모든 키워드 값을 제안하고 <image> 데이터 유형을 허용하는 CSS 속성을 자동 완성합니다.
  • 박스 모델 스크롤바 인식: 이제 요소에 표시되는 스크롤바가 있는 경우 박스 모델 측정항목 다이어그램에서 콘텐츠 박스 크기를 정확하게 계산하고 렌더링합니다.

Chromium 문제: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

성능: 실시간 측정항목의 소프트 탐색 측정항목 및 맞춤 스크린샷 사전 설정

소프트 탐색의 Core Web Vitals를 표시하는 성능 패널 실시간 측정항목 섹션

  • 소프트 탐색을 위한 실시간 측정항목 지원: 이제 실시간 측정항목 뷰에서 web-vitals v6.0.0으로 업그레이드되어 단일 페이지 애플리케이션의 클라이언트 측 소프트 탐색에 대한 Core Web Vitals (예: LCP 및 INP)을 기본적으로 캡처하고 보고합니다.
  • 맞춤 스크린샷 캡처 사전 설정: 성능 패널에서 CDP 추적을 위해 구성 가능한 스크린샷 프레임 크기 및 개수 제한 사전 설정을 노출하여 메모리 예산 내에서 시각적 녹화 충실도를 맞춤설정합니다.
  • console.profileEnd() 추적 표시기: 이제 코드나 콘솔에서 console.profileEnd()를 호출하면 기록된 추적이 성능 패널에서 자동으로 열리고 표시됩니다.
  • 확장성 API 맞춤 트랙 요약: 이제 성능 트레이스 요약에서 확장성 API를 사용하여 등록된 맞춤 트랙 그룹을 처리하고 표시합니다.

Chromium 문제: 514721939, 490140054, 536954453, 535506117

콘솔: 테이블을 마크다운 또는 CSV로 내보내기 및 부작용 보호

  • 콘솔 표를 Markdown 또는 CSV로 복사: 이제 console.table()를 사용하여 로깅된 표를 컨텍스트 메뉴에서 포맷된 Markdown 표 또는 CSV 데이터로 클립보드에 직접 복사할 수 있습니다.
  • 부작용 평가 보호: 디버거의 마우스 오버 평가가 이제 new, 태그된 템플릿 리터럴, 동적 import(), delete 연산자가 포함된 표현식을 방지하여 일시중지된 동안 실수로 상태가 변경되는 것을 방지합니다.

Chromium 문제: 40924951, 40133606

기타

다른 DevTools 하위 시스템의 주목할 만한 개선사항 모음:

  • 소스: 이제 빠른 열기에서 점수가 크게 향상된 로컬 작업공간 파일의 우선순위를 지정하여 작업공간 파일이 네트워크 리소스 위에 표시됩니다. (Chromium 문제: 40260136)
  • 메모리: 이제 힙 스냅샷 요약 뷰에 선택한 유형의 집계된 얕은 크기와 함께 총 객체 수가 표시되며 네이티브 실행 컨텍스트 필터가 포함됩니다. (Chromium 문제: 497855658)
  • 애플리케이션: 광고 패널에서 광고 강조 표시 전환 버튼을 패널로 직접 이동하고, 클릭 가능한 광고 iframe 요소 ID를 추가하여 계층 구조의 프레임을 표시하고, 프레임별 측정항목 분석 표를 도입했습니다. (Chromium 문제: 514957134)
  • 애플리케이션: 스토리지 창의 사이트 데이터 삭제 섹션을 통합된 그룹으로 재설계하고 (Chromium 문제: 375867286) 뒤로/앞으로 캐시 복원 후 중복된 캐시 스토리지 항목을 해결했습니다 (Chromium 문제: 484693244).
  • 확장 프로그램: 이제 chrome.devtools.panels 전반의 비동기 메서드는 콜백 없이 호출될 때 JavaScript 프로미스를 기본적으로 반환합니다. (Chromium 문제: 496604551)
  • 설정: 기본 네트워크 제한 사전 설정과 맞춤 제한 구성을 별도의 섹션으로 분리합니다. (Chromium 문제: 342409451)
  • Lighthouse: 번들로 제공되는 Lighthouse 모듈이 버전 13.4.1로 업데이트되었습니다. (Chromium 문제: 40543651)
  • 문제: loading="lazy"를 사용하는 이미지에 명시적인 width 또는 height 크기가 없으면 DevTools에서 경고를 표시합니다.
  • 기기 모드: 통합된 창에 맞추기 옵션으로 확대/축소 수준 메뉴를 간소화하고 프레임 그래픽을 사용할 수 없는 경우 기기 프레임 표시 전환을 사용 중지했습니다.

접근성 개선

Chrome 152에는 다음과 같은 접근성 개선사항이 포함되어 있습니다.

  • 요소 및 접근성: 요소 DOM 트리와 접근성 트리 보기 간에 원활하게 전환할 수 있는 컨텍스트 메뉴 옵션과 접근성 노드의 '보기로 스크롤'이 추가되었습니다. (Chromium 문제: 417929842)
  • 접근성: 컨텍스트 메뉴를 사용하여 접근성 트리 노드와 하위 트리를 일반 텍스트로 복사하는 지원이 추가되었습니다. (Chromium 문제: 417929842)
  • 요소: 어두운 모드에서 실행할 때 요소 패널의 대비가 낮은 검색 강조 표시 색상이 수정되었습니다. (Chromium 문제: 491718898)
  • 탐색: DevTools를 별도의 창으로 도킹 해제하거나 탭으로 다시 도킹해도 더 이상 기본 메뉴 버튼에 포커스가 강제되지 않습니다.
  • 설정: AI 설정의 '더보기' 및 '간략히 보기' 버튼에 설명이 포함된 접근성 컨텍스트가 추가되었습니다.