如何调试移动端的页面 bug

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

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

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

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

使用 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 设备保持解锁状态，以确保调试会话不会被中断。

调试微信内网页技巧

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