미디어: 미디어 플레이어 정보 보기 및 디버그

Jecelyn Yeen

Chrome DevTools의 미디어 패널을 사용하여 브라우저 탭별로 정보를 확인하고 미디어 플레이어를 디버그합니다.

미디어 패널 열기

Media 패널은 DevTools에서 페이지의 미디어 플레이어를 검사하는 기본 위치입니다.

  1. DevTools를 엽니다.
  2. 옵션 더보기 더보기 > 도구 더보기 > 미디어를 클릭하여 미디어 패널을 엽니다.

미디어 패널

미디어 플레이어 정보 보기

  1. https://youtu.be/e1gAyQuIFQo와 같은 미디어 플레이어가 있는 페이지를 방문합니다.
  2. 이제 Players(플레이어) 메뉴에 미디어 플레이어가 표시됩니다.
  3. 플레이어를 클릭합니다. 속성 탭에는 미디어 플레이어의 속성이 표시됩니다. 미디어 속성
  4. 이벤트 탭을 클릭하여 모든 미디어 플레이어 이벤트를 확인합니다. 미디어 이벤트
  5. 메시지 탭을 클릭하여 미디어 플레이어 메시지 로그를 확인합니다. 로그 수준 또는 문자열로 메시지를 필터링할 수 있습니다. 미디어 메시지
  6. Timeline 탭에서는 미디어 재생 및 버퍼 상태를 실시간으로 확인할 수 있습니다.

원격 디버깅

Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 미디어 플레이어 정보를 볼 수 있습니다.

  1. 원격 디버깅을 설정하려면 이 단계를 따르세요.
  2. 이제 원격으로 미디어 플레이어 정보를 볼 수 있습니다.

원격 디버깅

미디어 플레이어 숨기기 및 표시

경우에 따라 한 페이지에 미디어 플레이어가 두 개 이상 있거나 동일한 브라우저 탭을 사용하여 여러 페이지를 탐색하며 각 페이지마다 미디어 플레이어가 있을 수 있습니다.

더 쉬운 디버깅 환경을 위해 각 미디어 플레이어를 표시하거나 숨길 수 있습니다.

  1. 동일한 브라우저 탭을 사용하여 여러 동영상 페이지를 탐색할 수 있습니다.
  2. 미디어 플레이어 중 하나를 마우스 오른쪽 버튼으로 클릭합니다. 플레이어 숨기기를 선택하여 선택한 플레이어를 숨기거나 다른 모든 플레이어 숨기기를 선택하여 다른 모든 플레이어를 숨길 수 있습니다.

미디어 플레이어 숨기기

미디어 플레이어 정보 내보내기

  1. 미디어 플레이어 중 하나를 마우스 오른쪽 버튼으로 클릭합니다.
  2. 플레이어 정보 저장을 선택하여 플레이어 정보를 JSON으로 다운로드합니다.

미디어 정보 내보내기