保罗的小宇宙
·
记一次移动端 Safari 调试踩坑
💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
在移动端 Safari 调试中，遇到跨域、重定向和崩溃等问题。通过设置二级域名解决跨域，清空 HSTS 数据解决重定向，调整 Cookie 解决登录态问题。注释 PC 端代码后成功调试崩溃问题，样式问题通过替换元素解决，需验证 AI 生成代码的可靠性。
🎯
关键要点
-
在移动端 Safari 调试中，使用局域网 IP 地址可能会遇到跨域问题，解决方法是建立共享根域的二级域名。
-
访问失败问题可能由于网络连接不稳定，重新连接网络后可解决。
-
重定向问题由 HSTS 技术引起，需要在 Safari 设置中清空网站数据以解决。
-
调试崩溃问题可通过设置 Cookie 的域名和 Path 值来保持登录态。
-
页面崩溃可能是由于打包代码过大，注释掉 PC 端代码后成功缩小文件大小，调试得以正常进行。
-
样式问题可通过替换元素解决，button 元素内部 div 的 aspect-ratio 设置导致元素塌陷。
-
需验证 AI 生成代码的可靠性，不能完全信任。
❓
延伸问答
如何解决移动端 Safari 中的跨域问题？
可以通过建立与测试、生产环境共享根域的二级域名来解决跨域问题，前提是后端允许该二级域名的跨域行为。
在 Safari 中遇到重定向问题该如何处理？
需要在 Safari 设置中清空网站数据，以解决因 HSTS 技术引起的重定向问题。
调试崩溃问题时如何保持登录态？
可以通过在控制台设置 Cookie，并调整 Cookie 的域名和 Path 值为 / 来保持登录态。
为什么移动端页面会崩溃？
页面崩溃可能是由于打包代码过大，建议注释掉不必要的 PC 端代码以减小文件大小。
如何解决样式问题导致的元素塌陷？
可以通过将 button 元素替换为 div 元素来解决样式问题。
调试时如何处理 AI 生成代码的可靠性问题？
需要充分验证 AI 生成的代码，不能完全信任其正确性。
➡️
