Chrome DevTools에서 AI 어시스턴스의 사용 사례를 살펴보고 스타일 지정, 성능 등에서 디버깅 워크플로를 지원하는 방법을 알아보세요.

문서 읽기

스타일 지정

다음과 같은 메시지를 통해 요소의 레이아웃과 이를 수정하는 방법을 자세히 알아보세요.

How is this element laid out?

flex 항목인가요? 절대적으로 배치되나요? 그리드의 일부인가요? AI 지원은 요소 트리의 레이아웃을 요약하고 수정 방법을 보여주는 코드 예시를 제공할 수 있습니다.

작동하지 않는 애니메이션이 있나요? 애니메이션된 요소에 관해 AI 지원 기능에 문의합니다.

Why is my animation not working?

AI 지원은 관련 CSS 속성, 이벤트 리스너 등을 확인하여 잘못된 부분을 찾아내고 문제를 해결할 수 있는 코드 예시를 제공합니다.

데모

스타일 지정 AI 지원을 테스트할 프로젝트가 없나요? DevTools Hangar에서 사용해 보세요.

직사각형 바퀴, 고장난 위치 표시등, 연기가 나는 엔진을 수정하여 DevTools 비행기를 다시 날리기 위한 올바른 메시지를 찾습니다.

데모 살펴보기

… 네트워크

요청 및 응답 헤더에는 한눈에 알 수 없는 중요한 정보가 포함되는 경우가 많습니다. AI 지원에게 설명을 요청합니다. 

Does this request have any notable headers?

특정 요청이 너무 오래 걸리는 것 같지만 이유를 잘 모르겠다고 생각한 적이 있나요? AI 지원에 조사를 요청합니다.

Why is this request taking so long?

AI 어시스턴트는 기록된 시간을 조사하고 문제가 있는 경우 알려줍니다.

… 실적

웹사이트가 느려지는 근본 원인을 찾는 것은 쉽지 않을 수 있습니다. 실적 프로필의 최고점을 파악할 수 없나요? AI 지원은 다음과 같이 통화 트리를 요약할 수 있습니다.

Anything to improve in this call tree?

… for sources

웹사이트에서 사용하는 모든 코드를 작성하는 경우는 드뭅니다. 특정 리소스가 로드되는 이유와 용도를 파악할 수 없나요? AI 지원은 다음과 같은 작업에 도움이 될 수 있습니다.

What is this file used for?

분석 스크립트, 소셜 위젯, A/B 테스트 라이브러리 등 무엇이든 AI 지원이 자세히 살펴보고 찾아냅니다.