分享移动端真机调试几种方法(更新中)

最新更新请参考移动端真机调试

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

安卓

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

以原生android11 系统为例：

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

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

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

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

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

浏览器场景

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

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

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

点击inspect

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

X5内核类

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

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

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

3️⃣ 重启APP

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

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

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

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

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

IOS

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

windows调试ios

1️⃣ 安装依赖

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

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

2️⃣ iphone 开启 Web Inspector

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

3️⃣ 连接iphone

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

4️⃣ 启动ios-webkit-debug-proxy

命令行输入

remotedebug_ios_webkit_adapter --port=9000

5️⃣ 打开Chrome DevTools

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

MAC调试ios

1️⃣ 开启mac safari 的开发菜单

2️⃣ 连接
打开mac电脑的safari 浏览器， 点击菜单开发选项， 选择设备，应用，调试的网页。

3️⃣ 通过元素或者控制台、网络等调试

跨平台通通用JS 注入类

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

Vconsole

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

支持插件
Vconsole 文档地址

Eruda

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

weinre

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

拓展

Electron 应用调试方法

最新方法

Electron 浏览器窗口中的 DevTools 只能调试在该窗口（即网页）中执行的 JavaScript。要调试在主进程中执行的 JavaScript，您需要使用外部调试器并使用–inspect或–inspect-brk开关启动 Electron。

使用以下命令行开关之一启用主进程的调试：

命令行

--inspect=[port]
Electron 将在指定的 上侦听 V8 检查器协议消息port，外部调试器将需要在此端口上连接。默认port值为 5858.

electron --inspect=5858 your/app

--inspect-brk=[port]
跟 --inspect 一样，只不过会在js的第一行断点，暂停执行

外部

您将需要使用支持 V8 检查器协议的调试器。
chrome://inspect通过访问并选择检查已启动的 Electron 应用程序来连接 Chrome 。

已废弃

–remote-debugging-port=9222

移动端抓包工具实践

Fiddler

待更新

Charles

待更新

常见问题

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

解决方法：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即可。