保罗的小宇宙
·
记一次移动端 Safari 调试踩坑
内容提要
在移动端 Safari 调试中，遇到跨域、重定向和崩溃等问题。通过设置二级域名解决跨域，清空 HSTS 数据解决重定向，调整 Cookie 解决登录态问题。注释 PC 端代码后成功调试崩溃问题，样式问题通过替换元素解决，需验证 AI 生成代码的可靠性。
关键要点
-
在移动端 Safari 调试中，使用局域网 IP 地址可能会遇到跨域问题，解决方法是建立共享根域的二级域名。
-
访问失败问题可能由于网络连接不稳定，重新连接网络后可解决。
-
重定向问题由 HSTS 技术引起，需要在 Safari 设置中清空网站数据以解决。
-
调试崩溃问题可通过设置 Cookie 的域名和 Path 值来保持登录态。
-
页面崩溃可能是由于打包代码过大，注释掉 PC 端代码后成功缩小文件大小，调试得以正常进行。
-
样式问题可通过替换元素解决，button 元素内部 div 的 aspect-ratio 设置导致元素塌陷。
-
需验证 AI 生成代码的可靠性，不能完全信任。
延伸解读
跨域问题的解决方案
在移动端 Safari 调试时，使用局域网 IP 地址可能导致跨域问题。建立与生产环境共享根域的二级域名是有效的解决方案。这要求后端支持该二级域名的跨域请求，确保调试过程中的数据传递和登录态保持一致。
HSTS引发的重定向问题
HSTS技术可能导致在本地调试时出现强制HTTPS重定向。解决此问题需要在Safari设置中清空网站数据，这样可以避免因HSTS记录而引发的307跳转。用户在调试时应注意这一点，以免浪费时间在无效的重定向上。
调试崩溃的原因与解决
页面崩溃可能是由于打包代码过大，尤其是当PC端代码未被注释时。通过注释掉不必要的PC端代码，文件大小显著减少，从而解决了崩溃问题。开发者在调试时应关注代码的体积，避免因过大而导致的性能问题。
样式问题的处理
在调试样式问题时，注意元素的属性设置。例如，button元素内部的div设置aspect-ratio可能导致元素塌陷。将button替换为div可以解决此问题。开发者应灵活调整元素类型，以确保样式的正常显示。
延伸问答
如何解决移动端 Safari 中的跨域问题？
可以通过建立与测试、生产环境共享根域的二级域名来解决跨域问题，前提是后端允许该二级域名的跨域行为。
在 Safari 中遇到重定向问题该如何处理？
需要在 Safari 设置中清空网站数据，以解决因 HSTS 技术引起的重定向问题。
调试崩溃问题时如何保持登录态？
可以通过在控制台设置 Cookie，并调整 Cookie 的域名和 Path 值为 / 来保持登录态。
为什么移动端页面会崩溃？
页面崩溃可能是由于打包代码过大，建议注释掉不必要的 PC 端代码以减小文件大小。
如何解决样式问题导致的元素塌陷？
可以通过将 button 元素替换为 div 元素来解决样式问题。
调试时如何处理 AI 生成代码的可靠性问题？
需要充分验证 AI 生成的代码，不能完全信任其正确性。
