DevTools의 새로운 기능, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini로 CSS 디버그

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

지금 사용해 보세요. 요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 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 속성에 따라 애니메이션 이름을 지정합니다.
  • 합성되지 않은 애니메이션을 트랙에 빨간색 삼각형으로 표시합니다.
  • 요약 탭에 컴포지팅 실패 이유가 표시됩니다.

트랙에서 이름 지정 전후 애니메이션을 표시하고, 합성되지 않은 애니메이션을 표시하고, 실패 이유를 표시합니다.

자세한 내용은 컴포저 전용 속성 사용 및 레이어 수 관리를 참고하세요.

Chromium 문제: 41006273

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

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

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

Chromium 문제: 371463665

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

이제 콘솔의 스택 트레이스에서 무시 목록에 있는 파일에서 가져온 프레임을 올바르게 감지하고, 무시하고, 접고, (확장된 경우) 회색으로 표시합니다. 이전에는 확장된 트레이스에서 함수 이름이 회색으로 표시되지 않았습니다.

설정 > 무시 목록 > 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가 아닌 페이지의 감사를 사용 설정하기 전과 후

접근성

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

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

Chromium 문제: 372411090

기타 하이라이트

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

  • 이제 제한 설정이 성능 및 네트워크 패널 간에 올바르게 동기화됩니다 (370332090).
  • 애플리케이션 > 백그라운드 서비스 > 추측 로드 > 규칙에 이제 소스 > 편집기와 유사한 {} 예쁘게 인쇄 버튼이 있습니다 (40279147).
  • 실시간 표현식: 자동 완성 옵션을 선택한 후 Tab을 누르면 텍스트가 들여쓰기되는 대신 수정 필드가 종료됩니다 (349939551).
  • 요소 > 스타일: anchor() 및 anchor-size()은 인수의 순서를 변경하고 anchor-size() 방향을 생략할 수 있는 새로운 구문을 지원합니다 (343516786). 또한 대체 렌더링을 수정했습니다 (365802559).
  • 네트워크: GraphQL 미리보기를 수정했습니다 (369931288).
  • 성능: 이제 트레이드 로드 및 처리의 증분 진행 상황을 보고합니다.
  • WebAuthn: 이제 signal* 메서드로 수정된 사용자 인증 정보를 동적으로 업데이트합니다 (368467199).
  • WebAssembly: 이제 콘솔의 경고를 통해 WebAssembly 모듈에 사용할 수 있는 디버그 심볼이 여러 개인지, 사용 중인 디버그 심볼이 무엇인지 알 수 있습니다 (40879198, 369515221).
  • 렌더링 탭에서 핵심 성능 보고서 오버레이가 삭제되었습니다(328487897).
  • 이제 생성형 AI 기능을 사용하기 위해 Chrome 설정 동기화가 필요하지 않습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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