移动端h5调试方法

时间:2023-03-09 01:39:02
移动端h5调试方法

charles代理

使用技巧如下:

http://www.jianshu.com/p/fdd7c681929c

1、手机wifi连接代理

以iphone为例,长按住wifi, 进入下一页,可看到 HTTP代理-配置代理, 点击进去,进入下图的页面。然后在服务器和端口设置你电脑的ip和port(如192.168.20.46 和8888)。
移动端h5调试方法

然后电脑上的charles会出现一个对话框,如下,请点击下allow。
移动端h5调试方法

2、手机安装证书

打开手机的默认浏览器,如safari, 输入http://charlesproxy.com/getssl 或者 http://chls.pro/ssl。证书装好之后,就可以抓到包了

当然,这样只能看到http的请求,如果是https的请求,你会发现是红色的叉叉。
打开charles -> proxys -> ssl proxying settings 可以设置,添加你需要拦截的https请求。
其实ssl proxying settings就是为了添加ssl证书,这样Charles才能拿到对称密钥,可以解析到服务端返回的内容
移动端h5调试方法

ios 大于10.3的版本,证书添加之后,还要将证书信任设置下,步骤如下: 设置->通用->关于本机->证书信任设置

3、MAP功能, tools > map local 是将某个网络请求重定向到本地的某个文件
可将本地js代理替换到远程

4、MAP功能, tools > map remote 是将某个网络请求重定向到另一个网络请求
可将测试环境代理替换到线上

5、DNS Spoofing 类似于hosts,
Spoof DNS lookups by specifying your own host name to remote address mappings.

6、Rewrite,重写对应的内容,主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite,支持正则表达式.

下图是我用Rewrite将vconsole代理到每个html的规则
移动端h5调试方法

http://www.cnblogs.com/wonyun/p/5586746.html

http://www.heyuan110.com/2015/08/15/Charles%E8%BE%85%E5%8A%A9%E8%B0%83%E8%AF%95%E6%8E%A5%E5%8F%A3/ 很详细很赞

7、黑名单 Tools->Black List
白名单 Tools->White List

vconsole

啦啦啦~微信出的,可以实时看到打印的参数和网络请求。你只要引入下面的这个script就ok啦

这个是vconsole在h5上的浮层,点击就可以知道你想看到的啦。

IOS的 h5可以在safari联调

首先打开你的iphone,在设置下面找到safari-高级-然后打开Javascript和web选择器

接着,用你的数据线连上mac。在iPhone的safari上输入你想要调试的h5。打开mac上的safari浏览器-开发-**iPhone,选上你打开的url,嘿嘿,就直接可以调试你的页面啦。

安卓上的h5,可以调试测试包的webview

电脑上使用 chrome浏览器,进入chrome://inspect
数据线连接 手机, 进入开发者模式-USB调试