DevTools의 새로운 기능 - 2026년 11월

Matthias Rohmer

게시일: 2026년 10월 20일

Chrome 155와 Chrome 156이 10월에 안정화 버전으로 출시되어 11월에 브라우저에 새로운 디버깅 및 작성 기능이 추가되었습니다. 에이전트용 DevTools의 CSS 스타일 검사, Elements의 CSS 앵커 위치 지정을 위한 대화형 position-area 편집기, Application의 웹 설치 매니페스트 및 광고 출처 진단이 여기에 해당합니다. 또한 메모리에서 데드 컨텍스트 변수를 감지하고, 네트워크에서 사전 로드 경고 및 영구 재정의에 관한 Early Hints를 검사하고, 성능에서 타임라인을 더 원활하게 탐색할 수 있습니다.

앵커 위치 지정 오버레이 옆에 있는 요소 패널 스타일 탭의 시각적 위치 영역 편집기에서 앵커 그리드 영역을 선택합니다.
앵커 포지셔닝 오버레이 옆에 있는 요소 패널 스타일 탭의 시각적 위치 영역 편집기에서 앵커 그리드 영역 선택

에이전트용 DevTools

Chrome DevTools MCP 서버는 코딩 에이전트를 위한 CSS 스타일 검사, 구성 파일 지원, 청크된 trace 파싱을 추가합니다.

  • CSS 스타일 검사: 페이지 매김 (pageSize 및 pageIdx)을 지원하고 일치하는 규칙, 상속된 규칙, 가상 요소, @keyframes, @ 규칙 (@position-try, @property, @function)의 형식을 지정하는 get_css_styles 도구를 사용하여 계산된 스타일과 일치하는 스타일을 검사합니다.
  • 구성 파일 및 경로 제어: 전용 구성 파일로 서버 플래그를 관리하고, 커스텀 파일 시스템 루트를 구성하고, CLI에서 기본적으로 --allow-unrestricted-paths를 사용합니다.
  • 청크된 트레이스 버퍼 파싱: 청크된 트레이스 버퍼 파서와 1.2GB 기본 트레이스 버퍼를 사용하여 대규모 성능 기록을 파싱합니다. 또한 DevTools는 메모리 누수를 방지하기 위해 파싱당 trace 엔진 인스턴스의 범위를 지정합니다.
  • 대화상자 처리 및 콘솔 지속성: 입력 도구 작업 중에 트리거된 JavaScript 대화상자를 자동으로 처리하고 동일한 문서 탐색에서 콘솔 메시지 기록을 보존합니다.
  • 메뉴 업데이트: DevTools 기본 메뉴에서 에이전트용 Chrome DevTools 가져오기를 클릭하여 설정 안내를 엽니다.

chrome-devtools-mcp 저장소에서 자세히 알아보세요.

요소: 시각적 position-area 편집기, 암시적 앵커 선택, CSS 작성 업데이트

요소 패널에 CSS 앵커 포지셔닝을 위한 시각적 도구가 도입되고 CSS 검사가 확장됩니다.

  • 시각적 position-area 편집기: 스타일 탭의 position-area 선언 옆에 있는 인라인 견본을 클릭하여 앵커 그리드 영역을 시각적으로 선택하고, 축을 동시에 또는 개별적으로 구성하고, self 키워드를 전환하고, 축이 없는 키워드를 줄입니다.
  • 팝오버 어도너의 암시적 앵커 선택: 요소에 여러 암시적 앵커가 있는 경우 DOM 트리에서 팝오버 어도너를 마우스 오른쪽 버튼으로 클릭하여 연결된 앵커 요소를 검사하고 이동합니다.
  • 앵커 위치 지정 상자 오버레이: 앵커 위치 지정 요소를 디버깅할 때 표시 영역 오버레이에서 직접 인셋 수정 포함 블록 (IMCB) 여백, 패딩, 테두리, 콘텐츠 상자를 검사합니다.
  • Flexbox 편집기의 wrap-reverse: 스타일 탭의 시각적 Flexbox 편집기에서 직접 flex-wrap: wrap-reverse를 전환합니다.
  • @starting-style의 비활성 CSS 스타일 및 상속된 규칙: 업데이트 전반에서 수동 펼치기 및 접기 상태가 유지된 비활성 @starting-style 규칙 및 Inherited from 섹션을 검사합니다.
  • 다중 대시 맞춤 속성 및 클래스 자동 완성: 3개 이상의 대시로 시작하는 CSS 맞춤 속성 (예: ---theme-color)을 검사하고 수정하며, 새 클래스 추가 자동 완성 추천에서 이미 적용된 클래스를 필터링합니다.
