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

Matthias Rohmer

게시일: 2026년 10월 1일

지난 한 달 동안 Chrome 153과 Chrome 154가 안정화 버전으로 출시되어 일상적인 워크플로에 사용할 수 있는 다양한 개발자 개선사항이 제공되었습니다. 이번 버전에서는 DevTools의 에이전트용 세분화된 JavaScript 실행 제어, 애플리케이션 패널의 광고 스크립트 추적, 성능의 완전한 소프트 탐색 지원 및 CPU 성능 등급 재정의, 요소의 비활성 스타일 및 키보드로 액세스 가능한 장식 지원, AI 지원의 소스 검사 및 성능 추적 기록, 기기 모드의 최신 기기 사전 설정이 강조됩니다.

상담사용 DevTools

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

  • 에이전트 플러그인 1.0 패키지: 에이전트가 모듈식 플러그인 확장 프로그램을 로드하고 실행할 수 있도록 에이전트 플러그인 1.0 패키지에 대한 지원이 추가되었습니다.
  • JavaScript 실행 제어: --no-javascript-evaluation를 구성하거나 JavaScript 실행 도구를 사용 중지하여 스크립트를 평가하지 않고 페이지를 검사하고 탐색 및 초기화 스크립트 전반으로 확장합니다.
  • 주문형 소스 맵: 소스 맵을 사용 중지하고 주문형으로 소스 맵을 지연 로드하는 옵션을 추가하여 대규모 사이트에서 메모리 사용량이 많은 문제를 방지했습니다.
  • 구성 가능한 파일 시스템 루트 및 CLI 경로 권한: 이제 CLI에 기본적으로 --allow-unrestricted-paths이 포함되며 구성 가능한 파일 시스템 루트를 지원합니다.
  • 힙 스냅샷 검사: query_heapsnapshot로 Retained Size 또는 속성 이름별로 객체를 직접 쿼리하고, 가장자리의 자체 크기 및 Retained Size를 확인하고, V8 실행 컨텍스트에서 보관된 메모리를 검사합니다.
  • PWA 자동화 도구: 프로그레시브 웹 앱 설치 및 수명 주기 검사를 자동화하는 전용 도구가 추가되었습니다.
  • 콘솔 스택 트레이스: list_console_messages로 콘솔 메시지를 나열할 때 선택적 스택 트레이스를 가져옵니다.

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

Chrome 사용자 환경 보고서 (CrUX)에 4가지 실험적 광고 측정항목이 도입됨에 따라 이 새로운 하위 패널은 페이지 전체 광고 관련 정보를 디버그하고 최적화할 수 있는 중앙 위치입니다. 여기에는 다음이 포함됩니다.

  • 새 실험 측정항목(뷰포트 광고 밀도, 뷰포트 광고 수, 광고의 총 CPU 사용량, 광고의 총 네트워크 사용량)을 위한 대시보드
  • 광고 요소별 CPU 및 네트워크 사용량 세분화
  • 기본 프레임의 광고 스크립트 표
  • 페이지의 광고를 강조 표시하는 전환 버튼

새 광고 측정항목에 대해 자세히 알아보려면 문서를 참고하세요.

새 광고 스크립트 표를 표시하고 소스에서 광고 스크립트를 표시하는 애플리케이션 패널 광고 탭
새 광고 스크립트 표를 표시하고 소스에 광고 스크립트를 표시하는 애플리케이션 패널 광고 탭

Chromium 문제: 514957134, 512927903, 540469610

