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

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


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

可是局限性太大了:

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

使用 weinre 就不存在那么多限制了,下面的操作是在 window+Andoidwindow+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 则不存在这个问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值