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