使用浏览器配合手机调试&使用Proxy劫持（3类真机调试技巧）

发表于 更新于 分类于 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

image-20220515130434086

Chrome+Android/Safari+IOS

适用场景：开发环境真机调试

Safari+IOS

Mac Safari 浏览器（顶部菜单栏左上角）>高级>选中在菜单栏中显示“开发”菜单，此时，浏览器界面顶部菜单多出一个“开发”选项。

IOS 手机>设置>Safari 浏览器>高级>打开 Web 检查器，IOS 手机需数据线连接到 Mac，回到 Mac Safari 浏览器，选择菜单栏上的开发选项，出现xxx' iPhone，则 success。

命令行输入ipconfig，查看 Mac 的本地局域网 IP 地址。该地址替换项目的 localhost，正常访问项目。Mac Safari 浏览器的开发选项>xxx' iPhone>会出现该 IP，点击开始真机调试。

没有 Mac 怎么办？苹果早期推出过在 Windows PC 上的 Safari 浏览器，很可惜，Apple 不再提供 Windows 版 Safari 浏览器更新。Windows 版 Safari 浏览器 5.1.7 是适用于 Windows 的最后一个版本，而且现已过时。官网详见

Chrome+Android

Android 手机打开开发者模式>打开 USB 调试，Android 手机需连接到 Win PC，Win Chrome 浏览器地址栏输入chrome://inspect/#devices，稍等一会儿，手机会出现是否允许 USB 调试之类的弹窗，允许便是。再回到当前 Win Chrome 浏览器，就会出现当前数据线连接 win PC 的手机型号、WebView 相关信息，则 Success。点击 inspect，就可以开始真机调试了，如果界面没有反应，需要考虑手机和 PC 浏览器版本是否是最新版了。如果还是白屏无反应，则需要开启专有虚拟网络（科学上网环境）。

为什么会白屏，出不来，是因为这个过程中，需要调取谷歌的某些服务，而这些服务需要科学上网环境才可以访问。

本地跑的项目，IP 地址别忘了查询替换 localhost，win PC 下查询 IP，可通过 cmd 命令行输入ipconfig获取。

Fiddler/Charles

使用 Proxy 劫持。适用场景：线上环境调试

Fiddler/Charles 比较局限性，只能看到接口的情况。

Weinre,Spy-Debugger,vConsole

项目里插入脚本调试，也可以说是借助依赖，可以是 cdn，也可以安装本地项目中。

Weinre

Weinre(Web Inspector Remote)是一款基于 Web Inspector(Webkit)的远程调试工具， 它使用 JS 编写， 可以让我们在电脑上直接调试运行在手机上的远程页面。 与传统的 Web Inspector 的使用场景不同。

Weinre 的使用场景， 调试的页面在手机上， 调试工具在 PC 的 chrome， 二者通过网络连接通信。

更多详见

Spy-Debugger

微信调试，各种 WebView 样式调试、手机浏览器的页面真机调试。便捷的远程调试手机页面、抓包工具，支持：HTTP/HTTPS，无需 USB 连接设备。

更多详见

vConsole

1
2
3
4
5
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole()
</script>

更多详见

其他：eruda