移动端h5调试方法

charles代理

使用技巧如下：

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

1、手机wifi连接代理

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

然后电脑上的charles会出现一个对话框，如下，请点击下allow。

2、手机安装证书

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

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

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的规则

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调试