원격 브라우저 지원
Cline의 원격 브라우저 기능은 AI 비서가 제어되는 브라우저 인스턴스를 통해 웹 콘텐츠와 직접 상호 작용할 수 있도록 합니다. 이를 통해 다음과 같은 몇 가지 강력한 기능을 사용할 수 있습니다.
- 웹사이트 보기 및 상호 작용
- 로컬에서 실행 중인 웹 애플리케이션 테스트
- 콘솔 로그 및 오류 모니터링
- 클릭, 입력 및 스크롤과 같은 브라우저 작업 수행
Caret의 원격 브라우저
원격 브라우저란 무엇인가요?
원격 브라우저를 통해 Cline은 웹사이트를 직접 보고 상호 작용할 수 있습니다. 이 기능을 통해 Cline은 다음을 수행할 수 있습니다.
- 웹사이트를 방문하고 콘텐츠 보기
- 로컬에서 실행 중인 웹 애플리케이션 테스트
- 양식 작성 및 요소 클릭
- 보는 내용의 스크린샷 캡처
- 더 많은 콘텐츠를 보기 위해 페이지 스크롤
원격 브라우저 사용 방법
기본 명령
간단한 지침으로 Cline에게 브라우저를 사용하도록 요청할 수 있습니다.
- 웹사이트 열기: "브라우저를 사용하여 https://example.com 웹사이트를 확인해줘"
- 요소 클릭: "로그인 버튼을 클릭해줘"
- 텍스트 입력: "검색 상자에 'Hello world'를 입력해줘"
- 페이지 스크롤: "더 많은 콘텐츠를 보려면 아래로 스크롤해줘"
- 브라우저 닫기: "지금 브라우저를 닫아줘"
예시 워크플로
웹 애플리케이션 테스트:
"npm start"로 React 앱을 시작하고 http://localhost:3000에서 제대로 작동하는지 확인해 줄 수 있나요?
웹사이트 분석:
https://example.com을 방문하여 디자인과 레이아웃에 대해 어떻게 생각하는지 알려줄 수 있나요?
양식 작성:
https://example.com/contact로 이동하여 연락처 양식에 테스트 데이터를 입력하고 제출해 주세요.
알아야 할 중요한 사항
한 번에 하나의 브라우저
Cline은 한 번에 하나의 브라우저만 사용할 수 있습니다. 다른 웹사이트를 방문하려면 다음 중 하나를 수행할 수 있습니다.
- 동일한 브라우저 세션 내에서 새 URL로 이동하도록 Cline에게 요청
- 현재 브라우저를 닫고 새 브라우저를 열도록 Cline에게 요청
다른 도구를 사용하기 전에 브라우저를 닫아야 합니다.
Cline이 브라우저를 사용한 후 파일을 편집하거나 명령을 실행하도록 하려면 먼저 브라우저를 닫도록 요청해야 합니다.
브라우저를 닫고 우리가 본 정렬 문제를 해결하기 위해 CSS 파일을 업데이트해줘.
Caret이 보는 것
브라우저는 작은 노트북 화면과 유사하게 고정된 뷰포트 크기(기본적으로 900x600 픽셀)를 가집니다. Cline은 각 작업 후에 스크린샷을 공유하여 사용자가 보는 것을 정확히 볼 수 있도록 합니다.
콘솔 로그
Cline은 브라우저 콘솔 로그를 캡처하며, 이는 웹 애플리케이션 디버깅에 유용할 수 있습니다. 이러한 로그는 각 스크린샷에 포함됩니다.
일반적인 사용 사례
- 웹 개발: 웹사이트 및 웹 애플리케이션 테스트
- UI/UX 검토: 웹사이트 디자인 및 유용성에 대한 피드백 받기
- 콘텐츠 연구: Cline이 웹사이트를 탐색하여 정보 수집
- 양식 테스트: 양식이 올바르게 작동하는지 확인
- 반응형 디자인 테스트: 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 확인
문제 해결
- 웹사이트가 로드되지 않는 경우: http:// 또는 https:// 접두사가 있는 직접 URL을 제공해 보십시오.
- 클릭이 작동하지 않는 경우: 요소의 위치를 더 정확하게 설명해 보십시오.
- 브라우저가 멈춘 것 같은 경우: Cline에게 브라우저를 닫고 다시 시도하도록 요청하십시오.
WSL에서 VS Code와 함께 원격 브라우저 사용
WSL에서 VS Code를 실행하는 경우 WSL이 Chrome에 연결할 수 있도록 Windows를 구성해야 합니다. 다음 단계를 따르십시오.
관리자 권한으로 PowerShell을 열고 실행:
# WSL이 Chrome의 디버깅 포트에 연결할 수 있도록 허용
New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow
VS Code에서 Caret 구성:
- VS Code 설정 열기
- "Caret: Chrome 실행 파일 경로" 검색
- 값을 Chrome 실행 파일의 경로로 설정합니다(예:
C:\Program Files\Google\Chrome\Application\chrome.exe).
이제 Cline은 WSL 내에서 원격 브라우저 기능을 사용할 수 있어야 합니다.