使用 weinre/spy-debugger 调试手机页面

使用 weinre/spy-debugger 调试手机页面

很久之前折腾过 chrome 的调试工具,感兴趣可以看下这个: chrome 调试手机网页

可是局限性太大了：

1. 需要是 Android+chrome
2. 需要运行在 Android 的 chrome 上才可以，如果进行微信/其他平台的 H5 开发并不能很好的调试
3. 有墙！实力劝退

使用 weinre 就不存在那么多限制了，下面的操作是在 window+Andoid 和 window+iOS 都试过，亲测 OK！.其他 PC 平台应该也是大同小异

---

下载 weinre

#全局安装weinre
npm install -g weinre

验证是否安装成功

weinre -v

# 看到下面的输出就代表安装成功了

运行 weinre

weinre --boundHost 192.168.0.105 --httpPort 9999

注：192.168.0.108 最好改成自己的 IP 地址 9999 为端口号，随便指定都行

这里如果不指定 IP 地址，weinre 默认会运行在 localhost:8080上，如果是运行在 locaohost 上，那调试的终端在手机上，那就没办法找到对应的链接了。所以一定要指定IP

运行服务后的样子，这会占用一个终端，这个不要退出，退出就不能用了。根据提示， 打开 192.168.0.105:9999 >

打开后会看到：

• 留意我圈起来的地方。这里有段 script 脚本。放到你需要调试的页面上（不用考虑跨域之类的问题，放上去就行，这也就是为什么之前让你们一定要指定 IP）

• 其次。调试的页面需要和你的 PC 在同一个 局域网，不然也是无法调试的。

开始调试

上面的步骤都完成后，打开我最近一张图，最上面的链接：如：http://192.168.0.105:9999/client/#anonymous

看到这个就是有一个终端设备链接进来了。
点击隔壁的 elements 就可以查看 html 代码了，剩下的就是调试工具发挥了！

weinre 支持调试多个设备。如果有多个设备连接 targets 会有多条链接，点击就可以切换

clients 就是当前调试的设备。

这样的话无论 H5 在哪个平台运行，都可以调试了！

文末彩蛋 spy-debugger

对于 weinre 使用是挺不错的，可是如何 debug 线上的问题，总不能每次线上出问题，我们都加入一段 js。然后推上线，在开始排查问题把。于是 spy-debugger 就显得特别友好：通过手机代理的方式，自动给页面注入相应的 JS
spy-debugger github 地址。文档说的很清楚了，不过这边还是自己做个记录

安装 spy-debugger

也是基于 node 的环境

 npm install spy-debugger -g

打开 spy-debugger

• 自定义端口（8888）

# 因为我青花瓷抓包也是8888端口
spy-debugger -p 8888

手机设置 8888 代理，安装证书

• 打开 wifi 设置，代理选择手动 然后根据提示填入本机 IP。代理端口就是 8888 了。
• 安装证书：访问 http://spydebugger.com/cert !!注意：这里一定要连接本地代理后才访问。不然自动跳转的都是一些很不雅的页面。

  连接电脑代理才能到达正常的证书下载页。
  安卓下载后安装.
  iOS 要用自带的浏览器访问，然后打开设置，看到设置会多出来一条安装证书，点击安装即可
  微信是打不开这个链接的，自行到浏览器打开

后续的坑！

安卓手机，即使已经安装了证书，在普通浏览器依旧是无法调试的。因为的确是证书出了点问题，可是呢，在微信浏览器是可以调试的。所以可以把相关连接复制到微信里面，通过微信打开
iOS 则不存在这个问题。