最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

世界今日报丨使用 PC 端浏览器开发者工具对移动端真机环境 Web 页面进行远程调试

来源:博客园

Mac/Windows 浏览器开发者工具远程调试 iPhone/Android 页面

在移动端 Web 开发中,有时候只通过模拟器进行调试是不够的,需要在真机环境下进行调试才能发现并解决一些问题。而移动端真机环境浏览器没有开发者工具,在这种情况下,使用 PC 端浏览器开发者工具对移动端真机环境的 Web 页面进行远程调试就显得尤为重要。

以下是一些可能需要使用 PC 端浏览器开发者工具对移动端真机环境的 Web 页面进行远程调试的场景:

  1. 问题只出现在某些特定型号或版本的移动设备上,需要在真机上进行调试才能找出原因。


    (资料图片仅供参考)

  2. 需要对移动端页面的性能进行测试和调优,以确保其在移动设备上的流畅性和响应速度。

  3. 需要在移动设备上测试一些移动特有的功能,如触摸、手势等,以更加准确地模拟真实用户的体验。

  4. 需要在真机上查看页面的实际呈现效果和布局,确保它们与预期相符。

总之,使用 PC 端浏览器开发者工具对移动端真机环境的 Web 页面进行远程调试可以提高调试效率和质量,从而确保移动端 Web 应用程序的稳定性和用户体验。

一、Mac Safari 浏览器开发者工具远程调试 iPhone 页面

要在 Mac 上使用 Safari 浏览器的开发者工具远程调试 iPhone 页面,请按照以下步骤进行操作:

  1. 在 Mac 上启动 Safari 浏览器,并选择“Safari”菜单中的“偏好设置”。在“高级”选项卡中,启用 在菜单栏中显示“开发”菜单

  2. 确保 iPhone 和 Mac 连接到同一个 Wi-Fi 网络(或将 iPhone 通过数据线连接到 Mac 上),并在 iPhone 上打开 Safari 浏览器,并访问目标站点。

    需要注意的是,要通过 Wi-Fi 网络进行连接的前提是:需先通过数据线进行连接,将选项“通过网络连接”勾选上,然后可以通过同一个 Wi-Fi 网络进行连接。

  3. 在 Safari 菜单中,选择“开发”➤“iPhone 名称”➤“网页名称”。如果 iPhone 没有出现在菜单中,请确保在 iPhone 上启用了 Safari 的“Web 检查器”(设置 ➤ Safari 浏览器 ➤ 高级 ➤ Web(或网页)检查器)。

    启用 Web 检查器

  4. 打开“Web 检查器”窗口后,可以使用其中的各种工具进行调试。例如,在“元素”选项卡中,可以查看和编辑网页的 HTML 和 CSS 代码,以及在“控制台”选项卡中查看 JavaScript 错误和调试信息。

请注意,为了使远程调试正常工作,建议 iPhone 上的 Safari 浏览器是最新的版本,并且 Mac 上的 Safari 浏览器也是最新版本。此外,如果遇到连接问题,可以尝试在 iPhone 上打开“设置”>“Safari 浏览器”>“高级”>“Web 检查器”,并确保“Web 检查器”选项已启用。如果仍然无法连接,请尝试重新启动 Safari 浏览器或 iPhone,或者使用数据线连接 iPhone 和 Mac。

二、Windows Chrome 浏览器开发者工具远程调试 Android 页面

要在 Windows 上使用 Chrome 浏览器的开发者工具远程调试 Android 页面,请按照以下步骤进行操作:

  1. 在 Windows 上启动 Chrome 浏览器,并在地址栏中输入“chrome://inspect/#devices”。

  2. 通过数据线将 Android 设备连接到 Windows 设备。

  3. 启用 Android 设备开发者模式:选择设置 ➤ 关于手机 ➤ 版本号,通过连续轻触版本号七次(不同设备可能有不同的操作方式),以启用 Android 设备的开发者模式。

  4. 启用 Android 设备 USB 调试:在 Android 设备上,选择 设置 ➤ 开发人员选项(不同设备可能有不同的操作路径),然后启用 USB 调试。

    由图可知,连接的 Android 设备以展示在列表中。

    如果遇到连接问题,请确保 Android 设备已启用 USB 调试功能,以便电脑可以识别设备。还可以尝试断开并重新连接设备,并确保电脑上已安装了正确的 USB 驱动程序。

  5. 在 Android 设备打开 Chrome 浏览器。

    如图,Android 设备端打开的 Chrome 浏览器展示在下方的列表中,并显示了 Chrome 的版本号和标签页等信息。

  6. 在 Android 设备打开的 Chrome 浏览器中访问目标站点。

  7. 单击“inspect”按钮,这将打开 Chrome 开发者工具窗口,可以在其中进行调试。例如,在“元素”选项卡中,可以查看和编辑网页的 HTML 和 CSS 代码,而在“控制台”选项卡中,可以查看 JavaScript 错误和调试信息。

    在这个视图中,Android 设备显示的内容被镜像投射到 Windows 设备上,开发者工具分析的是 Android 设备的当前页面,而不是 Windows 设备浏览器上的活动会话

    当 Android 设备已连接,并且开发者工具在 Windows 设备上打开时,请尝试对移动网络连接的加载时间进行基准测试,或使用 Performance 面板查看 Android 设备上的页面性能等。

关键词: