メディア: メディア プレーヤー情報の表示とデバッグ

Jecelyn Yeen

Chrome DevTools のメディアパネルを使用して、ブラウザのタブごとに情報を表示し、メディア プレーヤーをデバッグします。

メディアパネルを開く

DevTools の [Media] パネルは、ページのメディア プレーヤーを検査するための主要な場所です。

1. DevTools を開きます。
2. その他のオプション アイコン > [その他のツール] > [メディア] をクリックして、メディアパネルを開きます。

メディア プレーヤーの情報を表示する

1. メディア プレーヤー（https://youtu.be/e1gAyQuIFQo など）を備えたページにアクセスします。
2. これで、[プレーヤー] メニューの下にメディア プレーヤーが表示されるようになります。
3. プレーヤーをクリックします。[プロパティ] タブに、メディア プレーヤーのプロパティが表示されます。
4. [イベント] タブをクリックして、すべてのメディア プレーヤーのイベントを表示します。
5. [メッセージ] タブをクリックして、メディア プレーヤーのメッセージログを表示します。メッセージは、ログレベルまたは文字列でフィルタできます。
6. [タイムライン] タブでは、メディアの再生とバッファのステータスをリアルタイムで確認できます。

リモートデバッグ

Android デバイスのメディア プレーヤーの情報は、Windows、Mac、Linux パソコンから表示できます。

1. リモート デバッグを設定するには、こちらの手順に沿って操作してください。
2. メディア プレーヤーの情報をリモートで表示できるようになりました。

メディア プレーヤーの表示 / 非表示を切り替える

場合によっては、1 つのページに複数のメディア プレーヤーがある場合や、同じブラウザタブを使用して異なるページを閲覧し、それぞれにメディア プレーヤーを使用する場合もあります。

デバッグしやすくするため、各メディア プレーヤーの表示と非表示を切り替えることができます。

1. 同じブラウザタブで、複数の動画ページを閲覧します。
2. いずれかのメディア プレーヤーを右クリックします。選択したプレーヤーを非表示にするには、[プレーヤーを非表示] を選択するか、[他のプレーヤーをすべて非表示] を選択して他のすべてのプレーヤーを非表示にします。

メディア プレーヤーの情報をエクスポートする

1. いずれかのメディア プレーヤーを右クリックします。
2. [プレーヤー情報を保存する] を選択して、プレーヤー情報を JSON 形式でダウンロードします。