browser-trace은(는) 무엇을 하나요?
모든 브라우저 자동화의 전체 DevTools 프로토콜 추적(CDP 데이터, 스크린샷, DOM 덤프)을 캡처하고, 스트림을 페이지별 검색 가능한 버킷으로 분할합니다. 사용자가 실패한 실행을 디버깅하거나, 네트워크/콘솔/DOM 활동을 감사하거나, 진행 중인 세션에 추적을 첨부하거나, 구조화된 페이지별 요약을 에이전트 루프에 제공하여 다음 반복이 이전에서 학습하도록 할 때 사용합니다.
개요
이 스킬은 브라우저 자동화 세션에서 발생하는 모든 DevTools 프로토콜(CDP) 이벤트, 스크린샷, DOM 덤프를 캡처합니다. 그런 다음 이 데이터 스트림을 각 페이지 방문별로 분할하여 개별적으로 검색하고 분석할 수 있는 버킷을 만듭니다.
사용 사례
- 실패 디버깅: 자동화 실행이 실패한 경우, 추적을 검토하여 실패 지점을 정확히 찾아낼 수 있습니다.
- 네트워크 감사: 모든 네트워크 요청, 응답, 및 오류를 검사합니다.
- 콘솔 활동 모니터링: 모든
console.log,console.error등을 확인합니다. - DOM 상태 검사: 각 지점의 전체 DOM 구조를 검사합니다.
- 성능 분석: 페이지 로드 성능을 측정하고 병목 현상을 식별합니다.
- 에이전트 학습: 에이전트 루프가 이전 실행의 실패로부터 학습할 수 있도록 구조화된 요약을 제공합니다.
지원 플랫폼
- Browserbase
- Stagehand
- Playwright
- Puppeteer
- 기타 CDP 기반 도구
사용 방법
- 브라우저 자동화 세션을 시작합니다.
- CDP 세션을 통해 추적을 활성화합니다.
- 각 페이지 방문에서 스크린샷을 캡처하고 DOM을 덤프합니다.
- 모든 CDP 이벤트를 로그합니다.
- 추적을 페이지별 버킷으로 분할합니다.
- 버킷을 검색하고 분석하여 문제를 식별합니다.
예시
const trace = await captureTrace(browser, page);
await page.goto('https://example.com');
await trace.screenshot();
await trace.dumpDOM();
const buckets = await trace.bisect();
const page1Trace = buckets['page-1'];
console.log(page1Trace.requests); // 모든 네트워크 요청
console.log(page1Trace.console); // 모든 콘솔 로그
console.log(page1Trace.dom); // DOM 스냅샷
추적 콘텐츠
- HAR(HTTP Archive): 모든 네트워크 요청 및 응답
- DOM 스냅샷: 각 지점의 완전한 DOM 구조
- 콘솔 출력: 모든
console.log,console.error등 - 네트워크 오류: 실패한 요청 및 응답
- 성능 메트릭스: 페이지 로드 시간, 리소스 타이밍
- 사용자 상호작용: 클릭, 입력, 스크롤 등
모범 사례
- 중요한 작업 전후에 추적을 캡처합니다.
- 추적을 정기적으로 버킷으로 분할하여 관리를 용이하게 합니다.
- 에이전트 루프에 피드백하여 지속적 개선을 가능하게 합니다.
- 추적을 사용하여 회귀를 감지하고 회귀 테스트를 구축합니다.