Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

DevTools의 새로운 기능 (Chrome 150)

Matthias Rohmer

게시일: 2026년 6월 30일

Chrome 150에서는 에이전트용 DevTools의 메모리 디버깅이 개선되고, 더 많은 위젯으로 AI 지원이 향상되며, CSS @container 및 @function 규칙의 전체 수정 기능이 도입됩니다.

에이전트용 DevTools

최근 v1.4.0까지의 출시 버전에서 에이전트용 Chrome DevTools는 에이전트 브라우저 자동화 및 디버깅 기능을 크게 확장했습니다.

지난 출시 이후의 주요 기능 및 개선사항은 다음과 같습니다.

메모리 디버깅 도구 모음 (--experimentalMemory): 이제 에이전트가 V8 힙 스냅샷을 직접 캡처하고 분석하여 JavaScript 메모리 누수를 진단하고 객체 보존 계층 구조를 분석할 수 있습니다.
Chrome 확장 프로그램 관리 (--categoryExtensions): 에이전트는 확장 프로그램 수명 주기 (설치, 제거, 다시 로드, 목록)를 관리하고 진단을 위해 백그라운드 서비스 워커 콘솔 로그를 캡처할 수 있습니다.
번들 에이전트 기술: 이제 skills/ 디렉터리가 npm 패키지 배포에 직접 게시되므로 MCP 클라이언트 에이전트가 특수 브라우징 및 디버깅 워크플로를 자동으로 검색하고 실행할 수 있습니다.
토큰 및 출력 최적화: 소스에서 스크린샷 크기를 제한하면 토큰 소비가 줄어들고 실험용 TOON (Token-Oriented Object Notation) 지원으로 구조화된 데이터 형식이 최적화됩니다.
탐색 및 컨텍스트 개선: 이제 list_pages에 URL 및 타겟 ID와 함께 페이지 제목이 포함되어 여러 탭 컨텍스트 선택이 개선되고 allowedUrlPattern 및 blockedUrlPattern 구성 옵션으로 엄격한 브라우징 범위 보안이 적용됩니다.

에이전트용 DevTools에 관한 최신 업데이트를 확인하고 참여하려면 GitHub 저장소를 방문하세요.

AI 지원의 심층적인 인사이트

AI 지원 에이전트 둘러보기의 새로운 Lighthouse 및 계산된 스타일 위젯

AI 지원 패널이 계속 발전하여 에이전트 둘러보기에 더 많은 세부정보를 제공합니다. 이제 9개의 추가 위젯에 Lighthouse, 네트워크, 소스, 성능 패널의 데이터가 표시됩니다. 위젯을 사용하면 에이전트 도구를 호출하여 성능 이벤트, 리소스 콘텐츠, 네트워크 요청 등을 가져올 때 Gemini에서 사용하는 데이터를 더 잘 이해할 수 있습니다.

Chromium 문제: 460763995

더 많은 CSS at-rule에 대한 전체 수정 지원

요소 패널의 스타일 탭에는 최신 CSS 기능을 위한 새로운 작성 기능이 제공됩니다.

인라인 @container 규칙 수정: 이제 CSS @container 규칙에서 컨테이너 이름과 쿼리 조건을 직접 수정하여 반응형 컨테이너 쿼리 디자인을 원활하게 실험할 수 있습니다.
CSS @function 규칙 수정: 맞춤 CSS @function 규칙에 대한 전체 수정 지원이 추가되었습니다.
@counter-style 규칙 수정: list-style-type 속성에 대한 코드 완성 기능이 추가되어 해당 @counter-style 정의에 직접 연결됩니다.
기여하지 않는 규칙 접기: 새로운 환경설정으로 기여하지 않는 CSS 스타일 규칙을 접어 스타일 창에 활성 스타일만 표시할 수 있습니다.

스타일 탭의 CSS 함수와 counter-style 규칙

Chromium 문제: 507611251, 41491726, 480080406, 351662727, 514846131

소스에서 중복 제거된 중단점 및 재귀 소스 맵 지원

소스 패널은 복잡한 최신 빌드 파이프라인에서 디버깅 정확도를 개선합니다.

논리적 중단점 중복 제거: 이제 거터의 중단점 마커가 가장 가까운 해결된 위치 매핑을 사용하여 코드 분할 번들 및 SSR/클라이언트 컴파일된 템플릿에서 중복 제거됩니다. 이렇게 하면 여러 청크 또는 환경에서 공유되는 코드를 디버깅할 때 중복된 중단점 표시기가 표시되지 않습니다.
재귀 EvalOrigin 및 중첩된 소스 맵: 이제 디버거가 재귀 EvalOrigin 구조와 중첩된 변환 체인을 소스 맵 전반에서 지원하여 다단계 컴파일 워크플로에서 정확한 스택 트레이스 및 단계별 실행 동작을 보장합니다.
줄로 이동 단축키: Chrome의 새로운 Gemini 단축키와의 충돌을 방지하기 위해 편집기에서 '줄로 이동' 탐색을 위한 추가 단축키로 ALT + G가 추가되었습니다.
속성 가져오기 형식 지정: 기본 Acorn 파서가 업데이트되어 표준 JavaScript 가져오기 속성 구문의 보기 좋게 인쇄 형식 지정을 지원합니다.

