调试移动端页面，最怕的是什么呢？就是只靠缩放窗口来模拟手机效果。结果发现rem单位全乱了，媒体查询根本不生效，触摸交互也完全不对。

问题的根源在于：仅仅调整窗口尺寸，并没有触发视口重排、设备像素比（DPR）计算和触摸事件模拟这三个关键环节。

所以，要真正在火狐浏览器里还原移动端的渲染环境，必须同步完成这三件事。

启用响应式设计模式

第一步，直接按下 Ctrl + Shift + M（Windows/Linux）或 Cmd + Opt + M（macOS）。这个快捷键是激活响应式设计模式最直接的方式。

别想着用鼠标去菜单里找。因为有些语言包版本里，“更多工具→Web 开发者→响应式设计模式”这个路径可能根本不可见。

如果快捷键无效，那只能点击右上角 ≡ → “更多工具” → “Web 开发者” → “响应式设计模式”。但要记住：必须在打开目标网页之后操作，否则设备下拉框会是空的，UA字符串也无法加载。

选择真实机型并验证渲染上下文

选择机型，同步三个关键要素

在响应式工具栏的左上角，有个设备下拉框。从中选择 iPhone 14 或 Pixel 5 这类预设的真实机型。选中后，火狐会强制同步三个关键要素：视口宽度、设备像素比（DPR）以及匹配的User-Agent字符串。

如果只调尺寸不改DPR，那1px的边框就会变粗两倍。如果不换UA，JavaScript里检测移动端的逻辑就可能跳过关键样式块，导致隐藏导航栏不展开。所以，光调个尺寸绝对不够。

验证触摸事件是否模拟

选择机型后，注意观察页面右上角是否出现亮起的 “Touch”图标。如果没亮，说明触摸事件没有模拟。依赖touchstart的交互样式（比如tap-highlight-color、active状态）都无法触发，调试结果自然就失真了。

定位并实时编辑响应式样式

打开开发者工具，检查元素

保持响应式设计模式开启，按下 F12 打开完整的开发者工具面板。切换到“检查器”（Inspector）标签页。用鼠标悬停或点击页面上的元素，右侧就会实时显示该元素的盒模型与所有匹配的CSS规则。

编辑样式，即时生效

在右侧样式面板里，能看到被划掉的属性——这些是被更高优先级规则覆盖的。点击属性名左侧的复选框，可以临时禁用某条样式，快速验证视觉效果变化。双击任意CSS值，比如 max-width: 768px，就能直接编辑。回车确认，修改立即生效，完全不需要刷新页面。

验证不同断点下的布局行为

第一步：拖动滑块，连续缩放宽度

拖动响应式工具栏底部的滑块，连续缩放宽度，观察布局是否在预期断点处发生切换。

第二步：检查媒体查询是否准确触发

重点检查 @media (min-width: 768px) 和 @media (max-width: 480px) 是否准确触发。如果没触发，问题就出在viewport meta缺失或媒体查询条件写错了。

第三步：切换横屏模式，验证布局响应

点击右上角的旋转图标切换横屏模式，验证flex容器方向、grid模板列数是否随orientation媒体查询正确响应。

【非常重要的一点：不要直接在开发者工具里点“保存”按钮——它只保存到内存，关闭标签页就丢失了】

如果需要持久化修改，正确的做法是：右键某条CSS规则，选择“复制为CSS”，然后粘贴到本地样式文件的对应位置。这个操作必须手动完成，没有捷径。