真机远程调试 方法 汇总

Posted on | In
“真机远程调试”（remote inspect web on real device），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页

-–

layout: post

title: 真机远程调试 方法 汇总

my_excerpt: 。

categories: [javascript]

tags: [js,tools]

description: “真机远程调试”（remote inspect web on real device），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页

pid: 201706280010

-–

系统自带调试

IOS系统

运行环境要求

  • Mac + Safari 浏览器
  • iPhone（iOS 6 +） + Safari 浏览器

调试步骤

1、使用 Lightning 数据线将 iPhone 与 Mac 相连

2、iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）

3、iPhone 使用 Safari 浏览器打开要调试的页面

4、Mac 打开 Safari 浏览器调试（菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面）

  • 如果你的菜单栏没有“开发”选项，可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。

5、在弹出的 Safari Developer Tools 中调试

经过如上步骤就可在 Mac 端调试 iPhone 上 Safari 运行的页面了，但对于 WebView 页面就不适用了，另外 Windows 系统不适用此方案。

当前测试环境：

  • Safari 版本 10.0.2
  • iPhone 7（iOS 10.1.1）

没有 iPhone 设备可以在 App Store 安装 Xcode 使用其内置的 iOS 模拟器，安装完成后通过以下两种方式开启：

  • 右键 Xcode 图标 -> Open Developer Tool -> Simulator
  • 右键 Finder 图标 -> 前往文件夹 -> /应用程序/Xcode.app/Contents/Developer/Applications/ -> 运行 Simulator.app

运行 iOS 模拟器后，在模拟器中打开调试页面，再通过 Mac Safari 开发功能就可以调试到。

如果我需要调试更低版本的 iOS 怎么办？实际使用的 iPhone 不可能去降版本，不必担心，Simulator 有。

点击左上角 Xcode -> Preferences -> Downloads 就可以看到提供了如下版本：

iOS 版本下载

Android 系统

运行环境要求

  • Chrome 版本 >= 32
  • Android 版本 4.0 +

调试步骤

1、使用 USB 数据线将手机与电脑相连

2、手机进入开发者模式，勾选 USB 调试，并允许调试

如何开启 USB 调试：

索尼 Z5：设置 -> 关于关机 -> 多次点击软件版本开启 -> 返回上一级 -> 开发者选项 -> USB 调试

魅蓝 Note：设置 -> 辅助功能 -> 开发者选项 -> USB 调试

不同 Android 设备进入开发者模式的方式有稍稍不同，瞎捣鼓一下即可开启。

3、电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项

开启 Discover USB devices

4、手机允许远程调试，并访问调试页面

5、电脑点击 inspect 按钮

如果你出现无法识别到设备的情况，建议尝试以下几种方法：

  • 使用原装数据线，不要使用山寨数据线或一线多头的数据线
  • 重新插拔 USB 数据线，让手机处于充电状态
  • 关闭电脑相关的应用助手
  • 重启手机
  • Windows 系统下自动安装驱动失败，到 Android Studio 手动下载

注意：使用 Chrome Inspect 查看页面时，Chrome 需要从 https://chrome-devtools-frontend.appspot.com 加载资源，如果你得到的调试界面是一片空白，那你可能需要科学上网。

6、进入调试界面

使用代理工具调试开发环境页面

对于需要配 Hosts 才能访问的开发环境页面，手机在默认情况下是没有权限修改 Hosts 文件的，除非是 iOS 设备越狱后和 Android 设备 root 后，所以一般情况下手机是无法访问开发环境页面，这时需要使用到 Mac 系统的 Charles 代理工具，Windows 系统可使用 Fiddler 代理工具。

实现思路

  • Mac 作为代理服务器
  • 手机通过 HTTP 代理连接到 Mac 电脑
  • 手机上的请求都经过代理服务器
  • 通过给 Mac 配 Hosts 实现目的

Weinre 调试工具

Weinre 是一款较老的远程调试工具，功能与 Chrome DevTools 相似，需要在页面中插入一段 JS 脚本来实时调试页面 DOM 结构、样式、JS 等，另外它使用的是代理的方式，所以兼容性很好，无论是新老设备系统通吃，但对于样式调试不友善，缺少断点调试及 Profiles 等常用功能。

调试步骤：

1、安装 Weinre

使用 NPM 全局安装 Weinre

1
2
$ sudo npm -g install weinre

2、启动 Weinre 监听服务

1
2
$ ipconfig getifaddr en0 // 查看本机 IP
$ weinre --boundHost 10.14.217.14 --httpPort 8090

--boundHost 后填入你本机 IP 地址，--httpPort 后填入端口号，默认为 8080

3、进入 Weinre 管理页面

使用 Chrome 浏览器访问 http://10.14.217.14:8090，在管理页面你可以看到使用相关的说明，有进入客户端调试界面的地址、使用的文档、DEMO 页面等等，说明中要求将一段 JS 脚本 `` 插入到需要调试的页面中，插入代码后手机访问调试页面。

4、进入客户端调试界面

点击 debug client user interface：http://10.14.217.14:8090/client/#anonymous 的链接。

5、JS 脚本注入

手动加入 JS 脚本不优雅，这里可以结合我们前面提到的 Charles 代理工具实现动态 HTTP Script 注入。

打开菜单 -> Rewrite -> 勾选 Enable Rewrite

输入 Rewrite 的名字并且在 Rules 一项添加匹配的规则，Location 一项是用于指定的域名和端口添加规则用的，这里我们不填默认匹配所有请求。

Type 允许对需要匹配的请求进行 Rewrite，一共提供了 11 种：

  • Add Header
  • Modify Header
  • Remove Header
  • Host
  • Path
  • URL
  • Add Query Param
  • Modify Query Param
  • Remove Query Param
  • Response Status
  • Body

这里我们需要使用到的是 Body，它的作用是对请求或响应内容进行匹配替换，按照下图的配置，通过将匹配到的响应内容 `` 标签替换成需要插入到页面中的 JS 脚本，从而实现动态插入。

Rewrite Rule

另外，也有基于 Weinre 进行功能扩展的工具，比如早期版本的 微信 Web 开发者工具 v0.7.0 和 spy-debugger，都在 Weinre 的基础上简化了要给每个调试页面添加 JS 脚本的步骤，spy-debugger 还增加了对 HTTPS 的支持。

感谢你的阅读，如果你还有其他更为实用的调试方案，欢迎下方留言交流。

ref:https://aotu.io/notes/2017/02/24/Mobile-debug/index.html

ref:https://github.com/jieyou/remote_inspect_web_on_real_device/blob/master/README.textile