移动端web如何在真机上进行调试

发布于:2021-05-15 03:16:21

? ?在做移动端页面的时候,在chrome的手机模拟器上进行模拟测试界面。但是在真机上打开页面的时候,却出现界面或者是功能上的bug。所以我们做完移动端页面的时候,不妨先用真机进行调试本地手机页面。


? ?主要介绍使用过的两种方法


1.Fiddler代理调试

? Fiddler是一个web调试代理,能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据。



下载安装Fiddler开启Fiddler的远程连接,Fiddler菜单栏 Tools->Fiddler Options? ->Connections,把Allowremote computers to connect选√,然后*鬎iddler。



获取本机ip地址:在cmd中输入ipconfig命令获取,记住IPv4地址



手机设置代理,打开设置-WLAN(手机和本机要在同一局域网)-找到代理,手动输入服务器名(即本机的IP??IPv4),端口(Fiddler上设置的端口号)




? 设置完以上步骤就可以在手机上打开自己开发的网页并调试


2.spy-debugger调试

? spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。微信调试,各种webview样式调试、手机游览器的页面真机调试,支持:HTTP/HTTPS,无需USB连接设备。


? 特性:



    页面调试+抓包操作简单,无需USB连接设备。支持HTTPSspy-debugger内部集成了weinre、node-mitmproxy/AnyProxy.自动忽略原生APP发起的https请求,只拦截webview发起的https请求。对SSL pinning技术不会造成任何影响可以配合其他代理工具一起使用

? spy-debugger安装与使用:



    全局安装npm install -g spy-debugger,局部安装npm install spy-debugger启动spy-debugger,如果是局部安装,需要加node_modules/.bin设置手机HTTP代理,如何上面Fiddler获取本机的IP地址,spy-debugger的启动端口(默认是9888)手机安装证书(node-mitmproxy CA根证书)?

? ? ?扫一扫安装




spy-debugger启动界面,在手机端刷新页面之后,targets会有记录




页面编辑模式,启动命令:spy-debugger -w true


修改端口: spy-debugger -p 8888


设置外部代理(默认使用AnyProxy):? spy-debugger -e http://127.0.0.0:8888


是否允许weinre监控iframe加载的页面(默认是false) :spy-debugger -i true


是否只拦截游览器发起的https请求(默认是true) spy-debugger -b false


是否允许Http缓存(默认是false):spy-debugger -c true


参考


https://github.com/wuchangming/spy-debugger

相关推荐

最新更新

猜你喜欢