DevTools의 새로운 기능 (Chrome 146)

게시일: 2026년 3월 10일

Chrome 146에서는 요소 패널에서 채택된 스타일 시트 지원이 개선되고, 콘솔 기록 탐색이 크게 개선되며, 다양한 기타 작은 수정사항 및 업데이트와 함께 개인 정보 보호 디버깅 워크플로가 간소화됩니다.

DevTools MCP 서버 업데이트

이제 DevTools MCP 서버가 버전 0.19.0으로 업데이트되어 강력한 새 도구, 효율성 개선사항, 전문 디버깅 스킬을 제공합니다.

  • 통합 Lighthouse 감사: 이제 MCP를 통해 직접 Lighthouse 감사를 실행하여 에이전트 워크플로 내에서 자동화된 성능 및 품질 검사를 실행할 수 있습니다.
  • 슬림 모드: 이제 새로운 --slim 모드를 사용할 수 있습니다. 이 모드는 토큰을 최대한 절약할 수 있도록 도구 설명과 매개변수를 최적화하도록 설계되었습니다.
  • 새로운 디버깅 기술: 접근성 감사 및 디버깅, 최대 콘텐츠 페인트 (LCP) 디버깅 및 최적화를 위한 전용 기술이 추가되었습니다.
  • 확장된 도구 및 기능: 이제 서버에서 스토리지 격리 브라우저 컨텍스트, 실험용 스크린캐스트 녹화, 새로운 take_memory_snapshot 도구, type_text와 같은 고급 상호작용 기능을 지원합니다.

변경사항의 전체 목록은 GitHub의 공개 변경 로그를 참고하세요.

콘솔 기록 수정사항 보존

콘솔의 오랜 문제점이 해결되었습니다. 이전에는 기록에서 가져온 명령어를 수정하고 위 또는 아래를 눌러 다른 곳으로 이동하면 수정사항이 손실되었습니다.

Chrome 146에서는 명령 기록을 탐색할 때 DevTools가 이제 수정사항을 유지합니다. 이전 명령어를 수정하거나 다른 명령어를 찾아보고 작업 손실 없이 초안으로 돌아갈 수 있습니다.

이 기능은 커뮤니티에서 제공한 것으로, @hjanuschka님께 감사드립니다.

Chromium 문제: 355108929

채택된 스타일 시트 지원 개선

이제 웹 구성요소와 최신 CSS 아키텍처를 훨씬 쉽게 디버깅할 수 있습니다. Adopted Style Sheets는 더 이상 숨겨져 있지 않습니다. 이제 Elements 패널의 DOM 트리 내에 있는 전용 #adopted-style-sheets 노드 아래에 그룹화됩니다.

표준 <style> 태그와 마찬가지로 이러한 시트를 검사할 수 있으며 스타일 창에서 규칙을 직접 수정할 수도 있습니다. 이렇게 하면 생성된 스타일시트와 선언적 스타일 간의 패리티가 유지되어 섀도우 DOM, 웹 구성요소, 공유 디자인 시스템의 디버깅이 간소화됩니다.

인라인 수정이 적용된 요소 패널의 채택된 스타일시트

Chromium 문제: 476399197, 40802935

밀도 높은 그리드 레이아웃 지원

스타일 창의 그리드 편집기에서 이제 dense 패킹 알고리즘을 지원합니다. grid-auto-flow를 수정할 때 dense 키워드에 대한 새로운 체크박스가 표시되므로 UI에서 직접 표준 및 밀도 높은 패킹 모드 간에 빠르게 전환할 수 있습니다.

그리드 편집기의 새로운 밀도 높은 체크박스

커뮤니티에서 제공한 콘텐츠입니다. @TheNourhan님께 감사드립니다.

Chromium 문제: 40791512

간소화된 개인 정보 보호 디버깅

이전의 개인 정보 보호 및 보안 패널의 이름이 보안으로 바뀌었고 UI 혼란을 줄이고 디버깅 워크플로를 통합하기 위해 정리되었습니다. 이제 서드 파티 쿠키 문제 및 잠재적 중단 확인과 같은 모든 개인 정보 보호 관련 정보가 콘솔에 직접 보고됩니다.

이 변경사항으로 인해 개인 정보 보호 문제를 진단하기 위해 패널 간에 이동할 필요가 없어졌습니다. 개인 정보 보호 문제가 다른 로그 및 오류와 함께 표시되어 즉각적인 컨텍스트를 제공합니다.

Chromium 문제: 473796598

기타 주요 내용

  • 소스: 스택 트레이스 아키텍처를 대대적으로 개편하여 늦게 로드되는 소스 맵으로 인해 UI가 예기치 않게 점프하거나 파일이 전환되는 문제를 해결했습니다.
  • 네트워크: 이제 이니시에이터 팝오버에서 개선된 스택 트레이스 시스템을 사용하여 요청 체인의 신뢰성을 높입니다.

접근성 공지사항

이 버전에는 다음과 같은 접근성 개선사항이 적용되었습니다.

  • 레코더: 이제 스크린 리더가 '코드 표시' 사이드바가 전환될 때 이를 알립니다.
  • 애플리케이션: 이제 새로운 '공유 스토리지', '뒤로/앞으로 캐시', '바운스 추적 완화' 보고서 제목이 헤딩으로 올바르게 공지됩니다.
  • 설정: 바로가기 항목과 색상 버튼의 고대비 모드 지원이 개선되었습니다.
  • 일반: CSS 개요 패널 및 미디어 플레이어 항목을 비롯한 다양한 UI 요소의 포커스 가시성이 개선되었습니다.

Chromium 문제: 479882111, 478888141, 479250362