一葦
阿沐
2023-02-20

移动端远程真机调试

# 移动端远程调试

我们在进行移动端开发的过程中经常会遇到一些不同设备的兼容性问题，这些问题只有在真机上才能复现，这时移动端真机调试就显得尤为重要；这里主要记录一些我在开发过程中用到的真机调试经验~

# vConsole

vConsole (opens new window)是腾讯出的一个轻量、可拓展、针对手机网页的前端开发者调试面板；是一个可以在移动端页面上展示调试信息的工具，可以帮助开发者在移动端实现更加便捷的调试和开发。

vConsole 是一款专门为移动端 Web 开发者提供的一个轻量级的前端调试工具，提供了控制台、日志、网络、元素等多种调试功能，能够帮助我们更方便地进行移动端网页开发和调试。

vConsole 与框架无关的，可以在 Vue、React 或其他任何框架中使用；现在 vConsole 是微信小程序的官方调试工具。

# 使用

详细使用方法参考这里：使用教程 (opens new window)

  • 安装

主要有npm安装和CDN引入两种方式，都可以使用~

  1. npm安装：npm install vconsole
import VConsole from 'vconsole';

// 创建一个vConsole的实例
const vConsole = new VConsole();
// 或者使用配置参数进行初始化
const vConsole = new VConsole({ theme: 'dark' });

// 调用 console 方法输出日志
console.log('Hello world');

// 完成调试后，可销毁 vConsole
vConsole.destroy();
  1. CDN引入：
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 会自动挂载到 `window.VConsole`
  var vConsole = new window.VConsole();
</script>
  • 调试

引入vconsole之后，在移动端设备上重新加载网页，创建vConsole实例，此时 vConsole 控制台会自动弹出，就可以在移动端页面上展示它了。

在 vConsole 控制台中，可以查看控制台输出、网络请求、设备信息、页面元素等信息，并进行相关的调试操作。

默认情况下，在移动端页面上进行双击操作即可展示vConsole。如果需要更改展示vConsole的手势操作，可以在创建vConsole实例时指定相应的配置参数。

vConsole 提供一些公共属性字段、函数方法，以便开发插件。公共属性及方法 (opens new window)

var vConsole = new VConsole({
    defaultPlugins: ['system', 'network', 'element', 'storage'], // 内置插件
    maxLogNumber: 5000, // 超出数量上限的日志会被自动清除
    onReady: function() {
        console.log('vConsole is ready.');
    },
    onClearLog: function() {
        console.log('on clearLog');
    }
});

// 更改配置
vConsole.setOption({maxLogNumber: 1000});

vConsole有内置插件，可抓取 Network 网络请求，所有 XMLHttpRequest | fetch | sendBeacon 请求都会被显示到 Network 面板中。

若不希望一个请求显示在面板中，可添加属性 _noVConsole = true 到 XHR 对象中：

var xhr = new XMLHttpRequest();
xhr._noVConsole = true; // 不会显示到 tab 中
xhr.open('GET', 'http://example.com/');
xhr.send();

内置插件：属性及方法 (opens new window)

# Chrome浏览器真机调试

如果你使用的是Android系统的手机，那么可以使用Chrome浏览器自带的远程调试功能进行真机调试~

  1. 手机开启USB调试模式（以小米12为例）
  • 设置 》 我的设备 》 全部参数 》 MIUI版本，不停双击，直到提示“已进入开发者模式”为止
  • 设置 》更多设置 》开发者选项 》 打开【USB模式】
  1. 之后手机下载最新版的Chrome浏览器（有些在应用商店可能下载不了，可以在手机自带浏览器中输入https://www.google.cn/intl/zh-CN/chrome/进行下载）;同样PC电脑上也需要下载最新版本浏览器；
  2. 下载完成后，用USB数据线连接电脑和手机，PC和手机都连上同一个WIFI，在PC的Chrome浏览器中输入：chrome://inspect，在Devices下面选中Discover USB devices；同时手机也打开Chrome浏览器，随便访问一个页面，即可在PC的页面上看到访问记录，如下图所示：
  1. 之后点击相应页面下的【inspect】，就会弹出如右侧所示的控制台窗口；在这里就可以看到控制台打印的数据和Network下的接口请求，就跟平时在PC开发页面一样，只不过这里是实时展示手机访问的信息；

更神奇的是，在PC上点击跳转也会在手机上执行同样的操作，反过来在手机上操作也是，交互都是同步更新的！在PC控制台上调点样式啥的也能在手机上同步，这样就可以在PC控制台远程调试手机的页面了~

