正文 

当前位置： 首页 > 代码 > java教程

使用pc端浏览器开发者工具对移动端真机环境web页面进行远程调试

飞仔FeiZai 飞仔FeiZai     2023-03-25     624

关键词：

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

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 设备上的页面性能等。

移动端真机调试方法

...析。所以总结一下几个方法。1.Mac++iPhone+ Lightning+Safari浏览器步骤：1）用：Lighting线将mac与iphone相连2）iphone打开Web检查器（设置->Safari->高级->Web检查器）3）iphone用s 查看详情

移动端真机调试实战经验(代码片段)

...手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差距还是蛮大的，所以在chrom中模拟手机显示的情况虽然有一定的效果，但是还是不能完全模拟，我们还需要在真机环境下测试。本文介绍的 查看详情

移动端真机调试终极利器-browsersync（使用方法）

...sBrowserSync是基于Node.js的,是一个Node模块，如果您想要快速使用它，也许您需要先安装一下Node.js 安装适用于MacOS，Windows和Linux。2.安装BrowserSync您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运... 查看详情

移动端手机调试的几种方法

...手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者... 查看详情

如何在移动设备上调试网页

...欢迎分享更多工具。手机端页面，大多运行在webkit内核的浏览器上，但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是，iOS平台只能用自... 查看详情

移动端调试

xx</a使用spy-debugger调试微信或者移动端的网页移动端真机调试</a 查看详情

移动端web开发真机测试

关于移动端WEB开发真机测试亲身实验的一些体会。之前的开发都用Chrom的模拟，但是效果毕竟不如真机，总结几点吧，至于详细的安装过程网上都有教程http://www.cnblogs.com/xiaohuochai/p/5512051.html，这里就不在赘述。BrowserSync是基于Node... 查看详情

腾讯优测优分享|谈谈移动端屏幕适配的几种方法

...发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用 查看详情

关于微信小程序云开发----手机端真机调试

最近我做了一个小程序软件，用到了小程序云开发。在开发者工具中调试，一切正常，需要上传云端的文件和数据都能正常上传，但换成了真机调试，console没有报错，也没有不正常的地方，就是无法将数据上传云端（或者说不... 查看详情

借助freehttp为任意移动端web网页添加vconsole调试(代码片段)

...调试面板。  使用vConsole的项目可以让手机上的Web浏览器，拥有类似PC调试工具的能力。正常情况下使用vConsole需要修改项目 查看详情

移动端开发基础环境配置

...程序项目（因为Hbuilder没有自己的调试工具，只有内置的浏览器），所以在我们开发之前，必须要安装开发者工具。下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html打开上面的地址，进入微信官方文档，点击下载，... 查看详情

移动web

...工作,更要做好移动端的开发.移动端市场份额由高到低的浏览器有:UC.QQ.baidu.360.猎豹.搜狗.opera,其中除了opera拥有自己的内核,其他浏览器都用的webkit内核,所以我们开发移动端时只考虑webkit即可,所以H5和C3可以充分发挥其作用,基本... 查看详情

移动web开发基础(代码片段)

目录浏览器视口meta视口标签Normalize.css初始化默认样式物理像素和物理像素比二倍图背景图片的缩放background-sizeSVG矢量图移动端开发选择单独移动端页面响应式页面CSS3盒子模型box-sizing特殊样式浏览器浏览器按照设备类型来划分&#... 查看详情

无法播放blob视频文件问题(代码片段)

...动端的产品视频播放功能，本地开发环境，在pc端浏览器里面打开是可以正常播放的，但是到了线上测试环境，视频一直播放不了，无论是pc端还是移动端。期初代码只是简单的使用video标签+source标签去实现... 查看详情

调试移动端页面

...要有真机去测试一下，而不是布到测试服务上去之后，再使用真机测试。第一步：手机连接上电脑的局域网，之前在网上找的教程，想的是可能是手机和电脑都使用公司的无线网络，然而这是不可以的。正确的姿势是使用电脑共... 查看详情

9,12移动web

...工作,更要做好移动端的开发.移动端市场份额由高到低的浏览器有:UC.QQ.baidu.360.猎豹.搜狗.opera,其中除了opera拥有自己的内核,其他浏览器都用的webkit内核,所以我们开发移动端时只考虑webkit即可,所以H5和C3可以充分发挥其作用,基本... 查看详情

什么是前端，后端，终端，有什么区别？

...控制工具，还要熟练使用Linux作为开发和部署环境。后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新Web应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术 查看详情

前端基础入门第一阶段-web前端开发基础环境配置

...5时代的大前端：要处理各种端的兼容开发(PC,移动端,各种浏览器)、移动APP开发和移动站点开发，Ajax+服务器端技术开发,异步开发和后台的交互、高级设计模式 查看详情