不用 Mac,在 iPhone 上调试网页

先跑诊断:自动化的一遍

动手戳 DOM 之前,先让自动扫描把显而易见的问题报出来:OpenHTML 的诊断列出页面引用却缺失的文件、被隐私默认值拦下的远程资源、JavaScript 运行时报错和编码问题——能一键修复的(放行网络、启用 JS、切本地服务器)直接给按钮。

实际使用中,大多数「为什么白屏 / 没样式 / 只有一半能用」几秒内就在这一步解决,AI 生成的页面尤其如此——它们经常引用从未真正生成的文件。

控制台:页面在说什么

控制台实时捕获页面 JavaScript 的 log、warn、error 输出。未捕获异常连同报错信息都会落在这里——交互失灵时,这通常是最快的一条线索。

元素检查器:DOM 就在设备上(Pro)

• 点任意元素查看标签、属性和计算样式。
• 就地改属性验证猜想——去掉那个 class,布局是不是就正常了?
• 从被检查的元素一键跳到源码查看器中对应的行。

网络面板:每个请求带耗时(Pro)

观察 fetch、XHR 和 WebSocket 流量:URL、状态码、大小、耗时——相当于把网络标签页装进了手机。整段会话可以导出为 HAR 文件,回到桌面用 DevTools、Charles 或 Proxyman 深入分析。

记住隐私默认值:页面在你按文档放行之前不能触网,所以网络面板一片空白可能只是页面被保持在离线状态——诊断会明确说。

复现真实运行条件

• 本地服务器模式(Pro)在 127.0.0.1 上伺服项目,fetch()、ES modules、JSON 加载与线上一致——ZIP 网页项目的刚需。
• 视口预设(Pro)以手机 / 平板 / 桌面宽度渲染页面,揪出响应式问题。
• 页面对移动端适配过头时,请求桌面版网站(Pro)加载桌面布局。

一次真实的排查

1. 导入页面或项目;诊断报出一个被拦的 CDN 样式表和一条控制台报错。
2. 为该文档放行网络 → 样式回来了;报错还在。
3. 控制台指向 app.js 里一个未定义变量;源码查看器直接跳到那一行。
4. 在检查器里改 DOM 属性确认修复思路——回到电脑上正式改文件,再导入验证。