Elements 패널 DOM 트리에서 팝오버 어도너 컨텍스트 메뉴를 통해 암시적 앵커 요소를 선택합니다.
Elements 패널 DOM 트리의 팝오버 어도너 컨텍스트 메뉴에서 암시적 앵커 요소 선택

Chromium 문제: 553335561, 438724570, 413061413, 397184392, 539424116, 533783988

애플리케이션: 웹 설치 매니페스트 진단, 광고 출처, 저장용량 표 업데이트

애플리케이션 및 문제 패널에 웹 설치 매니페스트, 광고 스크립트 출처, 저장소 검사를 위한 진단이 추가됩니다.

  • 웹 설치 매니페스트 진단: Issues 패널에서 웹 설치 (navigator.install 및 <install>) 매니페스트 오류를 검사합니다. 가져오기 실패, 문법 오류, 잘못된 start_url 값, 누락된 이름 또는 ID, 누락된 매니페스트가 포함되며 영향을 받는 매니페스트 파일에 대한 직접 링크가 제공됩니다.
  • 광고 출처 열 및 측정항목 문서: 애플리케이션 패널의 광고 섹션에 있는 새로운 광고 출처 열을 확인하여 광고 스크립트가 상위 스크립트 체인 또는 필터 목록 규칙과 일치하는지 확인합니다. 광고 측정항목에 관한 문서 도움말과 자세히 알아보기 링크도 함께 표시됩니다.
  • IndexedDB 및 쿠키 테이블 인체공학: 스크롤 위치를 유지하는 동적 행 높이를 사용하여 IndexedDB 데이터 그리드에서 중첩된 객체를 펼치고 키보드 또는 컨텍스트 메뉴를 사용하여 쿠키 테이블에서 선택한 행을 삭제합니다.
Application 패널 Ads 섹션의 Ad provenance 열과 ancestry 도움말, Issues 창의 Web Install manifest 오류를 검사합니다.
Application 패널 Ads 섹션의 Ad provenance 열과 ancestry 도움말, Issues 창의 Web Install manifest 오류

Chromium 문제: 333795265, 553428200, 514957134, 555304817, 555304814, 562142155

네트워크: Early Hints 미리 로드 경고 및 영구 재정의

네트워크 패널은 사전 힌트 진단, 로컬 재정의, 맞춤 헤더 워크플로를 미세 조정합니다.

  • 캐시가 사용 중지된 경우 Early Hints 미리 로드 경고: 캐시 사용 중지가 활성 상태인 동안 103 Early Hints 응답에 미리 로드 링크가 포함된 경우 Early Hints 헤더 섹션에 경고가 표시되어 Chrome에서 이러한 미리 로드를 무시하는 이유를 설명합니다.
  • 영구 로컬 재정의 및 맞춤 헤더 열: 페이지 탐색 전반에 걸쳐 로컬 응답 본문 재정의를 제공하고, 새로고침 전반에 걸쳐 맞춤 요청 및 응답 헤더 열 구성과 정렬 순서를 유지하며, 컨텍스트 메뉴에서 잘린 원시 요청 페이로드를 복사합니다.
캐시 사용 중지 및 로컬 응답 재정의가 활성화된 상태에서 Network 패널 헤더 탭의 사전 로드 경고에 대한 사전 힌트를 검사합니다.
캐시 사용 중지 및 로컬 응답 재정의가 활성화된 상태에서 네트워크 패널 헤더 탭의 Early Hints 미리 로드 경고 검사

