DevTools 최신 업데이트 - 2026년 10월

원문: New in DevTools - October 2026
— Chrome Developers 원문은 CC-BY-4.0
라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.

DevTools 최신 업데이트 - 2026년 10월

Chrome 153 및 Chrome 154가 지난달 안정 버전으로 출시되었으며, 개발 워크플로우에 적용할 수 있는 다양한 개선 사항을 제공합니다. 이번 업데이트에서는 에이전트용 DevTools의 세밀한 JavaScript 실행 제어, Application 패널의 광고 스크립트 추적, Performance 패널의 전체 소프트 네비게이션 지원 및 CPU 성능 계층 재정의, Elements 패널의 비활성 스타일 및 키보드 접근 가능 애드오너 지원, AI 지원 기능의 소스 검사 및 성능 추적 녹화, Device Mode의 현대화된 기기 사전 설정 등이 포함됩니다.

에이전트용 DevTools

Chrome DevTools MCP 서버는 코딩 에이전트를 위한 새로운 보안 제어, 성능 튜닝 및 메모리 분석 기능을 제공합니다.

Agent Plugins 1.0 패키지: Agent Plugins 1.0 패키지 지원이 추가되어 에이전트가 모듈식 플러그인 확장을 로드하고 실행할 수 있습니다.
JavaScript 실행 제어:
```
--no-javascript-evaluation
```
을 설정하거나 JavaScript 실행 도구를 비활성화하여 스크립트를 평가하지 않고 페이지를 검사할 수 있으며, 이는 네비게이션 및 초기화 스크립트에 걸쳐 확장됩니다.
요청 시 소스 맵: 소스 맵을 비활성화하고 요청 시 소스 맵을 지연 로드하는 옵션이 추가되어 대규모 사이트에서의 높은 메모리 사용을 방지합니다.
구성 가능한 파일 시스템 루트 및 CLI 경로 권한: CLI는 이제 기본적으로
```
--allow-unrestricted-paths
```
를 포함하며 구성 가능한 파일 시스템 루트를 지원합니다.
힙 스냅샷 검사:
```
query_heapsnapshot
```
으로 유지된 크기 또는 속성 이름별로 직접 개체를 쿼리하고, 엣지의 자체 및 유지된 크기를 보고, V8 실행 컨텍스트에서 유지된 메모리를 검사합니다.
PWA 자동화 도구: Progressive Web App 설치 및 라이프사이클 검사를 자동화하기 위한 전용 도구가 추가되었습니다.
콘솔 스택 트레이스:
```
list_console_messages
```
를 사용하여 콘솔 메시지를 나열할 때 선택적 스택 트레이스를 검색합니다.

chrome-devtools-mcp 리포지토리

에서 자세히 알아보세요.

Application: 광고 섹션의 광고 스크립트 추적 및 쿠키 플래그 편집

Chrome 사용자 경험 보고서(CrUX)를 위한 네 가지 실험적 광고 지표 도입에 따라, 이 새로운 하위 패널은 페이지 전체의 광고 관련 정보를 디버깅하고 최적화할 수 있는 중앙 집중식 위치를 제공합니다. 여기에는 다음이 포함됩니다.

새로운 실험적 지표 대시보드: 뷰포트 광고 밀도, 뷰포트 광고 수, 광고별 총 CPU 사용량, 광고별 총 네트워크 사용량.
광고 요소별 CPU 및 네트워크 사용량 세분화.
주요 프레임의 광고 스크립트 목록.
페이지의 광고를 강조 표시하는 토글.

새로운 광고 지표에 대한 자세한 내용은 문서

에서 확인하세요.

Application 패널의 광고 탭에 새로운 광고 스크립트 테이블이 표시되고 Sources에서 광고 스크립트가 표시됩니다.

Chromium 이슈: 514957134

, 512927903

, 540469610

Performance: 전체 소프트 네비게이션 지원, CPU 성능 계층 재정의 및 확장 트랙 검색

