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