성능 패널은 엔드 투 엔드 소프트 탐색 측정, 하드웨어 보정 재정의, 심층 트레이스 검색을 제공합니다.

  • 전체 소프트 탐색 지원: Chrome 152의 실시간 측정항목 및 트레이스 뷰에 소프트 탐색 지원이 도입된 데 이어 이제 통계에서 소프트 탐색 분석을 사용할 수 있으므로 성능 패널에서 소프트 탐색을 측정하는 전체 엔드 투 엔드 지원이 완료되었습니다.
  • CDP를 통한 CPU 성능 등급 재정의: 이제 DevTools에서 Chrome DevTools 프로토콜(Emulation.setCPUPerformanceOverride)을 통해 보정된 CPU 성능 등급 재정의를 구성, 계산, 디스패치할 수 있으므로 하드웨어 등급 전반에서 재현 가능한 성능 테스트가 가능합니다.
  • 플레임 차트에서 확장 프로그램 트랙 검색: 이제 성능 패널 Flame Chart에서 Ctrl+F를 누르면 확장성 API를 사용하여 등록된 맞춤 트랙의 항목이 일치하여 도움말 텍스트, 속성, 사용자 세부정보가 검색됩니다.
  • CPU 프로필 스레드 시각화: 이제 성능 패널 Flame Chart에서 CPU 프로필 샘플만 포함하는 스레드를 렌더링하여 WebAssembly 스레드와 같은 백그라운드 실행이 타임라인 뷰에 표시됩니다.
성능 패널의 소프트 탐색 엔드 투 엔드 워크플로

Chromium 문제: 449760252, 483092899, 540020488

요소: 비활성 스타일, 키보드로 액세스 가능한 장식, 트리 개요 수정

요소 패널에서 CSS를 검사하고 작성하는 것이 더 빠르고 액세스하기 쉬워졌습니다.

  • 비활성 스타일 지원: 이제 더 이상 적용되지 않는 경우에도 이전에 선택한 요소와 일치했던 스타일 규칙을 계속 표시할 수 있으며, 비활성 시각적 표시기로 명확하게 구분할 수 있습니다. 설정에서 비활성 스타일을 사용 설정하고 접기 동작을 구성합니다.
  • 키보드로 액세스 가능한 장식: 소스 보기, 시작 스타일, 스크롤 스냅, 표시 등 DOM 트리의 대화형 장식이 이제 키보드 포커스 가능하며 Enter 또는 Space을 사용하여 활성화할 수 있습니다.
  • 드래그 앤 드롭 재정렬: 이제 DOM 트리에서 요소를 드래그하여 DOM 노드를 재정렬하는 기능이 섀도우 DOM 경계에서 안정적으로 작동하며, 드롭 위치 표시기가 명확합니다.
  • 더 부드러운 CSS 속성 전환: 스타일 탭에서 CSS 속성 체크박스를 전환해도 더 이상 중복 UI 다시 그리기나 시각적 깜박임이 트리거되지 않습니다.
비활성 CSS 규칙을 보여주는 요소 패널
비활성 CSS 규칙이 표시된 요소 패널

Chromium 문제: 539424116, 554057179, 555088527, 548477554

기기 모드: 폼 팩터별로 그룹화된 최신 기기 사전 설정

기기 모드 툴바와 설정 > 기기 뷰는 에뮬레이션된 하드웨어를 명확한 카테고리로 정리합니다.

  • 폼 팩터 그룹화: 에뮬레이트된 기기가 이제 모바일, 폴더블, 태블릿 및 데스크톱, 스마트 디스플레이로 그룹화됩니다.
  • 하드웨어 카탈로그 업데이트: iPhone 16, Pixel 9, Pixel 10, Galaxy Z Fold 6, iPad Pro 13인치, Nest Hub Max를 비롯한 최신 사전 설정을 추가하고 오래된 기존 기기 정의를 삭제했습니다.
폼 팩터별로 그룹화된 최신 기기 사전 설정을 보여주는 기기 모드
폼 팩터별로 그룹화된 최신 기기 사전 설정을 보여주는 기기 모드

Chromium 문제: 526856234, 526857820

네트워크: 콘솔에서 가져오기로 수정하여 다시 보내기, 로컬 재정의 보안