Chromium 문제: 548701038, 559925510, 563542902, 556269542, 377410082

메모리: 힙 스냅샷의 데드 컨텍스트 필드 감지

이제 메모리 패널에서 V8 실행 컨텍스트에 유지되는 사용되지 않는 클로저 변수를 감지합니다. DevTools는 힙 스냅샷에 삽입된 V8 범위 메타데이터를 파싱하여 클로저를 공유 Context 객체와 연결합니다. 그런 다음 활성 클로저가 액세스하지 않을 때 형제 장기 클로저에 의해 활성 상태로 유지되는 비활성 컨텍스트 필드를 메모리 영향별로 정렬하여 강조 표시합니다.

Memory 패널에서 컨텍스트에 보관된 객체로 힙 스냅샷을 필터링하여 공유 V8 실행 컨텍스트에 보관된 데드 컨텍스트 변수를 검사합니다.
메모리 패널에서 컨텍스트에 의해 유지되는 객체로 힙 스냅샷을 필터링하여 공유 V8 실행 컨텍스트에 의해 유지되는 데드 컨텍스트 변수를 검사합니다.

Chromium 문제: 497855658

성능: 더 원활한 타임라인 탐색 및 보존된 호출 트리 상태

성능 패널은 더 반응성이 뛰어난 Flame Chart 탐색을 제공하고 패널 전반에서 분석 컨텍스트를 유지합니다.

  • 더 원활한 타임라인 탐색: 타임라인 미니맵을 확대/축소, 화면 이동, 드래그할 때 더 이상 지연이 발생하지 않습니다.
  • 호출 트리 및 상향식 상태 유지: 호출 트리 및 상향식 탭에서 확장된 노드, 선택 항목 또는 스크롤 위치를 잃지 않고 DevTools 패널 간에 전환합니다.
Performance 패널 Call tree 탭에서 확대된 타임라인 미니맵 범위와 펼쳐진 JavaScript 활동 노드 검사
Performance 패널 Call tree 탭에서 확대된 타임라인 미니맵 범위와 확장된 JavaScript 활동 노드 검사

Chromium 문제: 553831653, 561396590

기타

Chrome 155 및 Chrome 156에는 DevTools 패널 전반에 걸쳐 다음과 같은 개선사항도 포함되어 있습니다.

  • 센서: 센서 패널의 새로운 CPU 성능 등급 컨트롤에서 직접 navigator.cpuPerformance를 재정의하거나 활성 CPU 제한 사전 설정을 반영하도록 합니다. (Chromium 문제: 449760252, 526856234, 526857820)
  • 기기 모드: 에뮬레이션된 기기별로 배율 및 자동 조정 확대/축소 환경설정을 유지하고 기기 툴바를 전환할 때 Save-Data 재정의를 유지합니다. (Chromium 문제: 561306841, 555160483)
  • 색상 선택 도구: 어두운 배경의 밝은 텍스트에 대한 APCA 대비 색상 추천을 확인하고 색 영역을 벗어난 색상을 NaN 값 없이 oklab() 및 oklch()로 변환합니다. (Chromium 문제: 560325669, 558821258)
  • 접근성: 색상이 없는 표시기 점으로 활성 정규 표현식 필터 전환을 식별하고, CSS 개요에서 스크린 리더가 읽어주는 글꼴 속성 이름을 듣고, 패널 전반에서 개선된 키보드 포커스 링과 고대비 가시성으로 탐색합니다. (Chromium 문제: 556764882, 555848535, 555599825, 553804654)
센서 창에서 CPU 성능 등급을 재정의하고 색상 선택 도구에서 대비율 추천 및 oklch 값을 검사합니다.
센서 창에서 CPU 성능 등급을 재정의하고 색상 선택 도구에서 대비율 추천 및 oklch 값을 검사합니다.

Chromium 문제: 449760252, 526856234, 526857820, 561306841, 555160483, 560325669, 558821258, 556764882, 555848535, 555599825, 553804654