Chrome DevTools | Chrome for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome DevTools에 직접 통합된 Gemini를 사용하여 개발 워크플로를 강화하세요. 스타일 지정, 성능, 네트워크, 소스에 관한 AI 지원을 통해 디버깅을 간소화하세요.

첫 번째 프롬프트 실행

아래 대화형 튜토리얼에서 예시 프롬프트를 실행하여 Chrome DevTools에서 Gemini를 사용해 보세요.

스타일 지정 문제는 디버깅하기 어려울 수 있습니다. 요소의 스타일에 관한 자세한 설명을 확인하고 레이아웃 및 스타일 버그를 수정하는 데 도움을 받으세요.

Can you center this element?

요청 및 응답 헤더에는 한눈에 알 수 없는 중요한 정보가 포함되는 경우가 많습니다. AI 지원을 사용하여 다음을 자세히 살펴보세요.

Why does this request fail?

웹사이트의 모든 코드를 직접 작성하는 경우는 드뭅니다. 특정 스크립트가 무엇에 사용되는지 잘 모르시겠다면 AI 지원은 다음과 같은 작업에 도움이 될 수 있습니다.

What is this file used for?

Core Web Vitals가 좋지 않나요? 웹사이트가 느려지는 근본 원인을 찾는 것은 쉽지 않을 수 있습니다. AI 지원은 다음과 같은 문제를 조사하고 해결책을 제안할 수 있습니다.

Help me optimize my LCP score

대화형 데모를 확인하여 프로젝트에서 AI 지원을 시작하는 방법을 알아보세요.

AI 기반 스타일 수정 기능을 사용해 정적 비행기를 날아오르는 경이로운 비행기로 변신시키고 안전 조치를 취하세요.

AI의 도움을 받아 스크롤바의 악몽을 극복할 수 있을까요? 아니면 다이빙팀이 레이아웃 악몽에 영원히 갇히게 될까요?

DevTools에서 AI 지원을 위한 프롬프트 아이디어를 살펴보세요. 데모를 실험하거나 자체 웹사이트에서 사용해 보세요.

Make all teaser images always be 16:9

이미지 중 하나가 다른 이미지와 동일한 방식으로 잘리지 않았나요?

How can I make this element visible?

요소가 표시되지 않나요?

Are there any security headers present?

특정 리소스의 보안 헤더에 대해 자세히 알아보려면 다음 단계를 따르세요.

Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.

문제가 발생했나요? 자세한 버그 신고를 빠르게 만드세요.

네트워크 오류가 있는 웹페이지의 DevTools 열기를 엽니다.
네트워크 패널에서 실패한 요청을 선택합니다.
AI 지원 아이콘을 클릭합니다.
프롬프트: Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
LLM은 문제 추적기에 바로 복사할 수 있는 버그 신고를 생성합니다.