火狐浏览器开发者工具如何调试手机版页面的样式？

关于在火狐中调试手机版CSS，很多开发者其实都踩过同一个坑——以为缩放窗口就万事大吉，结果上线后发现样式全乱。真正要精准调试，必须进入真实移动端渲染环境，否则伪类残留、rem单位错乱、@media查询不触发这些问题一个都跑不掉。别折腾了，直接上正确的方法。

启用响应式设计模式

按下

（Windows/Linux）或 （macOS），这是最直接的方式。别指望用鼠标点菜单替代——有些语言包缺失的版本，菜单路径可能压根不显示。如果快捷键抽风，可以点击右上角 ≡ → “更多工具” → “Web 开发者” → “响应式设计模式”。但记得，这些操作必须在目标网页打开之后做，否则工具栏不会加载设备信息。

选择预设设备并确认渲染上下文

左上角下拉框里选个真实机型，比如 iPhone 14 或 Pixel 5。选中后火狐会自动同步三样东西：

，一个都不能少。只调尺寸不改DPR，1px边框会变成两倍粗；不换UA，Ja vaScript里检测mobile的逻辑可能直接跳过关键样式块。再检查页面右上角，“Touch”图标必须亮起。没亮？那触摸事件没模拟，依赖 touchstart 的交互样式（比如 tap-highlight-color）根本不会生效。

打开开发者工具并定位样式

保持响应式模式开着，按 F12 拉出完整开发者工具面板。切换到“检查器”（Inspector）标签页，鼠标悬停或点击页面元素，右侧会实时显示盒模型和所有匹配的CSS规则。那些被划掉的属性是被更高优先级覆盖的；点击属性名左侧的复选框，可以临时禁用某条样式，快速验证视觉效果。

实时编辑与保存调试结果

在样式面板里双击任意CSS值（比如 color: #333）就能编辑，回车确认，修改即刻生效，不用刷新。但要注意：

。正确做法是右键某条CSS规则→“复制为CSS”→粘贴到本地样式文件对应位置。调整过程中，随时拖动响应式工具栏底部的滑块改变宽度，观察不同断点下样式的表现，重点检查 min-width / max-width 媒体查询是否准确触发。