媒体相关
Media Panel
- 打开一个有视频播放的页面
- 打开 Chrome DevTools，在更多选项里面找到 Media 栏
- 可以在 Properties 和 Events 实时检测到播放器状态
Chrome Media Internal
浏览器访问地址：chrome://media-internals/
Media Internal 是一个深入 Chrome 音频/视频堆栈的工具：
- 它可以从当前页面的媒体中展现出关于处于活跃状态播放器的一切信息。包括缓冲数据、视频属性、事件的时间和事件日志
- 活动音频流的状态和音量
- 媒体缓存的读取和写入
Case:
打开 bilibili 的某个视频，然后在 media internals 的页面可以查看媒体状态：
Video 的参数
Video 加载每个状态的 Log
Audio 相关状态
如果你有 Web Audio 相关开发经验的话，开发时打开这个页面，不难发现每一个流式的 input 和 output 通道都会在这里被展示。
Web Audio 开发
除了上面的 media internals 作为工具，Chrome 的开发团队还提供了一个浏览器插件 Audion 来辅助 Web Audio 的开发，可以通过这个插件来很方便的观测当前页面 AudioContext, AudioNode 等资源的创建，他们之间的关联状态，音频数据的 pipe 流向，以及在应用生命周期结束时是否被正确销毁。
不过这个插件我个人使用下来的体会是，在面临有些 case 时还是不太可用，不过代码是开源的，有时间可以参与贡献，有些场景看资源的状态还是很好用的。
Chrome WebRTC Internal
浏览器访问地址：chrome://webrtc-internals/
当需要监控 WebRTC 通话状态时，可以打开 WebRTC internals 来获取通话当前所有需要的信息：
网络相关
常见的抓包工具 Wireshark 等等就不介绍了
弱网情况以及网络丢包状态模拟
一些用户在消耗媒体资源流的时候，网络可能并没有很流畅。考虑到希望他们能有更好的体验，我们需要在开发阶段就需要考虑到各种 case 来完善我们的产品，这种时候需要模拟一下不同网络情况下的产品表现时，我们可以用以下方案来处理：
- Mac 上常用 Network Link Conditioner 来模拟丢包或者弱网情况
- Chrome 自带的 Network 工具
调试工具
代理
whistle基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应。平时的开发中可以很方便的来使用其来验证定位运行环境时的问题。
感兴趣的朋友可以参考我之前写的配置文章 Whistle 移动端和桌面端详细配置指南
常用的 Code Snippets
一般我们在开发过程中经常会需要调试，通常这些调试代码都是会重复使用的。但是每次都重新输入会占用我们很多时间，因此 Chrome 也提供了一个合适的地方来给我们存放它们。
在 Chrome 的
Sources 面板，在导航栏里选中 Snippets这栏，点击 New snippet，创建完成后，可以右键点击 Run 来运行它。
常见的命令
$0
$0 是对当前选择的 HTML 节点的引用，$1 是对上一次我们选择的节点的引用$_
$_ 是对上一次结果的引用
实时调试运算
可以使用
Live Expression来进行实时监控你需要的对象
