Debugging videos with the Media badge in Chrome DevTools
It works for audio too, but first you need to enable it.
I’m Jecelyn Yeen, currently working on Chrome Tooling - Chrome DevTools, Puppeteer and more at Google. I tend to talk about web development, debugging & testing.
Prefer video over text? Head to the end for the video version.
Attention video and audio debuggers! Tired of digging through code to troubleshoot media issues? Say hello to the Media badge, your new best friend.
Here's how to enable it:
Head to the Elements panel.
Right-click on any node and select Badge settings.
Check the box Media.
That's it! Now, when you inspect a video element, a nifty media badge pops up next to it.
Click the badge to unlock the power of the Media panel. This dedicated space lets you dive deeper into playback details, analyze buffer states, and even control playback right from DevTools!
Want to level up your media debugging skills? Check out this link for more information: goo.gle/devtools-media.