에이전트용 Chrome DevTools를 사용하면 에이전트가 반응형 레이아웃을 확인하고, 위치 인식 API를 테스트하고, 다양한 CPU 또는 네트워크 속도를 시뮬레이션할 수 있습니다. 이러한 도구를 사용하여 특이 사례를 식별하고 성능 감사를 더 효과적으로 자동화하세요.
이러한 에뮬레이션 기능은 요소 클릭, 양식 작성, 페이지 탐색 등 에이전트가 사이트와 상호작용할 수 있도록 지원하는 다른 도구와 함께 작동합니다.
에뮬레이션할 수 있는 항목은 다음과 같습니다.
- 뷰포트 및 사용자 에이전트: 특정 화면 크기 및 기기 식별자를 에뮬레이션합니다.
- 위치정보: 위치 인식 API를 테스트하기 위해 위치 좌표를 스푸핑합니다.
- 네트워크 및 CPU: 네트워크 조건과 CPU 속도를 제한하여 실제 성능 제약 조건을 시뮬레이션합니다.
- 색 구성표: 밝은 모드와 어두운 모드 간에 전환합니다.
에뮬레이션을 사용할 때는 다음 사항에 유의하세요.
- 기기 지원: 상담사는 Puppeteer의
KnownDevices목록에 있는 모든 기기를 에뮬레이션할 수 있습니다. 여기에는 모바일 뷰포트의 터치 이벤트 시뮬레이션이 포함됩니다. - 브라우저 엔진 동작: 이 도구는 기기 특성을 에뮬레이션하지만 Chromium이 아닌 브라우저 엔진이나 다른 운영체제는 시뮬레이션하지 않습니다. 에이전트는 항상 현재 운영체제의 Chrome에서 실행됩니다.
사용자 에뮬레이션 사용 사례
코드 변경 후 매번 브라우저 크기를 수동으로 조정하거나, IP를 스푸핑하거나, 네트워크를 제한하는 대신 환경을 에뮬레이트하고 UI를 확인하도록 에이전트에게 지시하세요.
이러한 워크플로를 사용하여 개발 프로세스에 에뮬레이션을 통합하세요.
반응형 디자인 반복
탐색 패턴은 모바일과 데스크톱 폼 팩터 간에 크게 달라지는 경우가 많습니다. 애플리케이션을 빌드할 때 에이전트가 방금 작성한 구성요소가 올바르게 렌더링되고 기기 간에 동일한 콘텐츠를 제공하는지 확인하도록 지시할 수 있습니다.
프롬프트 예시:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
에이전트 실행 예: 에이전트가 Chrome 창을 열고 페이지로 이동하여 에뮬레이션을 시작하고 두 뷰포트의 항목을 비교합니다. 모바일 보기 (햄버거 메뉴)와 데스크톱 보기 (헤더)에 예상 링크가 포함되어 있는지 확인합니다.
교차 뷰포트 상호작용 검증
레이아웃은 CSS뿐만 아니라 상호작용 중에도 깨집니다. 정적 스크린샷은 사용자가 실제로 UI를 터치할 때 발생하는 버그를 놓치는 경우가 많습니다. 여러 뷰포트에서 특정 상호작용 흐름을 테스트하여 숨겨진 기능 버그를 포착하도록 에이전트에게 요청할 수 있습니다.
프롬프트 예시:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
에이전트 실행 예: 에이전트가 검색어를 입력하고 화면 크기를 세 가지 크기로 각각 조정합니다. 이 예에서 에이전트는 태블릿과 모바일에서 검색창이 헤더의 전체 너비로 확장되어 로그인 링크를 가리는 것을 포착합니다.
위치 인식 기능 프로토타입 제작
사용자의 실제 위치 (예: '내 주변' 검색 또는 매장 찾기)를 사용하는 API를 테스트하려면 일반적으로 센서를 수동으로 재정의해야 합니다. 이제 에이전트에게 특정 지리적 위치를 스푸핑하도록 지시하여 프런트엔드 및 백엔드 로직을 원활하게 확인할 수 있습니다.
프롬프트 예시:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
에이전트 실행 예: 에이전트가 사이트로 이동하고, 베를린을 검색한 다음, 파리를 에뮬레이션하기 위해 특정 위도 및 경도 좌표를 동적으로 삽입한 후 내 위치 사용 기능과 상호작용하여 올바른 매장이 표시되도록 합니다.