如何调试移动端的页面 bug
Published by powerfulyang on Jul 6, 2023
如何利用 Safari 浏览器,调试移动端的页面 bug。在 pc 端用手机模拟器测试没有问题,在手机上却有各种问题,如何真机调试?
macOS 调试 Safari
Safari 设置
Safari 偏好设置 -> 高级,勾选“在菜单中显示开发菜单”
iPhone 设置
打开设置 -> 选择 Safari 浏览器 -> 高级,开启"网页检查器"、“JavaScript”
调试
手机和电脑要保证在同一局域网并通过数据线连接,iphone 上打开 Safari 浏览器,访问 web 页面,pc 浏览器点击”开发“,找到手机,选择对应网址即可。
macOS 调试安卓 Chrome
使用 macOS 调试 Android Chrome 主要是利用 Chrome 的远程调试功能。以下是步骤指导:
-
准备设备:
- macOS 电脑安装 Chrome。
- Android 设备安装 Chrome。
- 使用 USB 数据线连接你的 Android 设备和 macOS。
-
在 Android 设备上启用开发者选项:
- 转到“设置”->“关于手机”。
- 点击“版本号”几次,直到出现“您已是开发者”的提示。
- 返回并找到“开发者选项”,确保“USB 调试”已启用。
-
在 macOS 上安装 Android File Transfer:
- 这允许 macOS 访问 Android 文件系统。虽然此步骤不是严格必要的,但它可以帮助您确保您的设备已正确连接到计算机。
-
启动 Chrome 在 macOS:
- 打开新的浏览器标签页。
- 输入
chrome://inspect
并回车。 - 在这个页面,你应该可以看到你的 Android 设备和它上运行的 Chrome 选项卡(如果设备已经正确连接并开启 USB 调试)。
-
开始调试:
- 在
chrome://inspect
页面下,找到你想调试的 Android Chrome 选项卡。 - 点击 "inspect" 连接到该标签页。
- 这将打开一个 Chrome 开发者工具窗口,你可以像在桌面浏览器上一样使用它进行调试。
- 在
-
使用开发者工具:
- 在这个远程调试窗口中,你可以查看元素,控制台日志,网络请求等,就像在桌面浏览器上一样。
-
当完成调试时:
- 你可以关闭 Chrome 开发者工具窗口,并在
chrome://inspect
页面上从列表中断开设备。
- 你可以关闭 Chrome 开发者工具窗口,并在
请注意,在进行调试时,建议将 Android 设备保持解锁状态,以确保调试会话不会被中断。
macOS 调试安卓微信内置的 WebView
调试微信内网页技巧
- 手机用 usb 连接至电脑
- 手机微信内点击 http://debugxweb.qq.com/?inspector=true (只要跳转过微信首页就是开启了调试)
- 微信内打开所需调试网址
- chrome 浏览器打开
chrome://inspect/#devices
会看到WebView in com.tencent.mm
下是我们打开的网址 - 在点击 chrome 里的 inspect 直接调试