Chrome浏览器提供四种开启FPS监控的方式：一、命令面板输入“FPS meter”启用；二、DevTools渲染面板勾选帧率监视器；三、Performance面板录制后查看FPS时间线；四、快捷键Alt+Shift+F（部分版本支持）。

如果您希望在浏览网页时实时观察页面渲染性能，Chrome 浏览器提供了原生支持的 FPS 监控功能。以下是开启页面帧率实时显示的具体操作路径与多种启用方式：

一、通过命令面板快速启用 FPS Meter

Chrome 的命令面板（Command Menu）提供最简捷的入口，适用于所有主流版本，无需手动查找菜单层级。

1、在 Chrome 页面中按下 Shift + Ctrl + P（Windows/Linux） 或 Shift + Command + P（Mac），调出命令搜索框。

2、在输入框中键入 frames per second 或 FPS meter。

3、从下拉列表中选择 Show Frames Per Second Meter 并按回车。

4、页面左上角将立即出现浮动窗口，实时显示当前 FPS 值、单帧耗时（ms）、GPU 使用率及内存占用。

二、通过渲染（Rendering）面板启用帧渲染统计

该方法调用 DevTools 的 Rendering 工具集，除 FPS 外还同步呈现 GPU/CPU 渲染管线状态，适合深度性能观察。

1、按下 F12 或右键页面空白处选择“检查”，打开开发者工具。

2、点击右上角 ⋮（更多选项） → 选择“更多工具” → 点击“渲染”。

3、在弹出的渲染设置面板中，勾选 ✅帧率监视器（部分版本显示为“帧渲染统计信息”）。

4、确认勾选后，页面左上角即显示包含 FPS、帧时间、GPU 利用率的叠加浮窗。

三、通过 Performance 面板启动录制并查看 FPS 时间线

此方式不提供常驻浮窗，但可在录制结束后获得精确到毫秒的 FPS 趋势图与掉帧定位，适用于问题复现与分析。

1、打开开发者工具后，切换至顶部 Performance 标签页。

2、确保已勾选 Screenshots 和 Memory 选项。

3、点击左上角红色圆形录制按钮，或按 Ctrl + E（Windows/Linux） / Command + E（Mac） 启动录制。

4、执行目标操作（如滚动、动画播放、交互触发），持续数秒后再次点击录制按钮停止。

5、录制完成后的瀑布图顶部即显示 FPS 时间线，绿色区域代表 ≥60 FPS，黄色/红色区域标识掉帧区间。

四、使用快捷键组合直接唤起 FPS 浮窗（部分版本支持）

某些 Chrome 版本（含 Canary 及 120+ 稳定版）支持快捷键直启，绕过菜单导航，提升调试效率。

1、保持 Chrome 窗口处于焦点状态，按下 Alt + Shift + F（Windows/Linux）或 Option + Shift + F（Mac）。

2、若快捷键生效，页面左上角将立即显示 FPS 浮窗；若无响应，说明当前版本未启用该快捷键绑定。

3、可进入 chrome://flags/#enable-devtools-experiments 启用实验性功能，再于 DevTools 设置中开启“Enable FPS shortcut”选项（如有）。