有时手机端访问的url在PC上更新不及时，可能是usb数据线接触不良，重新插入usb，或重新开启【USB模式】试下~ 有时调试页面无法正常展示，可能是需要翻墙~

发现不只在Chrome浏览器中访问能抓到，在手机其他浏览器上访问的页面也能抓到...

参考：移动前端调试方案（Android + Chrome 实现远程调试） (opens new window)

# IOS系统手机真机调试

IOS系统的手机可以通过Safari浏览器进行真机调试。具体步骤如下：

  1. IOS手机设置：设置 》 Safari 》 高级 》 【Web 检查器】打开；

  2. PC端设置：Safari浏览器 》 偏好设置 》 高级 》 勾选【在菜单栏中显示“开发”菜单】，之后就会在Safari浏览器顶部菜单栏多出【开发】选项；

  3. 设置完后，用数据线将手机与电脑连接，然后在手机Safari浏览器中打开需要调试的网址，然后在PC的Safari浏览器的【开发】菜单里就可以看到已连接的设置，和手机打开的网址。

  4. 选择对应的设备和应用程序，在浏览器中打开调试工具。

  5. 在调试工具中可以进行调试，包括查看和修改DOM、CSS、JavaScript等。

需要注意的是，在进行真机调试时，需要将iOS设备和电脑连接在同一局域网下，且需要保证iOS设备的网络连接稳定。同时，需要注意iOS系统的版本和Safari浏览器的版本之间的兼容性。

# 本地开发项目真机调试

上面讲的主要是远程调试手机端直接访问线上链接，而且都需要使用USB数据线链接才能调试；有时候我们在本地开发H5页面时，需要看一下在手机上的兼容性问题，但如果每次都是上线之后再看就很麻烦；那如果想在本地开发的时候就可以直接远程调试页面应该怎么做呢？

# IP调试

这个方法是最简单粗暴的，一般现在本地的vue-cli、vite项目启动后都会同时启动一个如下所示的IP地址，这个IP地址一般就是你电脑IP+端口号

查询自己电脑ip地址（以mac为例）：系统偏好设置 》 网络 》 高级 》 TCP/IP 》IPv4地址

office_blockchain_web3 git:(master) npm run dev

  vite v2.9.12 dev server running at:

  > Local:    http://localhost:8099/
  > Network:  http://10.222.96.147:8099/

启动项目后，之后就直接在手机上访问这个ip地址就可以了~ 前提是手机和PC得在同一个wifi下~！之后本地的修改也会同步在手机上更新~

但这个方法也不是所有浏览器都适用，我试了在微信浏览器中访问有时候可以，在其他浏览器中就是白页，加载不出来...可能是有网络限制...

# Whistle代理真机调试

关于Whistle具体的安装启动，代理和证书的配置whistle官网 (opens new window)已经讲得很详细了，我在常用代理工具整理这篇博文里也有介绍，这里不再赘述~下面主要记录下如何通过Whistle实现h5页面的远程调试~

  1. 配置好Whislte后，我们可以在PC端抓到网络请求；现在在本地启动项目后在whislte里添加一条rules:
127.0.0.1:8099 i.ob.e.weibo.com # 将域名指向本地服务
  1. 手机和电脑在同一局域网下，手机添加代理后，手机端直接访问i.ob.e.weibo.com也就可以访问到本地项目，同时也能在Whistle中抓到网络请求~

现在已经可以在手机端实现查看开发中的H5页面，有什么样式兼容性问题，也可以在开发阶段暴露出来~

# Weinre真机调试

如果想查看手机端访问本地H5页面的console打印情况，页面DOM样式等信息，可以用Whislte内置的Weinre模块来实现~（Whistle确实功能挺强大的~~）

  1. 在Whislte中添加一条rules：
# 前面是手机上需要访问的地址，后面的huaiding_local是自定义的名称~
i.ob.e.weibo.com weinre://huaiding_local
  1. 添加之后就会在Whislte的顶部菜单Weinre中增加一条记录，点击它，会就开如下页面，手机访问i.ob.e.weibo.com，不出意外Targets下就会出现一条访问记录，代表连接成功，之后就可在这个页面查看手机访问时的各种信息了~
  1. 下图就是在PC上查看手机端访问页面的DOM元素，当鼠标悬浮到DOM上时，会发现手机上相应DOM也会高亮~

这样当本地开发H5项目时，就可以通过Whislte + Weinre实现本地真机调试，提前在开发阶段暴露样式兼容问题，通过查看console信息发现真机上的报错问题~

但好像debugger的时候在手机上不会生效，PC上查看的DOM的样式不全...

