DevTools의 새로운 기능, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini로 CSS 디버그

Chrome DevTools에 Gemini와 채팅하고 CSS 디버깅에 도움을 받을 수 있는 새로운 실험용 AI 지원 패널이 추가되었습니다.

지금 사용해 보세요. 요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 AI에게 물어보기를 선택하거나 요소 옆에 있는 해당 버튼을 클릭합니다. DevTools에서 새 AI 지원 패널이 열립니다.

'AI에게 물어보기' 메뉴 옵션과 해당 버튼

새 패널에 해당 설정을 사용 설정하라는 메시지가 표시됩니다. 요구사항을 충족하는지 확인하고 설정 전환을 사용 설정한 다음 AI 지원 패널로 돌아갑니다. 선택한 요소가 컨텍스트로 사용됩니다. 요소에 관한 질문을 입력합니다.

프롬프트에 답하는 새로운 AI 지원 패널

새 패널을 가장 잘 사용하는 방법을 자세히 알아보려면 DevTools AI 지원으로 할 수 있는 멋진 5가지 작업을 참고하고 스타일 지정을 위한 AI 지원을 확인하세요.

DevTools팀은 여러분의 의견을 기다리고 있습니다. crbug.com/364805393에서 언제든지 문의해 주세요.

전용 설정 탭에서 AI 기능 제어

이제 새로운 설정 > AI 혁신 탭에서 모든 AI 기능을 한곳에서 관리할 수 있습니다. 여기에서 중요한 고려사항을 확인하고 AI 기능을 설명하고 개별적으로 사용 설정 또는 사용 중지할 수 있습니다.

새로운 AI 혁신 탭

자세한 내용은 설정 > AI 혁신을 참고하세요.

클릭 한 번으로 콘솔 인사이트 확인하기

DevTools에서 더 이상 AI 기능에 설정 동기화를 사용 설정할 필요가 없습니다. 이제 이전에 출시된 콘솔 통계와 스타일 지정 AI 지원을 클릭 한 번으로 확인할 수 있습니다.

Chrome에 로그인되어 있다면 설정 > AI 혁신에서 이 기능을 사용 설정하면 됩니다.

성능 패널 개선사항

이 버전에서는 성능 패널에 여러 가지 개선사항이 적용되었습니다.

실적 발견사항에 주석을 달고 공유하기

성능 패널의 왼쪽에 있는 펼칠 수 있는 사이드바에 새로운 주석 탭이 추가되어 성능 결과를 공유할 때 트레이스 탐색 및 공동작업을 위한 메모를 만드는 프로세스를 간소화합니다.

이제 트레이스에서 바로 이벤트에 라벨을 지정하고 화살표로 연결하며 시간 범위를 강조 표시할 수 있습니다. 그런 다음 주석이 추가된 트레이스를 저장, 공유, 업로드하여 성능 패널에 다시 가져올 수 있습니다.

왼쪽 사이드바의 새 주석 탭과 주석이 추가된 이벤트, 범위, 연결

성능 패널에서 바로 실적 통계 확인

이제 실적 패널의 왼쪽 사이드바에 있는 새로운 통계 탭에서 실행 가능한 통계를 확인할 수 있습니다. 통계는 Lighthouse 보고서와 지원 중단될 예정인 성능 통계 패널에서 통합됩니다.

유용한 정보 탭은 웹사이트 속도를 저하시키는 성능 문제에 대한 분석 안내와 실행 가능한 유용한 정보를 제공하는 것을 목표로 합니다. 통계를 활용하려면 실적 패널의 왼쪽 사이드바에서 탭을 열고 다양한 카테고리를 펼치고 항목 위로 마우스를 가져가 클릭합니다. 성능 패널에 트레이스의 해당 이벤트가 강조표시됩니다.

DevTools팀은 유용한 정보의 유용성, 개선 방법, PageSpeed Insights 및 Lighthouse와 같은 다른 도구와 함께 유용한 정보를 사용하는 경험에 관한 의견을 기다리고 있습니다. crbug.com/371170842에서 의견을 남겨주세요.

과도한 레이아웃 변경을 더 쉽게 감지

레이아웃 전환 트랙의 디자인이 새로워졌습니다. 이제 레이아웃 전환이 더 잘 보이는 보라색 다이아몬드로 표시되고 타임라인에서의 근접성에 따라 클러스터로 그룹화됩니다. 요약 탭에서 교대와 클러스터 모두 타이밍, 점수, 요소, 잠재적 원인이 정리된 표를 확인할 수 있습니다.

'레이아웃 전환' 트랙 업데이트 전후 및 '요약' 탭 재구성

또한 실시간 측정항목 보기에서는 상호작용 탭 옆에 점수와 요소가 포함된 레이아웃 전환 로그를 가져옵니다.

실시간 측정항목 보기에 '레이아웃 전환' 로그를 추가하기 전과 후

Chromium 문제: 369100729

합성 작업을 거치지 않은 애니메이션 찾기

