DevTools는 AI 에이전트와 채팅하여 웹사이트를 이해하고 문제를 해결하는 데 도움이 되는 AI 지원 패널을 제공합니다.
AI 어시스턴스를 사용하면 웹사이트의 스타일, 네트워킹, 성능, 소스를 디버깅할 수 있습니다.
AI 지원 패널에서 Gemini와 효과적으로 채팅하려면 패널을 열고, 프롬프트를 사용하고, 대화 흐름을 제어하는 방법을 알아보세요.
AI 어시스턴스 패널 열기
AI 어시스턴스 패널이 서랍에 열립니다.
패널을 열려면 상단의 기본 툴바 오른쪽에 있는 전역 진입점에서 AI 지원 버튼을 클릭합니다.
요소, 네트워크, 소스 또는 성능 패널에서 요소 또는 요청을 마우스 오른쪽 버튼으로 클릭하고 AI에게 물어보기를 선택하여 패널을 직접 열 수도 있습니다.
명령 메뉴에서
명령 메뉴에서 AI 지원을 열려면 AI를 입력한 다음 서랍 배지가 옆에 있는 AI 지원 표시 명령어를 실행합니다.
'도구 더보기' 메뉴에서
또는 오른쪽 상단에서 더보기 옵션 > 도구 더보기 > AI 지원을 선택합니다.
프롬프트 입력
새 대화를 시작할 때 AI 지원은 빠르게 시작할 수 있도록 예시 프롬프트를 제공합니다.
프롬프트를 클릭하면 패널 하단의 프롬프트 입력 필드가 자동으로 채워집니다.
또는 입력 필드에 직접 프롬프트나 질문을 입력합니다.
프롬프트를 보내려면 Enter를 누르거나 입력란의 오른쪽에 있는 화살표를 클릭합니다.
무료 채팅 상자를 사용하면 '개발자 도구를 사용하여 접근성을 디버깅하는 방법' 또는 '느린 네트워크 요청은 무엇인가'와 같은 상위 수준 질문을 할 수 있을 뿐만 아니라 소스 패널과 같은 곳에서 파일의 일부를 복사하여 채팅에 붙여넣고 그 기능을 물어볼 수도 있습니다.
스타일링을 위한 AI 지원
스타일 지정에 AI 지원 패널을 사용하여 웹사이트의 전체 레이아웃, 특정 요소 스타일을 파악하고 CSS 버그에 대해 AI가 생성한 수정사항을 확인하세요.
요소 패널에서 AI 어시스턴스 열기
요소 패널에서 AI 지원을 열려면 DOM 노드를 검사할 때 노드를 마우스 오른쪽 버튼으로 클릭하고 AI에게 질문하기 옵션을 선택합니다.
이와 같이 AI 지원을 열면 검사된 DOM 요소가 이미 대화의 컨텍스트 요소로 사전 선택되어 있습니다.
또는 마우스를 가져간 DOM 노드에 연결된 플로팅 버튼을 클릭합니다.
대화 컨텍스트
AI 어시스턴스와의 채팅은 항상 현재 검사 중인 요소와 관련이 있으며, 이 요소는 Elements 패널 DOM 트리에서 마지막으로 선택된 요소입니다. 이 요소에 대한 참조는 패널의 왼쪽 하단에 표시됩니다.
현재 요소 옆에 있는 요소 선택기를 사용하거나 요소 패널 DOM 트리에서 선택하여 컨텍스트를 변경합니다.
컨텍스트를 선택한 상태에서 뷰포트의 스크린샷을 캡처하여 채팅에 제출할 수 있습니다. 채팅 입력 필드 옆에 있는 스크린샷 찍기 버튼을 클릭합니다.
스크린샷을 사용하여 프롬프트에 시각적 맥락을 추가할 수 있습니다. 예를 들어 표시되는 모든 버튼의 간격이 동일한지 확인할 수 있습니다.
현재 검사된 요소가 대화의 기반이 되지만 AI 어시스턴스는 모든 웹 API에 액세스하여 검사된 페이지에서 더 많은 정보를 수집할 수 있습니다. 여기에는 document.querySelector로 다른 요소를 쿼리하거나 계산된 스타일을 평가하는 것이 포함됩니다.
네트워크를 위한 AI 어시스턴스
AI 지원 패널을 사용하여 웹사이트에서 전송된 요청을 파악합니다.
네트워크 패널에서 AI 어시스턴스 열기
네트워크 패널에서 AI 어시스턴스를 열려면 요청을 마우스 오른쪽 버튼으로 클릭하고 AI에게 질문하기 옵션을 선택합니다.
이와 같이 AI 지원을 열면 선택한 네트워크 요청이 대화의 컨텍스트로 사전 선택됩니다.
또는 마우스를 가져간 네트워크 요청 옆에 있는 플로팅 버튼을 클릭합니다.
대화 컨텍스트
AI 지원이 포함된 채팅은 네트워크 패널 요청 목록에서 현재 선택된 네트워크 요청과 관련이 있습니다. 이 요청에 대한 참조는 패널의 왼쪽 하단에 표시됩니다.
네트워크 패널에서 다른 요청을 클릭하여 컨텍스트를 변경합니다.
AI 지원은 요청 URL, 헤더, 타이밍, 요청 이니시에이터 체인을 사용하여 질문에 답변합니다.
중요: 민감한 정보가 포함될 수 있는 헤더는 자동으로 수정됩니다.
대화를 시작한 후 Analyzing network data 칩에서 펼치기 버튼을 클릭하여 AI 어시스턴스에서 사용하는 원시 데이터를 확인합니다.
실적을 위한 AI 어시스턴스
성능의 AI 지원 패널을 사용하여 성능 패널에 기록된 성능 프로필을 파악합니다.
성능 패널에서 AI 어시스턴스 열기
성능 패널에서 AI 어시스턴스를 열려면 먼저 성능 프로필을 기록하세요.
조사하려는 내용에 따라 개별 성능 통계 또는 성능 트레이스 뷰의 활동에서 **AI 지원** 패널을 열 수 있습니다.
성능 통계
통계 탭에서 통계를 엽니다(예: **단계별 LCP). 그런 다음 AI 질문하기** 버튼을 클릭합니다.
DevTools는 이 성능 통계가 대화의 컨텍스트로 사전 선택된 상태로 AI 어시스턴스 패널을 엽니다.
성능 추적 보기
트레이스 뷰에서 AI 지원을 열려면 활동을 마우스 오른쪽 버튼으로 클릭하고 AI에게 질문하기 옵션을 선택합니다.
이 경우 이 활동이 대화의 컨텍스트로 미리 선택됩니다.
대화 컨텍스트
선택한 실적 활동은 AI 지원과의 대화의 컨텍스트로 사용됩니다. 이 활동에 대한 참조는 패널의 왼쪽 하단에 표시됩니다.
성능 통계
특정 실적 통계에 대해 AI에 질문하기를 클릭한 경우 이 통계가 선택된 컨텍스트로 표시됩니다. 다른 통계 아래에서 AI에게 질문하기를 클릭하여 선택사항을 변경할 수 있습니다.
대화를 시작한 후 Analyzing insight: ... 섹션을 펼쳐 AI 지원에서 사용되는 원시 데이터를 확인합니다.
trace 뷰
성능 추적에서 다양한 항목을 선택할 수 있으며 컨텍스트가 그에 따라 변경됩니다.
AI 지원은 선택한 통화 트리에서 타이밍을 사용하여 프롬프트에 답변합니다.
대화를 시작한 후 Analyzing call tree 칩에서 버튼을 클릭하여 AI 어시스턴스에서 사용되는 원시 데이터를 확인합니다.
소스에 대한 AI 어시스턴스
소스의 AI 지원 패널을 사용하여 웹사이트에서 로드하고 사용하는 파일을 파악합니다.
소스 패널에서 AI 어시스턴스 열기
소스 패널에서 AI 지원을 열려면 파일을 마우스 오른쪽 버튼으로 클릭하고 AI에게 질문하기 옵션을 선택합니다.
이와 같이 AI 지원을 열면 선택한 파일이 대화의 컨텍스트로 미리 선택됩니다.
또는 파일 위로 마우스를 가져갈 때 표시되는 플로팅 버튼을 클릭합니다.
대화 컨텍스트
선택한 파일은 AI 지원과의 대화에 컨텍스트로 사용됩니다. 이 파일에 대한 참조는 패널의 왼쪽 하단에 표시됩니다.
소스 패널에서 다른 파일을 클릭하여 컨텍스트를 변경합니다.
AI 지원은 선택한 파일의 이름, URL, 소스 맵 (사용 가능한 경우) 및 콘텐츠를 사용하여 질문에 답변합니다.
대화를 시작한 후 Analyzing file 칩에서 버튼을 클릭하여 AI 어시스턴스에서 사용하는 원시 데이터를 확인합니다.
대화 흐름
프롬프트를 보내면 스타일링 에이전트와의 대화가 시작됩니다. 프롬프트에 가장 적절하게 대답하는 데 필요한 정보를 얻기 위해 에이전트는 웹 API를 호출하는 JavaScript를 생성하고 실행합니다. 상담사 진행 상황이 단계별로 표시됩니다. 초기 단계 상태는 Investigating…입니다.
에이전트가 질문을 해결하기 위해 더 구체적인 작업을 실행하면 단계 라벨이 업데이트됩니다.
에이전트가 최종 답변을 내놓으면 후속 프롬프트에 대한 제안을 포함하여 조사 단계 아래에 답변이 표시됩니다.
추천 프롬프트 중 하나를 클릭하여 대화를 계속합니다. 아이콘을 클릭합니다.
조사 단계를 통해 AI 지원이 백그라운드에서 수행한 작업을 더 잘 이해할 수 있습니다.
진행 상황 칩을 펼치면 상담사가 실행한 코드와 반환 값이 표시됩니다. 콘솔 패널에서 실행하는 등 추가 사용을 위해 실행된 코드를 복사합니다.
일시중지된 대화
AI 지원은 부작용이 있는 코드를 생성할 수 있습니다. 이 경우 코드가 실행되기 전에 대화가 일시중지됩니다.
대화가 일시중지되면 에이전트가 제안한 코드를 검토합니다. 계속을 클릭하여 계속하거나 취소를 클릭하여 실행을 방지합니다.
작업공간의 변경사항 저장
연결된 작업공간 폴더를 사용하면 AI 지원에서 제안한 스타일 변경사항을 컴퓨터의 CSS 소스 파일에 다시 저장할 수 있습니다.
방법은 다음과 같습니다.
먼저 메타데이터 파일을 생성하고 작업공간 폴더를 연결합니다.
또는 폴더를 수동으로 추가할 수 있습니다.
요소 패널에서 채팅을 시작합니다.
프롬프트 AI 지원을 사용하여 CSS를 수정합니다.
AI 지원이 코드를 생성하고 실행을 일시중지할 수 있습니다. 코드를 검토하고 계속을 클릭하여 변경사항을 라이브로 테스트합니다.
저장되지 않은 변경사항 섹션을 펼치고 작업공간에 적용을 클릭합니다.
diff에서 변경사항을 검토하고 모두 저장을 클릭합니다.
이 워크플로를 알아보려면 다음을 참고하세요.
답변이 제공되지 않음
AI 지원은 다양한 이유로 답변을 제공하지 않을 수 있습니다.
AI 지원에서 논의할 수 있는 프롬프트라고 생각되면 버그를 신고하세요.
대화 기록
대화를 시작하면 이후의 모든 대답은 사용자와 AI 간의 이전 상호작용을 기반으로 합니다.
AI 지원은 세션 간의 대화 기록을 저장하므로 DevTools 또는 Chrome을 다시 로드한 후에도 이전 채팅에 액세스할 수 있습니다.
패널의 왼쪽 상단에 있는 컨트롤을 사용하여 대화 기록을 관리합니다.
새로 시작
현재 선택된 대화 컨텍스트로 새 대화를 시작하려면 버튼을 클릭합니다.
계속
이전 대화를 계속하려면 버튼을 클릭하고 컨텍스트 메뉴에서 선택합니다.
삭제
방문 기록에서 대화를 삭제하려면 버튼을 클릭합니다.
답변 평가 및 의견 제공
AI 지원은 실험 단계의 기능입니다. 따라서 Google은 답변 품질과 전반적인 경험을 개선할 수 있는 방법을 파악하기 위해 적극적으로 의견을 수렴하고 있습니다.
답변에 투표
대답 아래에 있는 좋아요 및 싫어요 버튼을 사용하여 대답을 평가합니다.
답변 신고
부적절한 콘텐츠를 신고하려면 투표 버튼 옆에 있는 버튼을 클릭하세요.