Chrome DevTools의 미디어 패널을 사용하여 브라우저 탭별로 정보를 확인하고 미디어 플레이어를 디버그합니다.
미디어 패널 열기
Media 패널은 DevTools에서 페이지의 미디어 플레이어를 검사하는 기본 위치입니다.
- DevTools를 엽니다.
- 옵션 더보기 > 도구 더보기 > 미디어를 클릭하여 미디어 패널을 엽니다.
미디어 플레이어 정보 보기
- https://youtu.be/e1gAyQuIFQo와 같은 미디어 플레이어가 있는 페이지를 방문합니다.
- 이제 Players(플레이어) 메뉴에 미디어 플레이어가 표시됩니다.
- 플레이어를 클릭합니다. 속성 탭에는 미디어 플레이어의 속성이 표시됩니다.
- 이벤트 탭을 클릭하여 모든 미디어 플레이어 이벤트를 확인합니다.
- 메시지 탭을 클릭하여 미디어 플레이어 메시지 로그를 확인합니다. 로그 수준 또는 문자열로 메시지를 필터링할 수 있습니다.
- Timeline 탭에서는 미디어 재생 및 버퍼 상태를 실시간으로 확인할 수 있습니다.
원격 디버깅
Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 미디어 플레이어 정보를 볼 수 있습니다.
- 원격 디버깅을 설정하려면 이 단계를 따르세요.
- 이제 원격으로 미디어 플레이어 정보를 볼 수 있습니다.
미디어 플레이어 숨기기 및 표시
경우에 따라 한 페이지에 미디어 플레이어가 두 개 이상 있거나 동일한 브라우저 탭을 사용하여 여러 페이지를 탐색하며 각 페이지마다 미디어 플레이어가 있을 수 있습니다.
더 쉬운 디버깅 환경을 위해 각 미디어 플레이어를 표시하거나 숨길 수 있습니다.
- 동일한 브라우저 탭을 사용하여 여러 동영상 페이지를 탐색할 수 있습니다.
- 미디어 플레이어 중 하나를 마우스 오른쪽 버튼으로 클릭합니다. 플레이어 숨기기를 선택하여 선택한 플레이어를 숨기거나 다른 모든 플레이어 숨기기를 선택하여 다른 모든 플레이어를 숨길 수 있습니다.
미디어 플레이어 정보 내보내기
- 미디어 플레이어 중 하나를 마우스 오른쪽 버튼으로 클릭합니다.
- 플레이어 정보 저장을 선택하여 플레이어 정보를 JSON으로 다운로드합니다.