如何调试移动端的页面 bug

如何利用 Safari 浏览器,调试移动端的页面 bug。在 pc 端用手机模拟器测试没有问题,在手机上却有各种问题,如何真机调试?

macOS 调试 Safari

Safari 设置

Safari 偏好设置 -> 高级,勾选“在菜单中显示开发菜单”

iPhone 设置

打开设置 -> 选择 Safari 浏览器 -> 高级,开启"网页检查器"、“JavaScript”

调试

手机和电脑要保证在同一局域网并通过数据线连接,iphone 上打开 Safari 浏览器,访问 web 页面,pc 浏览器点击”开发“,找到手机,选择对应网址即可。

macOS 调试安卓 Chrome

使用 macOS 调试 Android Chrome 主要是利用 Chrome 的远程调试功能。以下是步骤指导:

  1. 准备设备:

    • macOS 电脑安装 Chrome。
    • Android 设备安装 Chrome。
    • 使用 USB 数据线连接你的 Android 设备和 macOS。
  2. 在 Android 设备上启用开发者选项:

    • 转到“设置”->“关于手机”。
    • 点击“版本号”几次,直到出现“您已是开发者”的提示。
    • 返回并找到“开发者选项”,确保“USB 调试”已启用。
  3. 在 macOS 上安装 Android File Transfer:

    • 这允许 macOS 访问 Android 文件系统。虽然此步骤不是严格必要的,但它可以帮助您确保您的设备已正确连接到计算机。
  4. 启动 Chrome 在 macOS:

    • 打开新的浏览器标签页。
    • 输入 chrome://inspect 并回车。
    • 在这个页面,你应该可以看到你的 Android 设备和它上运行的 Chrome 选项卡(如果设备已经正确连接并开启 USB 调试)。
  5. 开始调试:

    • chrome://inspect 页面下,找到你想调试的 Android Chrome 选项卡。
    • 点击 "inspect" 连接到该标签页。
    • 这将打开一个 Chrome 开发者工具窗口,你可以像在桌面浏览器上一样使用它进行调试。
  6. 使用开发者工具:

    • 在这个远程调试窗口中,你可以查看元素,控制台日志,网络请求等,就像在桌面浏览器上一样。
  7. 当完成调试时:

    • 你可以关闭 Chrome 开发者工具窗口,并在 chrome://inspect 页面上从列表中断开设备。

请注意,在进行调试时,建议将 Android 设备保持解锁状态,以确保调试会话不会被中断。

macOS 调试安卓微信内置的 WebView

调试微信内网页技巧

  1. 手机用 usb 连接至电脑
  2. 手机微信内点击 http://debugxweb.qq.com/?inspector=true (只要跳转过微信首页就是开启了调试)
  3. 微信内打开所需调试网址
  4. chrome 浏览器打开 chrome://inspect/#devices 会看到 WebView in com.tencent.mm 下是我们打开的网址
  5. 在点击 chrome 里的 inspect 直接调试