使用spy-debugger进行移动端调试

1,342 阅读1分钟

这里先附上文档:gitee.com/mirrors/spy…

由于手机开发时需要进行手机调试,自己的手机是ios不能接usb调试,直接连网访问本地测试,不能查看控制台,调试起来很不方便,难以排查问题。而spy-debugger简直就是神器,无需连接USB,操作简单,支持页面调试和抓包。

调试方法

1.安装

npm install spy-debugger -g

2.手机与电脑保持在同一网络下
3.手机开启网络代理,ip为pc端的ip,端口号默认为98884

如果pc是内网,而手机只能连外网,则手机需要开启vpn,连接内网,才能访问pc本地启动的服务 image.png

4.电脑命令行输入:spy-debugger,会自动打开weiner调试页面
5.手机访问需要调试的页面即可

手机访问之后,调试页面就会出现targets,显示访问的url image.png 还有Elements、Network等面板可以进行查看和操作 还有抓包工具:

image.png

tips:

如果手机访问之后,如果发现targets没有显示对应的信息,那可能是手机代理的端口号与spy-debugger开启的端口不一致: image.png

我一开始没有注意这里,一直用的98884端口,一直获取不到targets,最后发现是端口号的问题。

修改端口:

spy-debugger -p 8888

设置页面内容为可编辑模式,使页面内容修改更加直观方便

spy-debugger -w true 文档里显示默认为false,但我没有设置这个属性,也可以修改页面内容,很奇怪。