Performance 패널은 엔드투엔드 소프트 네비게이션 측정, 하드웨어 보정 재정의 및 더 깊은 추적 검색을 제공합니다.

전체 소프트 네비게이션 지원: Chrome 152
의 Live Metrics 및 추적 보기에서 소프트 네비게이션 지원 도입에 따라, 이제 Insights에서 소프트 네비게이션 분석을 사용할 수 있어 Performance 패널에서 소프트 네비게이션 측정을 위한 완전한 엔드투엔드 지원을 제공합니다.
CDP를 통한 CPU 성능 계층 재정의: DevTools는 이제 Chrome DevTools Protocol (
```
Emulation.setCPUPerformanceOverride
```
)을 통해 보정된 CPU 성능 계층 재정의를 구성, 계산 및 디스패치하는 것을 지원하여 하드웨어 계층 간의 재현 가능한 성능 테스트를 가능하게 합니다.
플레임 차트의 확장 트랙 검색: Performance 패널 플레임 차트에서
```
Ctrl+F
```
를 누르면 Extensibility API를 사용하여 등록된 사용자 지정 트랙의 항목이 일치하며, 툴팁 텍스트, 속성 및 사용자 세부 정보를 검색합니다.
CPU 프로필 스레드 시각화: Performance 패널 플레임 차트는 이제 CPU 프로필 샘플만 포함하는 스레드를 렌더링하여 WebAssembly 스레드와 같은 백그라운드 실행이 타임라인 보기에도 표시되도록 합니다.

Performance 패널의 소프트 네비게이션 엔드투엔드 워크플로우.

Chromium 이슈: 449760252

, 483092899

, 540020488

Elements: 비활성 스타일, 키보드 접근 가능 애드오너 및 트리 개요 수정

Elements 패널에서 CSS 검사 및 작성이 더 빠르고 접근 가능해졌습니다.

비활성 스타일 지원: DevTools는 더 이상 적용되지 않는 스타일 규칙을 비활성 시각적 표시기로 명확하게 구분하여 계속 표시할 수 있습니다. Settings에서 비활성 스타일을 활성화하고 접힘 동작을 구성합니다.
키보드 접근 가능 애드오너: DOM 트리 내의 대화형 애드오너( View Source, Starting Style, Scroll Snap, Reveal 포함)는 이제 키보드로 초점을 맞출 수 있으며
```
Enter
```
또는
```
Space
```
로 활성화할 수 있습니다.
드래그 앤 드롭 재정렬: DOM 트리에서 요소를 드래그하여 DOM 노드를 재정렬하는 기능이 이제 섀도우 DOM 경계를 넘어서도 안정적으로 작동하며, 명확한 드롭 위치 표시기가 제공됩니다.
더 부드러운 CSS 속성 토글: Styles 탭에서 CSS 속성 체크박스를 토글해도 중복 UI 다시 칠하기나 시각적 깜박임이 발생하지 않습니다.

Elements 패널에 비활성 CSS 규칙이 표시됩니다.

Chromium 이슈: 539424116

, 554057179

, 555088527

, 548477554

Device Mode: 폼 팩터별로 그룹화된 현대화된 기기 사전 설정

Device Mode 도구 모음과 Settings > Devices 보기에서 에뮬레이션된 하드웨어가 명확한 범주로 구성됩니다.

폼 팩터 그룹화: 에뮬레이션된 기기는 이제 Mobile, Foldables, Tablets & Desktops, Smart Displays로 그룹화됩니다.
업데이트된 하드웨어 카탈로그: iPhone 16, Pixel 9, Pixel 10, Galaxy Z Fold 6, iPad Pro 13", Nest Hub Max를 포함한 최신 사전 설정을 추가하고 오래된 레거시 기기 정의는 중단했습니다.

Device Mode에 폼 팩터별로 그룹화된 현대화된 기기 사전 설정이 표시됩니다.

Chromium 이슈: 526856234

, 526857820

Network: Console에서 Fetch로 편집 및 재전송, 로컬 재정의 보안

