Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

View and debug media players information

Published on

Use the Media Panel in Chrome DevTools to view information and debug the media players per browser tab.

Open the Media panel #

The Media panel is the main place in DevTools for inspecting the media player of a page.

  1. Open DevTools.
  2. Click the More Options More > More tools > Media to open the Media panel.
Media panel

View media players information #

  1. Visit a page with a media player, such as https://youtu.be/e1gAyQuIFQo.
  2. You can now see a media player under the Players menu.
  3. Click on the player. The Properties tab displays the properties of the media player. Media properties
  4. Click on the Events tab to view all the media player events. Media events
  5. Click on the Messages tab to view the media player message logs. You can filter the messages by log level or string. Media messages
  6. The Timeline tab is where you can view the media playback and buffer status live.

Remote debugging #

You can view the media players information on an Android device from your Windows, Mac, or Linux computer.

  1. Follow these steps to set up remote debugging.
  2. Now you can view the media players information remotely.
Remote debugging

Hide and show media players #

Sometimes there might be more than one media player on a page, or you might use the same browser tab browsing different pages, each with media players.

You can choose to show or hide each media player for easier debugging experience.

  1. Browse to several different video pages using the same browser tab.
  2. Right click on one of the media players. You can choose to hide the selected player by select Hide player or select Hide all others to hide all the other players.
Hide media players

Export media player information #

  1. Right click on one of the media players.
  2. Select Save player info to download the player info as json.
Export media information

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.