DevTools의 새로운 기능 (Chrome 152)

Matthias Rohmer

게시일: 2026년 8월 25일

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

에이전트용 DevTools

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

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

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

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

새로 추가된 다시 전송 컨텍스트 메뉴 옵션, 사전 로드 요소로 복사 옵션, 페이로드 탭의 바이너리 디코딩 스위처가 표시된 Network 패널

  • Fetch 및 XHR 요청 재전송: 이전의 'XHR 재생' 컨텍스트 메뉴 항목이 이제 재전송 입니다. 이제 모든 가져올 수 있는 네트워크 요청을 지원하며, XHR과 함께 전체 재생 충실도를 유지하면서 표준 요청을 fetch() 호출로 변환합니다. 요청은 실행 컨텍스트와 콘솔 작성자를 추적하고 표시하기도 합니다.
  • 미리 로드된 열 및 '미리 로드 요소로 복사': 새로운 전용 미리 로드됨 열은 추측 미리 로드를 사용하여 네트워크 요청이 시작되었는지 여부를 표시합니다. 요청을 마우스 오른쪽 버튼으로 클릭하고 미리 로드 요소로 복사를 선택하여 HTML에 삭제할 준비가 된 <link rel="preload"> 태그를 생성할 수도 있습니다. 이제 초기 힌트가 시작자 열 아래에 분류됩니다.
  • 요청 페이로드용 바이너리 뷰어: 이제 페이로드 탭에 응답 탭을 미러링하는 바이너리 및 압축된 요청 페이로드의 디코딩 메서드 옵션 (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

콘솔: 표를 Markdown 또는 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)
  • 문제: DevTools에서 loading="lazy" 에 명시적 width 또는 height 크기가 없으면 경고를 표시합니다.
  • 기기 모드: 통합된 창에 맞춤 옵션으로 확대/축소 수준 메뉴를 간소화하고 프레임 그래픽을 사용할 수 없는 경우 기기 프레임 표시 전환 버튼을 사용 중지했습니다.

접근성 개선

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

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