Chrome DevTools设备模拟需选具体机型或启用设备仿真并显示绿色提示条才生效；本地服务须绑定0.0.0.0并用局域网IP访问；真机调试需iOS/macOS双端开启Web Inspector、USB信任及Android正确启用调试开关。
直接用 Chrome DevTools 的设备模拟 + 本地 HTTP 服务 + 真机局域网访问，就能覆盖 80% 的兼容性问题。花哨的云平台或虚拟机不是必须项，反而容易掩盖真机渲染差异。
Chrome Device Mode 怎么开才真正生效
点设备图标只是入口，不等于启用真实 viewport 行为。很多 @media 查询和 meta name="viewport" 逻辑在默认 “Responsive” 模式下根本不会触发。
- 必须手动选一个具体设备（如 iPhone 12 或 Pixel 5），或点击齿轮图标 → 勾选
Enable device emulation并设置 UA 和屏幕尺寸 - 页面顶部出现绿色提示条 “Device emulation enabled” 才算成功，否则
@media (max-width: 768px)可能压根没运行 -
window.innerWidth会被正确模拟，但screen.width不会更新——如果 JS 里用了后者做判断，得手动刷新后观察值
为什么真机访问 localhost 总是 404
这不是代码问题，是网络层限制：手机的 localhost 指向它自己，不是你的开发机。
- 查开发机局域网 IP（
ipconfig或ifconfig），把本地服务绑定到0.0.0.0:3000（不是默认的127.0.0.1:3000） - 手机浏览器访问
http://192.168.x.x:3000，确保和电脑在同一 Wi-Fi - 嫌配 IP 麻烦？用
npx serve或python3 -m http.server 8000，它们默认就监听所有接口
iOS Safari 远程调试连不上常见卡点
连不上基本不是线缆问题，而是三个开关没全开，缺一不可。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- iOS 端：设置 → Safari → 高级 → 开启
Web Inspector；且不能是私密浏览标签页 - macOS Safari：偏好设置 → 高级 → 勾选
Show Develop menu in menu bar - USB 连接后，首次需在 iPhone 上点“信任此电脑”；若 iOS > 16.4，页面含
document.write()或未关闭的console.debug()会导致 Inspector 卡白屏
Android WebView 调试连不上主因
绝大多数情况是调试开关根本没打开，而不是 ADB 或 Chrome 设置问题。
-
WebView.setWebContentsDebuggingEnabled(true)必须在Application或Activity.onCreate()中调用，晚于 WebView 实例创建就无效 - 只对
debug包生效（android:debuggable="true"），release 包即使写了也白搭 - Chrome 桌面版访问
chrome://inspect后，要点击 “Configure…” 加入设备 IP，或保持 USB 连接；部分华为/小米 ROM 会拦截通道，换原生模拟器可快速验证是否系统限制
最常被忽略的是：模拟器永远无法复现真机的 GPU 渲染、字体 fallback、地址栏动态遮挡（导致 100vh 在 iOS 上不准）、甚至系统级缩放策略。哪怕所有工具都显示正常，也得拿三台不同品牌真机跑一遍 viewport、fixed 元素、字体加载和 touch 事件。
