AI 지원
Chrome DevTools에 직접 통합된 Gemini를 사용하여 개발 워크플로를 강화하세요. 스타일 지정, 성능, 네트워크, 소스에 관한 AI 지원을 통해 디버깅을 간소화하세요.
스타일 지정 버그 수정
스타일 지정 문제는 디버깅하기 어려울 수 있습니다. 요소의 스타일에 관한 자세한 설명을 확인하고 레이아웃 및 스타일 버그를 수정하는 데 도움을 받으세요.
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에게 물어보기 버튼을 찾아 현재 작업과 관련하여 Gemini의 도움을 받으세요.
시작하는 방법을 잘 모르시겠다면
DevTools에서 AI 지원을 위한 프롬프트 아이디어를 살펴보세요. 데모를 실험하거나 자체 웹사이트에서 사용해 보세요.
이미지의 가로세로 비율 수정
Make all teaser images always be 16:9
이미지 중 하나가 다른 이미지와 동일한 방식으로 잘리지 않았나요?
- chrome.dev/cinemai/devtools/ 페이지를 열고 DevTools를 엽니다.
- 시청하여 자세히 알아보기 섹션을 찾아 선택합니다.
- AI 지원 아이콘을 클릭합니다.
- 프롬프트:
Make all teaser images always be 16:9. Apply the suggested change아이콘을 클릭하고 계속 진행합니다.- 버튼은 중앙에 배치해야 합니다.
오버플로 문제 해결
How can I make this element visible?
요소가 표시되지 않나요?
- chrome.dev/cinemai/devtools/ 페이지를 열고 DevTools를 엽니다.
- 스쿠버 다이버 img 요소를 찾습니다.
- AI 지원 아이콘을 클릭합니다.
- 프롬프트:
How can I make this element visible without scrollbars?. Apply the suggested change아이콘을 클릭하고 계속 진행합니다.- 다이버가 화면에 표시됩니다.
헤더의 신비를 벗기기
Are there any security headers present?
특정 리소스의 보안 헤더에 대해 자세히 알아보려면 다음 단계를 따르세요.
- chrome.dev/cinemai/devtools/ 페이지를 열고 DevTools를 엽니다.
- 네트워크 패널에서
v4-chrome.dev.js요청을 선택합니다. - AI 지원 아이콘을 클릭합니다.
- 프롬프트:
Are there any security headers present? - LLM은 리소스의 보안과 관련된 헤더를 설명합니다.
심층 분석
DevTools에서 AI 지원을 사용하여 일반적인 웹 개발 문제를 해결하는 방법을 설명하는 동영상을 살펴보세요.
Chrome 133~135의 영구 AI 채팅 기록
Chrome 133~135에서 영구 AI 채팅 기록 살펴보기
DevTools 130~132의 새로운 기능
제슬린, 올리버, 마티아스가 Chrome 130~132의 AI 어시스턴스를 소개합니다.
의견을 주시면 서비스 개선에 도움이 됩니다.
이 기능은 실험용이며 향후 변경될 수 있습니다. Google의 관점을 반영하지 않는 부정확하거나 불쾌감을 주는 정보를 생성할 수 있습니다. 답변에 투표하여 개선에 참여하고 의견을 계속 보내주세요.