必须先启用Mac Safari“开发”菜单并开启iOS设备Web检查器，再通过USB连接授权，才能进行响应式模拟或远程调试真机网页。
你需要在Mac上用Safari调试iPhone或iPad上打开的网页，但菜单栏没有“开发”选项，设备不显示在菜单里，检查器打不开——这说明开发者模式未启用，且iOS端调试授权缺失，整个调试链路从第一步就中断了。
启用Mac端Safari“开发”菜单
这是所有后续操作的强制前提，没它就看不到“开发”二字，更无法进入响应式模式或识别iOS设备。
1、点击屏幕左上角的 Safari → 选择「设置」（macOS Sonoma及更新系统）或「偏好设置」（旧系统）。
2、切换到「高级」标签页，图标是齿轮状，通常位于最右侧。
3、向下滚动到底部，勾选【在菜单栏中显示“开发”菜单】。
4、关闭设置窗口，立即检查菜单栏：确认「开发」已出现在「书签」与「窗口」之间。【务必确认勾选状态已保存】，若未出现，重启Safari再试一次；仍无效需用终端命令强制写入。
在iOS设备上开启Web检查器并建立物理连接
仅Mac端开通毫无意义，iOS设备必须主动授权远程调试权限，否则Safari for Mac压根发现不了这台设备。
方法一（图形界面）：
1、iPhone或iPad进入「设置 → Safari → 高级」。
2、将「Web检查器」开关滑动至开启（绿色）。
3、用原装或MFi认证USB线连接Mac，并在iOS设备弹出“信任此电脑？”提示时【必须点击“信任”】，否则设备不会被识别。
方法二（终端强制启用，仅当图形界面开启后仍不生效时使用）：
1、打开Mac「终端」，输入：defaults write com.apple.Safari IncludeDevelopMenu -bool true。
2、再输入：killall Safari，强制退出所有Safari进程。
3、重新打开Safari，检查菜单栏是否已出现“开发”菜单。
进入响应式设计模式模拟移动设备屏幕
该模式不只是拉伸窗口，而是真实注入设备级参数——视口宽度、设备像素比（DPR）、用户代理（UA）和缩放行为全部同步，才能让媒体查询真正触发。
① 访问任意已加载完成的网页（确保页面完全渲染完毕，否则CSS媒体查询可能沿用缓存值）。
② 点击顶部菜单栏「开发」→「进入响应式设计模式」。
③ 页面顶部立即出现控制栏，点击设备下拉框，选择「iPhone 15 Pro」等预设型号——这一步会一键同步视口、DPR、UA和缩放，比手动改UA可靠得多。
④ 拖动边框或输入具体数值调整视口大小，观察布局变化。旋转按钮可切换横竖屏，缩放滑块用于精细调节显示比例。
远程调试iOS真机上的网页
当你需要在真实触控环境下验证交互逻辑、手势响应或传感器行为时，必须走这条通路。
第一步：确保iOS设备已通过USB连接Mac，且已在「设置 → Safari → 高级」中开启Web检查器。
第二步：在iOS设备上用Safari打开目标HTTPS网页（如 https://example.com），【严禁使用 file:// 协议的本地HTML文件】，这类页面默认禁用检查器。
第三步：回到Mac，点击顶部菜单栏「开发」→ 展开后等待3～5秒，若看到设备名称（如“iPhone的John”），说明连接成功。
第四步：展开设备名，找到当前正在浏览的网页标题，点击它，Web检查器即刻在Mac端打开，DOM结构、样式、控制台、网络请求全部可用。
