移动端真机调试的一些方案

2024-07-30

mobile 1.6k 字 5 分钟

移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题，比如说微信内部调试h5。真机调试没有像PC 端一样方便，需要借助各种工具来实现，下面就列举下，我在项目中常用的一些调试方法。

安卓

安卓需要在开启开发者模式。国内各种定制系统的开启方法不一致。具体的请使用google 或者 baidu 查询。

以原生android11 系统为例：

设置  -> 关于手机 -> 版本号  点击5次  输入PIN 密码 即可开启`

设置 ->  系统 -> 高级 -> 开发者选项 -> USB 调试  开启。

数据线连接安卓手机 -> 允许USB 调试

安卓11后默认支持无线调试，具体方法参考安卓11无线调试，安卓10以下参考谷歌文档。

进行调试前，前完成以上准备。

浏览器场景

使用工具chrome inspect, 这是一个调试的神器，能解决大部分场景的调试问题。还可以配合其他工具应对一些特殊的场景。常用的浏览器webkit 内核浏览器都可以使用此种方法。

打开手机浏览器输入网址打开网页

打开电脑 Chrome 地址栏输入chrome://inspect

点击inspect

控制台可以正常开始调试了（模拟器会屏蔽一些用户操作交互，比如点击事件，需要你操作真机，模拟器会同步的）

微信内部调试（X5弃用后）

仅支持安卓

微信访问 http://debugxweb.qq.com/?inspector=true

预览

提示执行成功

看到提示执行成功，即可使用inspect来调试。

不仅可以调试微信公众号页面，甚至小程序以及小程序的webview 一样可以inspect

预览

微信inspect

X5内核类（基本不维护，可用性差，微信请参考上面的微信内部调试）

TIP

2024.07.30 更新---最新的x5 服务好像不能用，经确认X5转为收费，原有的X5服务已经停止。

最新版本微信可以使用,上方的方式进行调试

~~当然还有些场景是在APP内部比如说是微信内部的网页调试，或者是hybrid应用开发（X5内核类）。~~

在使用x5内核的app内打开X5调试

选择信息Tab，勾选打开Tbs内核inspector调试功能，打开vconsole调试功能。

重启APP

打开APP内任意一个h5页面，如果出现vconsole就算成功。

手机链接电脑，方法参考准备工作。

当您连接搭载 Android 4.2.2 或更高版本的设备时，系统会显示一个对话框，询问您是否接受允许通过此计算机进行调试的 RSA 密钥。这种安全机制可以保护用户设备，因为它可以确保只有在您能够解锁设备并确认对话框的情况下才能执行 USB 调试和其他 adb 命令。

电脑打开chrome, 地址栏输入`chrome://inspect`, 等待你的设备显示，找到需要调试的webview，点击inspect

这一步可能比较慢，如果打不开可以考虑使用代理。

IOS

ios 移动端调试原则上建议直接使用mac safari 调试简单易操作。

windows调试ios

:one: 安装依赖

在windows 上调试的话要依赖第三方的工具。具体准备如下：

iTunes(微软商店)
ios-webkit-debug-proxy(需要使用scoop安装)
remotedebug-ios-webkit-adapter（npm安装）
chrome

:two: iphone 开启 Web Inspector

设置位置 设置 - Safari浏览器 - 高级 - 网页检查器 开启

:three: 连接iphone

通过USB连接电脑，启动iTunes可能会提示“信任此计算机”对话框。信任就可以了。

:four: 启动ios-webkit-debug-proxy

命令行输入

remotedebug_ios_webkit_adapter --port=9000

:five: 打开Chrome DevTools

打开chrome浏览器地址栏输入chrome://inspect/#devices, 在手机safari打开网页，等待片刻就可以在chrome devTools 看到的网页了，点击下方的inspect 即可。

MAC调试ios

:one: 开启mac safari 的开发菜单

:two: 连接打开mac电脑的safari 浏览器

跨平台通通用JS 注入类

此类都是通过插入dom, 模拟调试工具，使用起来也比较简单，引入js, 初始化就可以了。

Vconsole

现在用的最多的应该是腾讯的Vconsole, 小程序内置的也是这个，基本的功能都可有。但是有时候Network查看响应数据滚动会有一下bug。Dom 面板查看dom树不好用

支持插件 Vconsole 文档地址

Eruda

功能更齐全一点，但是资源会更大一点，DOM Network 的使用体验更好。还有一些开发的功能，显示所有边框，刷新页面（APP 内调试方便），一些H5 新接口的测试等等支持插件，扩展更多功能 Eruda

weinre

推荐chii，可以完全替代

weinre这个比较早了，最早的微信网页调试工具内置的调试工具就是这个。设置相对麻烦，但是可以通过局域网连接电脑调试手机页面。这个很久不维护了，而且chrome://inspect, 体验比这个好太多了。 weinre

