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의 도움을 받으세요.

나이/성별

대화형 데모를 확인하여 프로젝트에서 AI 지원을 시작하는 방법을 알아보세요.
AI 기반 스타일 수정 기능을 사용해 정적 비행기를 날아오르는 경이로운 비행기로 변신시키고 안전 조치를 취하세요.
AI의 도움을 받아 스크롤바의 악몽을 극복할 수 있을까요? 아니면 다이빙팀이 레이아웃 악몽에 영원히 갇히게 될까요?

시작하는 방법을 잘 모르시겠다면

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 130~132의 AI 어시스턴스를 소개합니다.

시작하기

최신 Chrome을 사용하고 로그인되어 있는지 확인합니다. 만 18세 이상이고 지원되는 위치에 거주해야 합니다.
AI 지원은 기본적으로 사용 중지되어 있습니다. 사용 설정하려면 설정 > AI 지원 섹션으로 이동하세요. AI 지원을 사용하려면 Google 서비스 약관에 동의해야 합니다.
엔터프라이즈 정책을 사용하여 Gemini와 공유된 데이터가 로깅되고 학습에 사용되는지 여부를 제어할 수 있습니다.

의견을 주시면 서비스 개선에 도움이 됩니다.

이 기능은 실험용이며 향후 변경될 수 있습니다. Google의 관점을 반영하지 않는 부정확하거나 불쾌감을 주는 정보를 생성할 수 있습니다. 답변에 투표하여 개선에 참여하고 의견을 계속 보내주세요.