Chrome DevTools のメディアパネルを使用して、ブラウザのタブごとに情報を表示し、メディア プレーヤーをデバッグします。
メディアパネルを開く
DevTools の [Media] パネルは、ページのメディア プレーヤーを検査するための主要な場所です。
- DevTools を開きます。
- その他のオプション アイコン > [その他のツール] > [メディア] をクリックして、メディアパネルを開きます。
メディア プレーヤーの情報を表示する
- メディア プレーヤー(https://youtu.be/e1gAyQuIFQo など)を備えたページにアクセスします。
- これで、[プレーヤー] メニューの下にメディア プレーヤーが表示されるようになります。
- プレーヤーをクリックします。[プロパティ] タブに、メディア プレーヤーのプロパティが表示されます。
- [イベント] タブをクリックして、すべてのメディア プレーヤーのイベントを表示します。
- [メッセージ] タブをクリックして、メディア プレーヤーのメッセージログを表示します。メッセージは、ログレベルまたは文字列でフィルタできます。
- [タイムライン] タブでは、メディアの再生とバッファのステータスをリアルタイムで確認できます。
リモートデバッグ
Android デバイスのメディア プレーヤーの情報は、Windows、Mac、Linux パソコンから表示できます。
- リモート デバッグを設定するには、こちらの手順に沿って操作してください。
- メディア プレーヤーの情報をリモートで表示できるようになりました。
メディア プレーヤーの表示 / 非表示を切り替える
場合によっては、1 つのページに複数のメディア プレーヤーがある場合や、同じブラウザタブを使用して異なるページを閲覧し、それぞれにメディア プレーヤーを使用する場合もあります。
デバッグしやすくするため、各メディア プレーヤーの表示と非表示を切り替えることができます。
- 同じブラウザタブで、複数の動画ページを閲覧します。
- いずれかのメディア プレーヤーを右クリックします。選択したプレーヤーを非表示にするには、[プレーヤーを非表示] を選択するか、[他のプレーヤーをすべて非表示] を選択して他のすべてのプレーヤーを非表示にします。
メディア プレーヤーの情報をエクスポートする
- いずれかのメディア プレーヤーを右クリックします。
- [プレーヤー情報を保存する] を選択して、プレーヤー情報を JSON 形式でダウンロードします。