DevTools의 새로운 기능, Chrome 131

Gemini로 CSS 디버그

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

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

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

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

DevTools팀은 여러분의 의견을 기다리고 있습니다. crbug.com/364805393에 자유롭게 남겨 두세요.

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

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

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

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

DevTools에서 더 이상 AI 기능에 대한 설정 동기화를 켜지 않아도 됩니다. 따라서 이전에 출시된 Console 통계와 스타일 지정을 위한 AI 지원을 클릭 한 번으로 이용하실 수 있습니다.

Chrome에 로그인되어 있는 경우 설정 > AI 혁신에서 이 기능을 사용 설정하면 바로 사용할 수 있습니다.

성능 패널 개선사항

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

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

실적 패널의 왼쪽 사이드바에 새로운 주석 탭이 추가되어 실적 발견 항목을 공유할 때 trace 탐색 및 공동작업을 위한 메모를 만드는 프로세스를 간소화할 수 있습니다.

이제 트레이스에서 바로 이벤트에 라벨을 지정하고 화살표로 연결하며 시간 범위를 강조 표시할 수 있습니다. 그런 다음 주석이 달린 트레이스를 저장 및 공유하고 다시 Performance 패널에 업로드할 수 있습니다.

성능 패널에서 바로 성능 통계 확인하기

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

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

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

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

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

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

Chromium 문제: 369100729

합성되지 않은 애니메이션 찾기

이제 Animations 트랙에서 합성되지 않은 애니메이션에 관한 유용한 정보를 확인할 수 있습니다.

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

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

Chromium 문제: 41006273

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

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

Chromium 문제: 371463665

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

이제 콘솔의 스택 트레이스가 무시 목록에 포함된 파일에서 비롯된 프레임을 올바르게 감지, 무시, 축소, 비활성화 (확장된 경우)합니다. 이전에는 펼쳐진 트레이스에서 함수 이름이 비활성화되지 않았습니다.

또한 새로운 설정 Settings > Ignore list > check_box eval 또는 console의 익명 스크립트를 사용 설정하여 소스 URL 없이 익명 스크립트를 무시하도록 DevTools를 설정할 수도 있습니다.

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

Chromium 문제: 40279542, 40945570, 345248263

요소 > 스타일: 그리드 오버레이 및 CSS 전체 키워드에 대한 sideways-* 작성 모드 지원

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

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

Chromium 문제: 40280717, 40706051, 40501131

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

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

접근성

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

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

Chromium 문제: 372411090

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

• crbug.com에서 의견 및 기능 요청을 제출하세요.
• DevTools에서 more_vert 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고하세요.
• @ChromeDevTools에서 트윗하세요.
• DevTools의 새로운 기능 관련 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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