chii

类似weinre 的远程调试工具，用最新的chrome devtools 前端取代 web 检查器，这个devtool跟chrome几乎一样，没有什么学习门槛。

使用方法也很简单，开法本地电脑全局安装chii, 然后启动

# 安装
npm install chii -g
# 启动
chii start -p 8080

然后将脚本注入到html中，以vue项目为例调试时候可以直接写死script标签到html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta
      name="viewport"
      content="telephone=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no, minimal-ui"
    />
    <title></title>
  </head>
  <body>
    <!-- 添加这一行代码 -->
    <script src="http://本机IP:8080/target.js"></script>
    <div id="app" style="height: 100%"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

电脑打开localhost:8080，找到需要调试到页面inspect即可

更多用法参考官网chii

拓展

Electron 应用调试方法

已废弃

~~--remote-debugging-port=9222~~

移动端抓包工具实践

Fiddler

Charles

常见问题

1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台来源审核菜单。

inspect

解决方法：safari版本有问题需要下载最新的预览版本 Safari Technology Preview

参考链接： Safari Web Inspector tabs are missing

2. Safari 远程调试移动端webview, 找不到待调试页面

解决方法：再次确认手机上的safari 高级设置中的网页检查器 是否开启。如果已经开启，那就是原生打包的设置禁用了调试，在Build Settings 中Provisioning Profile中设置了xxx_dis发布版，需要原生给你重新打包，将改设置修改为xxx_dev或者automatic, 重新安装，就可以正常调试了。

3. chrome inspect 一直不出现设备。

解决方法：一般由于网络原因引起，需要使用代理，可以访问google即可。无法访问的推荐使用edge浏览器，所有操作一致，访问edge://inspect 即可

移动端真机调试的一些方案

安卓

浏览器场景

微信内部调试（X5弃用后）

X5内核类（基本不维护，可用性差，微信请参考上面的微信内部调试）

在使用x5内核的app内打开X5调试

选择信息Tab，勾选打开Tbs内核inspector调试功能，打开vconsole调试功能。

重启APP

打开APP内任意一个h5页面，如果出现vconsole就算成功。

手机链接电脑，方法参考准备工作。

电脑打开chrome, 地址栏输入`chrome://inspect`, 等待你的设备显示，找到需要调试的webview，点击inspect

IOS

windows调试ios

MAC调试ios

跨平台通通用JS 注入类

Vconsole

Eruda

weinre

chii

拓展

Electron 应用调试方法

最新方法

命令行

外部

已废弃

移动端抓包工具实践

Fiddler

Charles

常见问题

1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台来源审核菜单。

2. Safari 远程调试移动端webview, 找不到待调试页面

3. chrome inspect 一直不出现设备。

#移动端真机调试的一些方案

#安卓

#浏览器场景

#微信内部调试（X5弃用后）

#X5内核类 （基本不维护， 可用性差， 微信请参考上面的微信内部调试）

#在使用x5内核的app内打开X5调试

#选择信息Tab，勾选打开Tbs内核inspector调试功能，打开vconsole调试功能。

#重启APP

#打开APP内任意一个h5页面， 如果出现vconsole就算成功。

#手机链接电脑，方法参考准备工作。

#电脑打开chrome, 地址栏输入chrome://inspect, 等待你的设备显示，找到需要调试的webview， 点击inspect

#IOS

#windows调试ios

#MAC调试ios

#跨平台通通用JS 注入类

#Vconsole

#Eruda

#weinre

#chii

#拓展

#Electron 应用调试方法

#最新方法

#命令行

#外部

#已废弃

#移动端抓包工具实践

#Fiddler

#Charles

#常见问题

#1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台 来源 审核菜单。

#2. Safari 远程调试移动端webview, 找不到 待调试页面

#3. chrome inspect 一直不出现设备。

移动端真机调试的一些方案

安卓

浏览器场景

微信内部调试（X5弃用后）

X5内核类（基本不维护，可用性差，微信请参考上面的微信内部调试）

在使用x5内核的app内打开X5调试

选择信息Tab，勾选打开Tbs内核inspector调试功能，打开vconsole调试功能。

重启APP

打开APP内任意一个h5页面，如果出现vconsole就算成功。

手机链接电脑，方法参考准备工作。

电脑打开chrome, 地址栏输入`chrome://inspect`, 等待你的设备显示，找到需要调试的webview，点击inspect

IOS

windows调试ios

MAC调试ios

跨平台通通用JS 注入类

Vconsole

Eruda

weinre

chii

拓展

Electron 应用调试方法

最新方法

命令行

外部

已废弃

移动端抓包工具实践

Fiddler

Charles

常见问题

1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台来源审核菜单。

2. Safari 远程调试移动端webview, 找不到待调试页面

3. chrome inspect 一直不出现设备。