«   Previous tip Next tip   »

Chrome DevTools: Inspect videos with the Media Panel

4th November 2020
Inspect videos with the Media Panel

Introduction

The Media Panel in DevTools provides useful video inspection tools. This can be helpful in:

How to use this feature

Trying this feature out is straightforward:

  1. Open a webpage which includes a video, such as a YouTube video.
  2. Select Show Media from the DevTools Command Menu (Cmd + Shift + P).
  3. Observe the the media entry (or entries) in the Media Panel.

There are four tabs (panes) within the Media Panel:

The Media Panel Properties Pane should be enough for most use cases, unless you're doing deep debugging work with media, such as building a custom video player in JavaScript. And on that note, if you are doing such work, you can find detailed explanations of the Media Events (as shown in the Events Pane) within the Chromium source code.

Extra

The Timeline Pane of the Media Panel visualises media playback/buffering states over time. There's also a Paint Profiler Pane in the Performance Panel which can visualise the drawing of a page over time.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week