에이전트를 위한 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.
에이전트 실행 예: 에이전트가 사이트로 이동하고, 베를린을 검색한 다음, 내 위치 사용 기능과 상호작용하여 올바른 매장이 표시되도록 하기 전에 파리를 모방하기 위해 특정 위도 및 경도 좌표를 동적으로 삽입합니다.