네트워크 요청 검사 및 디버깅 워크플로우가 간소화되고 안전해졌습니다.

Console에서 Fetch로 편집 및 재전송: 모든 네트워크 요청에서 Edit and resend as fetch를 선택하면
```
fetch()
```
표현식이 이미 프롬프트에 붙여넣어진 상태로 Console 패널이 자동으로 포커스되고, 매개변수 주석과 원본 요청에 대한 참조 링크가 포함됩니다.
로컬 재정의 보안 강화: Network 패널은 이제 로컬 재정의에서 경로 순회(
```
%2E%2E
```
)를 방지하고
```
data:
```
,
```
blob:
```
,
```
javascript:
```
,
```
about:
```
과 같은 non-http(s) 스킴에 대한 재정의 생성을 금지합니다.
Copy as curl (cmd)의 캐럿 이스케이핑: Windows
```
cmd.exe
```
용 curl 명령으로 네트워크 요청을 복사하면 이제 괄호와 백틱에 캐럿 이스케이핑이 적용되어 대체 셸에 붙여넣을 때 명령 구문 오류를 방지합니다.
바이너리 페이로드 커서 동기화: Payload 탭은 Hex, Base64 및 UTF-8 보기를 전환할 때 스크롤 및 커서 위치를 유지합니다.

네트워크 요청을 마우스 오른쪽 버튼으로 클릭하고 Edit and resend as fetch를 선택하면 Console 패널이 자동으로 포커스되고 fetch 표현식이 이미 붙여넣어져 편집할 준비가 됩니다.

Chromium 이슈: 40726969

, 513843792

, 513836026

, 407750982

Memory: 힙 스냅샷 엣지 필터링, 크기 정렬 및 객체 쿼리

Memory 패널은 힙 스냅샷 분석을 위한 더 세분화된 도구를 제공합니다.

엣지 정렬 및 필터링: 이제 힙 스냅샷의 엣지를 최소 유지된 크기로 필터링하고 기본값(
```
null
```
,
```
undefined
```
,
```
true
```
,
```
false
```
)을 제외하여 의미 있는 객체 참조에 집중할 수 있습니다. 엣지는 유지된 크기, 자체 크기 또는 이름별로 정렬할 수 있습니다.
직접 객체 쿼리: DevTools는 유지된 크기 임계값 또는 속성 이름별로 힙 스냅샷 객체를 직접 쿼리하는 것을 지원하여 메모리 누수 조사를 간소화합니다.
컨텍스트 유지 분석: 힙 스냅샷은 V8 실행 컨텍스트에 의해 유지되는 총 메모리를 계산하고 보고할 수 있습니다.
안정적인 스냅샷 구문 분석: 유효하지 않거나 손상된 힙 스냅샷 파일은 구문 분석 중단을 일으키는 대신 명확한 오류를 표시합니다.

Chromium 이슈: 497855658

접근성 개선 사항

Chrome 153 및 Chrome 154에는 다음과 같은 접근성 개선 사항이 포함됩니다.

Elements: macOS의 VoiceOver는 DOM 트리 항목을 탐색할 때 정중한 라이브 영역을 통해 "확장됨" 및 "축소됨" 상태 변경을 알립니다. (Chromium 이슈: 540028208
)
Issues: Issues 카운터에서 중복 화면 판독기 발표가 해결되어 단일 깨끗한 요약을 읽고 Issues 패널 내에서 올바른 비버튼 의미를 적용합니다. (Chromium 이슈: 536977880
)
Elements: 대화형 애드오너( View Source, Starting Style, Scroll Snap, Reveal)는 완전히 초점을 맞출 수 있으며 키보드로 활성화할 수 있습니다. (Chromium 이슈: 554057179
)
Live regions: 라이브 발표 및
```
ariaNotify
```
호출을 기록하고 디버깅하기 위해
```
AccessibilityAnnouncementRecordingView
```
가 추가되었습니다. (Chromium 이슈: 527462118
)