Dale St. Marthe
Recorder 패널을 사용하여 사용자 플로우를 녹화, 측정, 수정합니다. Recorder 패널에는 프런트엔드 개발자가 전환 경로를 개선하고 디버그하는 데 도움이 되는 일련의 진단 도구가 포함되어 있습니다. 안내 튜토리얼은 사용자 흐름 녹화, 재생, 측정하기를 참고하세요.
개요
녹음기 패널을 사용하면 다음 작업을 할 수 있습니다.
- 사용자 흐름 녹화 및 재생: 녹화를 시작하여 Recorder 패널이 웹사이트 또는 앱에서 특정 이벤트를 추적하도록 합니다. 그런 다음 사용자 흐름을 재생하고 단계 간에 이동할 수 있습니다. 재생 속도를 낮춰 사용자 흐름에서 어떤 일이 일어나는지 더 잘 이해합니다. 또한 외부 라이브러리로 재생하는 방법도 알아보세요.
- 사용자 플로우 수정 및 디버그: 녹화 중에도 녹화된 사용자 플로우의 단계를 수정할 수 있습니다. 중단점을 설정하고 사용자 흐름을 단계별로 실행합니다. 코드를 검사하여 단계와 코드를 나란히 볼 수 있습니다.
- 성능 프로필 생성: 프로필을 생성하고 성능 패널에서 보고서를 확인하여 기록된 사용자 흐름의 성능을 측정합니다.
- 사용자 흐름 공유 및 내보내기: 사용자 흐름을 내보내기하여 JSON 파일 또는 여러 Puppeteer 형식으로 내보내거나 레코더의 내보내기 확장 프로그램에서 제공하는 모든 형식으로 내보낼 수 있습니다. 사용자 흐름을 가져올 수도 있습니다.
Recorder 패널을 워크플로에 더 효과적으로 통합하고 기능을 확장하려면 확장 프로그램으로 Recorder 패널을 맞춤설정하세요.
Recorder 패널 열기
Recorder 패널을 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Recorder panel를 입력하고 Show Recorder panel(녹음기 패널 표시)을 선택한 다음 Enter 키를 누릅니다.
또는 오른쪽 상단에서 옵션 더보기 > 도구 더보기 > Recorder panel(녹음기 패널)을 선택합니다.