이제 애니메이션 트랙에 합성 작업을 거치지 않은 애니메이션에 관한 유용한 정보가 표시됩니다.

  • 상응하는 CSS 속성(있는 경우)에 따라 애니메이션 이름을 지정합니다.
  • 합성 작업을 거치지 않은 애니메이션을 트랙에서 빨간색 삼각형으로 표시합니다.
  • 요약 탭에 합성 실패 이유를 표시합니다.

트랙에서 애니메이션의 이름 지정 전후, 합성되지 않은 애니메이션 표시, 실패 이유 표시

자세한 내용은 컴포지터(compositor) 전용 속성 고수 및 레이어 수 관리를 참고하세요.

Chromium 문제: 41006273

하드웨어 동시 실행이 센서로 이동함

하드웨어 동시 실행 설정이 성능 패널에서 더 적절한 위치인 센서 패널로 이동합니다.

'하드웨어 동시 실행' 설정을 센서 패널로 이동하기 전과 후

Chromium 문제: 371463665

익명 스크립트를 무시하고 스택 트레이스의 코드에 집중

이제 Console의 스택 트레이스가 무시 목록에 있는 파일에서 발생한 프레임을 올바르게 감지, 무시, 접을 수 있으며 (펼쳐진 경우) 비활성화할 수 있습니다. 이전에는 펼쳐진 트레이스에서 함수 이름이 비활성화되지 않았습니다.

새 설정 > 무시 목록 > eval 또는 콘솔의 익명 스크립트를 사용 설정하여 소스 URL이 없는 익명 스크립트를 무시하도록 DevTools를 설정할 수도 있습니다.

스택 트레이스의 무시 목록 개선 전후

또한 콘솔 로그를 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장하면 더보기/보기 축소 텍스트가 저장되지 않습니다.

Chromium 문제: 40279542, 40945570, 345248263

요소 > 스타일: 그리드 오버레이 및 CSS 전반의 키워드에 sideways-* 쓰기 모드 지원

이제 요소 > 스타일 탭에서 다음을 지원합니다.

  • 이제 뷰포트의 그리드 오버레이에 sideways-rl 및 sideways-lr 쓰기 모드의 그리드가 표시됩니다.
  • CSS 전반의 키워드를 확인합니다. 실제로는 예를 들어 inherit이 색상인 경우 스타일 탭에 옆에 색상 선택 도구가 표시됩니다. CSS 전반의 키워드 해결 전후

Chromium 문제: 40280717, 40706051, 40501131

기간 및 스냅샷 모드에서 HTTP가 아닌 페이지에 대한 Lighthouse 감사

이제 Lighthouse에서 기간 및 스냅샷 모드로 HTTP가 아닌 페이지의 보고서를 생성할 수 있습니다.

기간 모드와 스냅샷 모드에서 HTTP가 아닌 페이지의 감사를 사용 설정하기 전과 후

접근성

이 버전에는 다음과 같은 접근성 개선사항이 포함되어 있습니다.

  • 이제 Sources > Editor에서 X 버튼에 포커스를 맞추고 Enter 또는 스페이스바를 눌러 열려 있는 파일이 있는 탭을 닫을 수 있습니다.
  • 이제 성능에서 트레이스의 항목을 선택하고 스페이스바를 눌러 컨텍스트 메뉴를 열 수 있습니다.
  • 실적의 왼쪽 사이드바에 있는 통계 탭은 키보드로 액세스할 수 있으며 '탭을 통해' 이동할 수 있습니다.

Chromium 문제: 372411090

기타 하이라이트

이번 출시에서 주목할 만한 수정사항 및 개선사항은 다음과 같습니다.

  • 이제 성능 및 네트워크 패널 간에 스로틀링 설정이 올바르게 동기화됩니다 (370332090).
  • 이제 애플리케이션 > 백그라운드 서비스 > 예상 로드 > 규칙에 소스 > 편집기와 유사한 {} 멋진 값 표시 버튼이 있습니다 (40279147).
  • 실시간 표현식: 이제 자동 완성 옵션을 선택한 후 탭 키를 누르면 텍스트의 들여쓰기가 아닌 수정 입력란이 닫힙니다 (349939551).
  • 요소 > 스타일: anchor() 및 anchor-size()에서 인수의 순서를 변경하고 anchor-size() 방향을 생략할 수 있는 새로운 문법을 지원합니다 (343516786). 또한 대체 렌더링을 수정했습니다. (365802559)
  • 네트워크: GraphQL 미리보기를 수정했습니다 (369931288).
  • 성능: 이제 트레이스 로드 및 처리의 증분 진행률을 보고합니다.
  • WebAuthn: 이제 signal* 메서드로 수정된 사용자 인증 정보를 동적으로 업데이트합니다 (368467199).
  • WebAssembly: 이제 Console의 경고에서 WebAssembly 모듈에 여러 디버그 기호를 사용할 수 있는지 여부와 사용 중인 기호를 알려줍니다 (40879198, 369515221).
  • 렌더링 탭 328487897에서 코어 웹 바이탈 오버레이가 삭제되었습니다.
  • 이제 생성형 AI 기능에 Chrome 설정 동기화가 필요하지 않습니다.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.