Chromium 문제: 493674242, 485142682, 480172712, 491167992

DevTools 전반의 보안 및 교차 출처 강화

다른 많은 소프트웨어 제품과 마찬가지로 최근 보안 보고서가 급증했으며, 그중 상당수는 AI의 도움으로 발견되었습니다. Google팀은 DevTools를 안전하게 유지하기 위해 이러한 문제를 지속적으로 검토하고 수정하고 있습니다.

실시간 표현식의 자체 XSS 보호: 콘솔 에서 실시간 표현식을 만들 때 자체 XSS 경고 대화상자와 보호 메커니즘이 추가되었습니다.
레코더 탐색 허용 목록 및 재생 확인: 이제 레코더 패널에서 엄격한 탐색 허용 목록을 적용하여 재생 섹션 내에서 엄격한 확장 프로그램 출처 확인과 함께 권한이 높은 페이지로 이동하지 못하도록 합니다.
확장 프로그램 네트워크 재정의 제한: 이제 확장 프로그램에서 관리하는 네트워크 재정의가 runtime_blocked_hosts 호스트 정책을 엄격하게 적용합니다.
안전한 @font-face 생성: 데이터 URL을 통한 CSS 삽입을 방지하기 위해 CSSStyleSheet API와 안전한 URL 문자열화를 사용하여 @font-face 규칙 생성을 리팩터링했습니다.

기타

이번 출시에는 다음과 같은 작은 개선사항과 버그 수정이 포함되어 있습니다.

성능: 캐시된 네트워크 요청의 TraceTree 전송 크기 증가를 수정했습니다. 이를 위해 식별된 캐시 적중 시 전송 크기를 0바이트로 강제했습니다.
성능: 선택적 Chrome UX 보고서 (CrUX) deviceScope 필드 데이터를 지원하도록 성능 포맷터를 업데이트했습니다.
성능: 긴 파일 URL에서 줄임표 잘림을 방지하기 위해 호출 트리 테이블에서 가로 스크롤을 사용 설정했습니다.
성능: 여러 트레이스 파일에서 통계 사이드바의 손상된 다시 렌더링 및 DOM 상태 손상을 수정했습니다.
성능: 실험용 플래그에서 표준 DevTools 설정으로 타임라인 무효화 추적 및 디버그 모드 설정을 이전했습니다.
네트워크: 잘못된 열 이름 바꾸기를 되돌려 재정의 있음 열을 복원하고 헤더 및 콘텐츠 재정의의 정렬 로직을 수정했습니다.
네트워크: 서버 타이밍 폭포 막대에서 CSS attr() 스타일 지정을 수정하여 행별로 생성된 색상이 올바르게 렌더링되도록 했습니다.
네트워크: 이름 없는 쿠키의 cURL로 복사 명령 생성을 수정했습니다.
애플리케이션: 새로운 StorageAgent 인프라를 사용하여 애플리케이션 패널에서 로컬 및 세션 스토리지 항목을 연결했습니다.
애플리케이션: 프리페치와 프리렌더링이 모두 성공한 URL이 "프리렌더링됨"으로 정확하게 표시되도록 추측 로드 상태 우선순위를 수정했습니다.
애플리케이션: 힙 스냅샷 뷰의 열에서 바이트 정확한 값 툴팁을 표시했습니다.
문제: 뒤로 탐색에서 광고 항목을 건너뛸 때마다 BackUINavigationWouldSkipAd 문제 유형을 표시했습니다.
문제: 이메일 인증 요청 문제 (EmailVerificationRequestIssue)를 표시하는 지원을 추가했습니다.
Lighthouse: Lighthouse 구성 패널에 에이전트 브라우징 카테고리 체크박스 (기본적으로 사용 중지됨)를 추가하고 번들 Lighthouse 엔진을 v13.3.0으로 업데이트했습니다.

Chromium 문제: 518021339, 40908621, 517519019, 487755345, 505284391, 465915378, 512908993, 40543651

Chrome 150에서는 DevTools 전반에서 스크린 리더 알림, 위젯 구조, ARIA 시맨틱스를 여러 가지로 개선했습니다.

스타일 탭 내에서 탭을 선택하고 섹션을 탐색할 때 스크린 리더 알림이 개선되었습니다.
대화상자 닫기 아이콘에 설명 툴팁을 추가하고 툴팁에서 ARIA 세부정보 및 설명 속성을 허용했습니다.
보조 기술의 탐색을 개선하기 위해 컨텍스트 메뉴 항목에 엄격한 ARIA menuitem 역할을 적용했습니다.

Chromium 문제: 510013788