Chrome DevTools - 性能监控
你是否经常需要 JavaScript 或者 CSS 进行优化,但是不能找到一个简单的方式来衡量优化的效果?
当然,你可以使用时间轴来记录,但是在大多数情况下,时间轴只记录数据,并不是实时更新的。在这点还有其他的性能测量技巧,Chrome DevTools 添加了 "Performance Monitor(性能监控)" 选项卡,可以体现实时性能:
这些都是在 Chrom 稳定版本中可用的并且可以进行以下性能监控:
- 打开 URL:"chrome://flags/#enable-devtools-experiments"
- 将 "Developer Tools experiments" 选项设置为 "启用"
- 点击 "Relaunch now" 来重启 Chrome
- 打开 Chrome DevTools (快捷键为 CMD/CTRL + SHIFT + I)
- 打开 DevTools "Setting" -> "Experiments" 选项
- 点击 6 次 SHIFT 显示隐藏的选项
- 选中 "Performance Monitor" 选项
- 重启 DevTools (快捷键 CMD/CTRL + SHIFT + I)
- 点击 "Esc" 打开附加面板
- 选择 "Performance monitor"
- 单击启用 / 禁用
- 开始使用性能监控吧
来源: https://juejin.im/post/5a37b2f56fb9a0451e3fe73d