这里是用Whistle内置的weinre来真机调试的，其实可以直接用weinre来进行调试，只是这里Whistle已经集成了weinre，就不用单独介绍了，用法其实都差不多，具体使用可参考这里wenire真机调试 (opens new window)

# Whistle修改接口返回值

若有修改返回值需求，则先抓包，获取自己所需的接口。

  1. 抓包：在Network中找到需修改返回值的接口，点击该接口，点击右侧的response的body，可查看到该接口的返回值。点击copy，将返回值复制：
  1. 在Values中新建一个json文件，将复制的内容黏贴到该文件中，修改参数为自己所需的接口返回（可新增/修改/删除返回值）：
  1. 在Rules中设置规则
  • 抓包页面右击该接口，Copy-->URL
  • Rules-->Create 添加规则，格式：该接口的请求URL file://{values中存放该接口返回的文件名+文件后缀}，点击菜单中的Save即可生效。即使有请求体，也无需添加请求体，执行后该接口会按照你填写的返回体展示。

如果不需要该规则（无需再修改该接口的返回值时，注释该规则），可在Url前加#

  • 如果是修改请求头，则http://网址 reqHeaders://{values中存放该接口返回的文件名+文件后缀}:
  • 修改请求体，则http://网址 reqBody://{values中存放该接口返回的文件名+文件后缀}:
  • 修改响应体，则http://网址 resBody://{values中存放该接口返回的文件名+文件后缀}:
  1. 在Values中添加对应自定义数据：

  • 自定义请求头：

  • 自定义请求体：

  • 自定义响应体：

  1. 重新进入该接口页面，即可生效~

whistle修改接口返回步骤 (opens new window)

# IOS 模拟器 Xcode Simulator 调试

  • 安装 Xcode: AppStore搜索Xcode, 输入appId和密码，安装

  • 启动 Xcode, 安装platforms：ios（很大，7G左右）, install; 等待安装完成...

  • 打开Simulator: => 点击左上角 Xcode => Open developer tool => Simulator，就可以打开一个模拟器；

打开后电脑的顶部导航栏会有的桌面图标，将它在程序坞中保留就可以创建快捷入口，不用再打开Xcode了；顶部File => Open Simulator可以切换设备；

  • whislte添加全局代理：系统设置 =》 网络 =》 高级 =》 代理 =》http or https, 添加127.0.0.1:8899

这样就可以给桌面应用程序添加代理，我们就可以用 Simulator 调试页面，在 whisltle中抓到请求了~

  • Sarari打开开发者模式：Safari浏览器 =》 设置 =》 高级 =》勾选显示开发者功能

  • Simulator添加证书：跟在真机上一样的：首先需要在模拟器上安装证书，打开模拟器的 Safari 浏览器，输入 rootca.pro 然后回车，就会提示是否下载证书，点允许就下载完成了，之后去设置 -> 通用 -> VPN 与设备管理 -> 安装 whistle 证书 -> 返回 -> 关于本机 -> 证书信任设置 -> whistle 证书开关打开即可；

如果直接访问 https://rootca.pro 提示无法加载，先复制链接，再点击 粘贴并前往 就能下载了？！神奇....

Simulator调试网页：

  1. 本地启动项目，在whistle添加代理；打开Simulator，打开Safari浏览器，输入调试网页url; 这时理论上应该就可以访问本地代码了，也能在whsitle中抓到请求；
  2. Mac打开Safari => 开发 => 用户代理 => 模拟器，这里就会出现刚输入的调试网页url，点击即可开始调试；

Simulator调试App Webview 中的 Web 页面：模拟器上是没有 App Store 的，也不能下载 ipa 文件安装。只能安装基于源代码打包出来的 App Bundle，这里需要找测试同事要一个测试包，直接拖拽进去就可以了~

Proxifier

网页的whistle可以给浏览器的页面添加代理，proxifier可以给桌面应用程序添加代理；proxifier破解版下载参考 (opens new window)，激活后，需要添加host, 修复已损坏, 按提示操作即可~

  • 打开proxifier, 左上角Profile => Proxification rules => Proxies => Add, 添加一条 Action 规则代理到本地8899端口: 127.0.0.1:8899, type为https; 同时w2 start启动whistle

但不太好用是真的...我配半天没代理出来...

参考 (opens new window)

# 其他

#真机调试
上次更新: 9/19/2024, 7:59:59 PM
最近更新
01
taro开发实操笔记
09-29
02
前端跨端技术调研报告
07-28
03
Flutter学习笔记
07-15
更多文章>
Theme by Vdoing | Copyright © 2021-2024 一苇 | 公网备案京ICP备2021006935号-2