Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

기능 참조

Sofia Emelianova

Jecelyn Yeen

Chrome DevTools Recorder 패널의 포괄적인 기능 참조에서 사용자 흐름을 공유하고, 흐름과 단계를 수정하는 방법을 알아보세요.

Recorder 패널을 사용하는 방법에 관한 기본사항은 사용자 흐름 녹화, 재생, 측정을 참고하세요.

단축키 알아보기 및 맞춤설정하기

바로가기를 사용하여 녹음기를 더 빠르게 탐색하세요. 기본 단축키 목록은 녹음기 패널 단축키를 참고하세요.

녹음기에서 바로 모든 바로가기를 나열하는 힌트를 열려면 오른쪽 상단에서 바로가기 표시를 클릭합니다.

녹음기 단축키를 맞춤설정하려면 다음 단계를 따르세요.

DevTools의 Recorder 패널 헤더에 있는 드롭다운 메뉴를 사용하여 수정할 사용자 플로우를 선택할 수 있습니다.

Recorder 패널 상단에는 다음 작업을 위한 옵션이 있습니다.

새 녹화 추가 + 아이콘을 클릭하여 새 녹화를 추가합니다.
모든 녹화 파일 보기 드롭다운에 저장된 녹화 목록이 표시됩니다. N recording(s)(녹화 파일 [개수]) 옵션을 선택하여 저장된 녹화 파일 목록을 펼치고 관리합니다.
녹음 파일 내보내기 스크립트를 추가로 맞춤설정하거나 버그 신고를 위해 공유하려면 다음 형식 중 하나로 사용자 흐름을 내보내면 됩니다.
- JSON 파일
- @puppeteer/replay 스크립트
- Puppeteer 스크립트
- Puppeteer (Firefox용) 스크립트
- Puppeteer (Lighthouse 분석 포함)
형식에 관한 자세한 내용은 사용자 흐름 내보내기를 참고하세요.
녹음 파일 가져오기 JSON 형식만 가능합니다.
녹음 파일 삭제 선택한 녹음 파일을 삭제합니다.

녹화 항목 옆에 있는 수정 버튼 을 클릭하여 녹화 항목의 이름을 수정할 수도 있습니다.

녹음기에서 사용자 흐름을 내보내고 가져올 수 있습니다. 버그를 재현하는 단계의 정확한 기록을 공유할 수 있으므로 버그 신고에 유용합니다. 외부 라이브러리로 내보내고 재생할 수도 있습니다.

사용자 흐름을 내보내려면 다음 안내를 따르세요.

각 기본 내보내기 옵션으로 다음 작업을 할 수 있습니다.

JSON. 사람이 읽을 수 있는 JSON 객체를 수정하고 JSON 파일을 Recorder로 다시 import.
@puppeteer/replay Puppeteer Replay 라이브러리를 사용하여 스크립트를 재생합니다. @puppeteer/replay 스크립트로 내보낼 때는 단계가 JSON 객체로 유지됩니다. 이 옵션은 CI/CD 파이프라인과 통합하면서도 단계를 JSON으로 유연하게 수정하고 나중에 변환하여 Recorder로 다시 가져올 수 있는 경우에 적합합니다.
Puppeteer 스크립트 Puppeteer로 스크립트를 재생합니다. 단계가 JavaScript로 변환되므로 단계를 반복하는 등 더 세부적인 맞춤설정을 할 수 있습니다. 단, 이 스크립트를 Recorder로 다시 가져올 수는 없습니다.
Puppeteer (Firefox용) WebDriver BiDi 지원의 일환으로 이 Puppeteer 스크립트를 Chrome과 Firefox에서 모두 실행할 수 있습니다.
Puppeteer (Lighthouse 분석 포함) 이 내보내기 옵션은 이전 옵션과 동일하지만 Lighthouse 분석을 생성하는 코드가 포함되어 있습니다.

스크립트를 실행하고 flow.report.html 파일의 출력을 확인합니다.
```
# npm i puppeteer lighthouse
node your_export.js
```