DevTools는 기본 제공 AI 에이전트와 채팅하여 웹사이트를 이해하고 문제를 해결하는 데 도움이 되는 AI 지원 패널을 제공합니다.
AI 지원 패널은 Gemini로 구동되며 다음 작업을 실행합니다.
- 웹 개발을 전문으로 합니다.
- 전체 웹페이지에 관한 일반적인 질문에 답변할 수 있으며 스타일 지정, 네트워킹, 성능 등 다양한 주제에 관한 구체적인 통계를 제공할 수 있습니다.
- DOM 요소, 네트워크 요청, 성능 추적 이벤트 등 채팅할 특정 컨텍스트를 자율적으로 좁히고 선택합니다.
- 감사 실행, 성능 트레이스 기록과 같은 자율 작업을 실행할 수 있습니다.
- 작업과 추론에 관한 단계별 안내와 DevTools의 관련 부분에 대한 링크를 제공하므로 클릭 한 번으로 검사할 수 있습니다.
- 코드 변경사항을 제안하고 내 코딩 에이전트가 실행할 수 있도록 통계가 포함된 프롬프트를 생성할 수 있습니다.
AI 어시스턴스를 사용하면 웹사이트의 스타일 지정, 네트워킹, 성능, 소스 등을 디버그할 수 있습니다.
AI 지원 패널에서 Gemini와 효과적으로 채팅하려면 패널을 열고, 프롬프트를 사용하고, 대화 흐름을 제어하는 방법을 알아보세요.
AI 어시스턴스 패널 열기
기본적으로 AI 어시스턴스 패널이 창에 열립니다.
패널을 열려면 상단의 기본 툴바 오른쪽에 있는 전역 진입점에서 AI 지원 버튼을 클릭합니다.
패널에서
다음 두 가지 방법으로 대화 컨텍스트가 선택된 패널을 요소, 네트워크, 소스 또는 성능 패널에서 직접 열 수 있습니다.
요소, 네트워크 요청, 소스 파일 또는 확장된 성능 통계 옆에 있는
AI로 디버그 버튼을 클릭합니다.
요소, 요청, 파일 또는 트레이스 항목을 마우스 오른쪽 버튼으로 클릭하고 AI로 디버그 컨텍스트 메뉴에서 일반적인 프롬프트 옵션 중 하나를 선택합니다.
명령 메뉴에서
명령 메뉴에서 AI 어시스턴스를 열려면 AI를 입력한 다음 서랍 배지가 옆에 있는 AI 어시스턴스 표시 명령어를 실행합니다.
'도구 더보기' 메뉴에서
또는 오른쪽 상단에서 더보기 옵션 > 도구 더보기 > AI 지원을 선택합니다.
프롬프트 입력
새 대화를 시작할 때 AI 지원은 빠르게 시작할 수 있도록 예시 프롬프트를 제공합니다.
프롬프트를 클릭하면 패널 하단의 프롬프트 입력 필드가 자동으로 채워집니다.
또는 입력 필드에 직접 프롬프트나 질문을 입력합니다.
프롬프트를 보내려면 Enter를 누르거나 입력란의 오른쪽에 있는 화살표를 클릭합니다.
맥락이 없는 개방형 프롬프트
자유 형식 채팅 상자를 사용하면 사전 컨텍스트 없이 상위 수준의 개방형 질문을 할 수 있습니다. 예를 들면 다음과 같습니다.
How to use DevTools to debug accessibility?AI 어시스턴스는 먼저 접근성 관련 Lighthouse 감사를 실행하여 프롬프트에 더 잘 답변합니다.
What are the slowest network requests on this page?AI 지원은 의심스러운 요청 목록과 네트워크 패널의 링크를 제공하므로 클릭 한 번으로 요청을 대화 컨텍스트로 선택할 수 있습니다.
What performance issues exist on the page?AI 지원은 선택한 설정으로 성능 추적을 자동으로 기록하여 이 프롬프트에 답변합니다.
How do I use the Animation panel?또는Where is the high contrast setting in DevTools?과 같은 프롬프트는 DevTools 자체에 대한 직접적인 도움을 제공합니다.
채팅을 시작하면 채팅이 비어 있을 때 AI 지원이 사용자의 작업에 따라 컨텍스트를 지능적으로 업데이트하며, 사용자가 수동으로 선택한 항목은 존중합니다.
컨텍스트가 포함된 프롬프트
패널에서 AI 지원을 열면 채팅 상자에서 해당 대화 컨텍스트가 선택되므로 선택한 항목에 관해 구체적으로 채팅할 수 있습니다.
언제든지 요소, 네트워크의 요청, 성능의 추적 항목 또는 소스의 파일을 선택하여 컨텍스트를 수동으로 변경할 수 있습니다.
예를 들어 소스 패널에서 파일의 일부를 복사하여 채팅에 붙여넣고 그 기능을 물어볼 수도 있습니다.
다음으로 AI 지원의 대화 흐름에 대해 자세히 알아보세요.
대화 흐름
프롬프트를 보내면 에이전트와의 대화가 시작됩니다. 프롬프트에 가장 적절하게 대답하는 데 필요한 정보를 얻기 위해 에이전트는 웹 API를 호출하는 JavaScript를 생성하고 실행합니다.
상담사 진행 상황이 단계별로 표시됩니다. 초기 단계 상태는 Investigating…입니다.
에이전트가 프롬프트에 답변하기 위해 더 구체적인 작업을 실행하면 초기 단계 라벨이 업데이트됩니다.
디버깅하는 내용에 따라 에이전트가 DevTools에서 성능 트레이스 기록 또는 Lighthouse 감사 실행과 같은 작업을 실행할 수도 있습니다.
상담사 둘러보기
에이전트가 프롬프트에 대한 답변을 생성하면 초기 단계 라벨이 에이전트 안내 표시 또는 생각 과정 표시로 변경되며, 이를 펼쳐 오른쪽의 측면 패널에서 에이전트가 데이터를 분석하기 위해 취한 단계를 확인할 수 있습니다.
단계는 다음과 같습니다.
- 에이전트가 반환된 데이터와 함께 실행한 확장 가능한 코드 스니펫입니다. 코드를 복사하여 콘솔에서 실행할 수 있습니다.
- 결과를 사람이 읽을 수 있는 형식으로 표시하는 위젯
위젯의 오른쪽 상단에는 DevTools의 관련 부분으로 이동하는 표시 버튼이 있습니다.
후속 프롬프트
에이전트가 최종 답변을 내놓으면 후속 프롬프트를 제안할 수 있습니다. 대화를 계속하려면 아무거나 클릭하세요.
코딩 에이전트용 프롬프트 생성
내 코딩 에이전트의 프롬프트를 생성하려면 코딩 에이전트에 복사를 클릭합니다.
에이전트는 발견한 내용과 통찰력을 요약하고, 최소화된 형식 또는 사람이 읽을 수 있는 마크다운 형식으로 실행 가능한 프롬프트를 제공합니다. 이 프롬프트를 클립보드에 복사하여 원하는 AI 에이전트로 코딩을 계속할 수 있습니다.
일시중지된 대화
AI 지원은 부작용이 있는 코드를 생성할 수 있습니다. 이 경우 코드가 실행되기 전에 대화가 일시중지됩니다.
대화가 일시중지되면 에이전트가 제안한 코드를 검토합니다. 계속을 클릭하여 계속하거나 취소를 클릭하여 실행을 방지합니다.
변경사항 패널에서 제안된 코드 변경사항을 검사할 수 있습니다.
에이전트는 DevTools 내에서 변경사항을 적용하지만 DevTools가 소스에 변경사항을 저장하도록 작업공간을 구성할 수 있습니다.
작업공간에 변경사항 저장
연결된 작업공간 폴더를 사용하면 AI 지원에서 제안한 스타일 변경사항을 컴퓨터의 CSS 소스 파일에 다시 저장할 수 있습니다.
방법은 다음과 같습니다.
먼저 메타데이터 파일을 생성하고 작업공간 폴더를 연결합니다.
또는 폴더를 수동으로 추가할 수 있습니다.
요소 패널에서 채팅을 시작합니다.
프롬프트 AI 지원을 사용하여 CSS를 수정합니다.
AI 지원이 코드를 생성하고 실행을 일시중지할 수 있습니다. 코드를 검토하고 계속을 클릭하여 변경사항을 라이브로 테스트합니다.
저장되지 않은 변경사항 섹션을 펼치고 작업공간에 적용을 클릭합니다.
diff에서 변경사항을 검토하고 모두 저장을 클릭합니다.
이 워크플로를 알아보려면 다음을 참고하세요.
답변이 제공되지 않음
AI 지원은 다양한 이유로 답변을 제공하지 않을 수 있습니다.
AI 지원에서 논의할 수 있는 프롬프트라고 생각되면 버그를 신고하세요.
대화 기록
대화를 시작하면 이후의 모든 대답은 사용자와 AI 간의 이전 상호작용을 기반으로 합니다.
AI 지원은 세션 간의 대화 기록을 저장하므로 DevTools 또는 Chrome을 다시 로드한 후에도 이전 채팅에 액세스할 수 있습니다.
패널의 왼쪽 상단에 있는 컨트롤을 사용하여 대화 기록을 관리합니다.
새로 시작
현재 선택된 대화 컨텍스트로 새 대화를 시작하려면 버튼을 클릭합니다.
계속
이전 대화를 계속하려면 버튼을 클릭하고 컨텍스트 메뉴에서 선택합니다.
삭제
방문 기록에서 대화를 삭제하려면 버튼을 클릭합니다.
답변 평가 및 의견 제공
AI 지원은 실험 단계의 기능입니다. 따라서 Google은 답변 품질과 전반적인 경험을 개선할 수 있는 방법을 파악하기 위해 적극적으로 의견을 수렴하고 있습니다.
답변에 투표
대답 아래에 있는 좋아요 및 싫어요 버튼을 사용하여 대답을 평가합니다.
답변 신고
부적절한 콘텐츠를 신고하려면 투표 버튼 옆에 있는 버튼을 클릭하세요.