네트워크 요청 검사 및 디버깅 워크플로가 간소화되고 보안이 강화되었습니다.

  • 수정 후 콘솔에서 가져오기로 다시 전송: 이제 네트워크 요청에서 수정 후 가져오기로 다시 전송을 선택하면 fetch() 표현식이 프롬프트에 이미 붙여넣어져 있고 매개변수 주석과 원래 요청에 대한 참조 링크가 포함된 콘솔 패널이 자동으로 포커스됩니다.
  • 로컬 재정의 보안 강화: 이제 네트워크 패널에서 로컬 재정의의 경로 순회 (%2E%2E)를 방지하고 data:, blob:, javascript:, about:과 같은 비 http(s) 스키마에서 재정의를 생성하는 것을 금지합니다.
  • curl로 복사 (cmd)의 캐럿 이스케이프: 이제 Windows cmd.exe용 curl 명령어로 네트워크 요청을 복사하면 괄호와 백틱이 캐럿 이스케이프되어 대체 셸에 붙여넣을 때 명령 구문 오류가 방지됩니다.
  • 바이너리 페이로드 커서 동기화: 페이로드 탭은 16진수, Base64, UTF-8 뷰 간에 전환할 때 스크롤 및 커서 위치를 유지합니다.
네트워크 요청을 마우스 오른쪽 버튼으로 클릭하고 '가져오기로 수정 및 다시 보내기'를 선택하면 가져오기 표현식이 이미 붙여넣어져 수정할 준비가 된 상태로 콘솔 패널이 자동으로 포커스됩니다.
네트워크 요청을 마우스 오른쪽 버튼으로 클릭하고 '가져오기로 수정 및 다시 보내기'를 선택하면 가져오기 표현식이 이미 붙여넣어져 수정할 준비가 된 상태로 Console 패널이 자동으로 포커스됩니다.

Chromium 문제: 40726969, 513843792, 513836026, 407750982

메모리: 힙 스냅샷 가장자리 필터링, 크기 정렬, 객체 쿼리

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

  • 에지 정렬 및 필터링: 이제 최소 Retained Size로 힙 스냅샷의 에지를 필터링하고 기본 값 (null, undefined, true, false)을 필터링하여 의미 있는 객체 참조에 집중할 수 있습니다. 가장자리는 Retained Size, 자체 크기 또는 이름으로 정렬할 수 있습니다.
  • 직접 객체 쿼리: DevTools는 Retained Size 기준점 또는 속성 이름으로 힙 스냅샷 객체를 직접 쿼리하여 메모리 누수 조사를 간소화할 수 있습니다.
  • 컨텍스트 유지 분석: 힙 스냅샷은 V8 실행 컨텍스트에서 특별히 활성 상태로 유지되는 집계 메모리를 계산하고 보고할 수 있습니다.
  • 복원력 있는 스냅샷 파싱: 이제 잘못되었거나 손상된 힙 스냅샷 파일로 인해 파싱이 중단되는 대신 명확한 오류가 표시됩니다.

Chromium 문제: 497855658

접근성 개선

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

  • 요소: 이제 macOS의 VoiceOver는 DOM 트리 항목을 탐색할 때 정중한 라이브 영역을 통해 '확장됨' 및 '접힘' 상태 변경을 알립니다. (Chromium 문제: 540028208)
  • 문제: 문제 카운터에서 중복된 스크린 리더 알림을 해결하고, 깔끔한 요약을 하나 읽고, 문제 패널 내에서 올바른 비버튼 시맨틱을 적용했습니다. (Chromium 문제: 536977880)
  • 요소: 대화형 장식 (소스 보기, 시작 스타일, 스크롤 스냅, 표시)은 키보드를 사용하여 완전히 포커스를 지정하고 활성화할 수 있습니다. (Chromium 문제: 554057179)
  • 라이브 지역: 라이브 공지사항과 ariaNotify 호출을 기록하고 디버그하는 AccessibilityAnnouncementRecordingView가 추가되었습니다. (Chromium 문제: 527462118)

Chromium 문제: 540028208, 536977880, 554057179, 527462118