DevTools의 새로운 기능 (Chrome 148)

게시일: 2026년 5월 5일

Chrome 148에서는 전체 페이지 접근성 트리를 기본값으로 설정하고, 도움말에 광고 출처 세부정보를 도입하고, 추측 규칙의 디버깅을 개선하고, 비정상 종료 보고서에 새로운 진단 뷰를 추가합니다.

상담사를 위한 DevTools

Chrome DevTools MCP 서버와 CLI가 버전 0.25.0으로 업데이트되었으며 여러 새로운 기능이 추가되었습니다. 이번 출시에는 도구 실행 중 스크립트 중단을 방지하기 위한 브라우저 대화상자의 자동 처리와 같은 다양한 안정성 수정사항도 포함되어 있습니다.

마지막 업데이트 이후 추가된 주요 기능은 다음과 같습니다.

  • Chrome 확장 프로그램 디버깅: 이제 상담사가 Chrome 확장 프로그램을 타겟팅하고 디버그할 수 있으므로 확장 프로그램별 페이지와 백그라운드 스크립트를 직접 검사할 수 있습니다.
  • WebMCP 도구 호출: 새로운 실험용 도구를 사용하면 에이전트가 웹페이지에 노출된 WebMCP 도구를 나열하고 실행할 수 있습니다.
  • Lighthouse의 에이전트형 탐색: 새로운 '에이전트형 탐색' 감사 카테고리는 WebMCP 도구 등록을 검증하는 등 사이트가 에이전트형 웹에 최적화되어 있는지 평가합니다.

이러한 기능을 사용하려면 자세한 출시 노트가 포함된 GitHub 저장소를 확인하세요.

기본적으로 전체 접근성 트리

사이드바에 새로운 접근성 전환 버튼이 있는 요소 패널

전체 접근성 트리가 공식적으로 실험 단계를 종료하고 요소 패널의 기본 뷰로 유지됩니다. 이 전환으로 기존 빵 부스러기 스타일 접근성 트리가 소스에서 삭제되고 이 포괄적인 뷰가 대신 사용됩니다.

인터페이스를 간소화하기 위해 Chrome 148에서는 이전에는 DOM과 접근성 트리 간에 전환하는 데 사용되었던 플로팅 작업 버튼을 삭제합니다. 이제 사이드바의 접근성 탭에 있는 전용 전환 버튼을 사용하여 뷰를 전환할 수 있습니다.

Chromium 문제: 40808541

추측 로드 개선사항

추측 로드 섹션이 미리 로드 디버깅을 위해 더욱 강력해졌습니다.

  • 텍스트 필터링: 이제 자유 텍스트 또는 키가 지정된 필터 (예: url:, status:)를 사용하여 규칙 및 시도 목록을 필터링할 수 있습니다.
  • HTTP 상태 코드: 실패한 시도의 경우 실제 HTTP 상태 코드(예: 404 또는 503)가 이제 그리드에 직접 표시됩니다.
  • 양식 제출: 이제 패널에서 form_submission를 사전 로드 트리거로 명시적으로 식별하고 표시합니다.

Chromium 문제: 479524246, 40926909

@hjanuschka님의 커뮤니티 기여로 제공되었습니다.

새 추측 규칙 필터 표시줄과 비정상 종료 보고서 컨텍스트가 강조 표시된 애플리케이션 패널

비정상 종료 보고서 컨텍스트

애플리케이션 패널 사이드바의 새로운 비정상 종료 보고서 섹션을 사용하면 브라우저에서 생성된 비정상 종료 보고서를 검사할 수 있습니다. 이제 각 보고서에 DevTools에서 비정상 종료와 관련된 키-값 속성이 포함된 자세한 컨텍스트 그리드가 표시되므로 비정상 종료를 특정 프레임 상태 또는 구성과 더 쉽게 연관시킬 수 있습니다.

Chromium 문제: 400432195

이름 전용 @container 쿼리

이제 DevTools에서 이름 전용 @container 쿼리를 지원합니다. 이전에는 설명자가 없는 쿼리 (예: @container sidebar)가 스타일 탭에 제대로 반영되지 않았을 수 있습니다. 이제 스타일 속성 섹션에서 올바르게 렌더링되고 연결될 수 있습니다.

기여하지 않는 섹션이 접혀 있음

이제 스타일 탭에서 활성 선언이 없는 섹션을 자동으로 축소하여 어수선함을 줄입니다. 비어 있거나 오버로드된 속성 (다른 규칙에 의해 재정의됨)만 포함하는 규칙은 기본적으로 축소되지만, 사용 중지된 속성이 있는 섹션은 디버깅을 용이하게 하기 위해 확장된 상태로 유지됩니다.

Chromium 문제: 40287550, 351662727

요청 순서 및 권장 제한

  • 요청 번호 열: 이제 네트워크 패널에 선택사항인 요청 번호 열을 추가할 수 있습니다. 이 열에는 요청이 시작된 절대 순서가 표시되며 정렬을 지원합니다.
  • 권장 제한: 이제 네트워크 패널의 제한 드롭다운에서 사이트 사용자의 실제 필드 데이터 (CrUX)를 기반으로 권장 사전 설정을 강조 표시하여 이미 성능 패널에 있는 권장사항과 일치시킵니다.

새 요청 번호 열과 권장 제한이 강조 표시된 네트워크 및 네트워크 상태 패널

Chromium 문제: 40276422, 456383409

어도너의 광고 출처

이제 DevTools에서 요소가 광고로 태그되는 이유를 더 투명하게 확인할 수 있습니다. 요소 패널에서 광고 장식 위로 마우스를 가져가면 새 도움말에 광고 출처가 표시됩니다.

도움말은 요소가 광고로 식별된 이유에 관한 컨텍스트를 제공합니다. 예를 들면 다음과 같습니다.

  • 스크립트 계보: 요소를 만드는 데 사용된 스크립트입니다.
  • 목록 규칙 필터링: 요소 또는 로드된 리소스와 일치하는 필터 목록 (예: EasyList)의 특정 규칙입니다.

이를 통해 개발자와 개인 정보 보호 연구원은 광고 태그 지정의 '이유'를 이해하고 거짓양성을 디버그할 수 있습니다.

Chromium 문제: 490029725, 495842556

기타 주요 내용

  • 에뮬레이션: 전체 페이지 스크린샷을 찍으면 뷰포트가 '누출'되거나 손상된 상태로 남는 오랜 버그가 수정되었습니다(495385035).
  • WebAuthn: 가상 인증자로 hmac-secrethmac-secret-mc 확장 프로그램을 테스트하는 지원을 추가했습니다(420689820).
  • 메모리: 새 스낵바 알림으로 가비지 컬렉션을 수동으로 트리거할 때 피드백이 개선되었습니다(493708151).
  • 객체 검사: show-option-to-expose-internals-in-heap-snapshot 실험이 삭제되었습니다. 이제 체크박스가 기본적으로 표시됩니다(497855658).