H5移动端调试篇

背景

随着移动端的兴起，相信大家都遇到过关于APP嵌套H5页面之间通信的问题，因为前端绝大多数情况下调试样式以及接口联调都是依赖于浏览器进行调试的，但是用来调试APP中的Webview页面调用原生方法的时候是会报错的，所以记录一下调试的过程。

方案

• 利用charles抓包工具将端内请求映射到本地服务（此方法比较繁琐）
• 使用浏览器safari（ios）和 chrome（android）inspect调试

工具准备

• charles下载地址www.charlesproxy.com/download/ 大家根据自己的系统来对应安装就好了

• 使用方法大家自行百度就好了

调试过程

Charles配置

• proxy setting（代理设置）

1. 打开Proxy-Proxy Settings

2. 设置端口为8888（这个可以随意，后续手机配置代理的时候需要用到）

• PC设置https代理抓包

1. 电脑端安装 Charles 的 CA 证书（必须）点击help

2. 安装过后把证书添加到登录，然后始终信任该证书

3.电脑上charles的SSL抓取设置（必须）

• 打开Proxy-SSL Proxying Settings

• charles并不是默认抓取ssl的，所以即使你安装完证书之后，Charles 默认也并不截取 Https的信息，你需要在SSL proxy里设置需要抓的域名，因为charles的location配置都是支持通配符的，所以在HOST里设置一个”*”就可以了，port不写

• 手机网络代理到电脑端口（前提电脑wifi和手机wifi在同一个局域网下）

注意（填写IP的时候看看有没有空格，可能是输入法的原因手机输入的时候会自带空格比如121 . 10，之前导致我在调试的过程中一直匹配不上，很坑。。）

1. 配置代理

2. 下载charles证书到手机

• ios用safari访问chls.pro/ssl (注意：如果没有弹出下载的话请访问www.charlesproxy.com/assets/lega…)

• 点击已下载描述文件进行安装

• 设置-通用-关于手机-证书信任设置

3.配置mapRemote将远端请求地址配置映射到本地服务

• 选择Tools - MAP Remote

• Map From 中填写目标请求的协议、域名，Map To 则是你需要转发的本地服务地址

• 配置好之后手机浏览器访问baidu.com的时候就会转发到你Map To 配置的地址了

真机调试webview ui（此方法更多用来调试样式）

1. ios

• 用数据线连接mac和iphone
• 设置-safari浏览器-高级-打开javaScript和网页检查器

• 打开Mac safari浏览器-设置

* 用手机safari浏览器访问网页后，从电脑端safari开发->...的IPone->点击进去对应的页面就可以进行调试了

2. Android（好像mac不支持，windows可以）

• 手机先开启开发者模式，每个品牌的手机开启方式不同可以自行百度
• 打开USB调试
• 用USB连接电脑，授权USB调试
• 打开 chrome://inspect/#devices | edge://inspect/#devices 会自动识别手机型号，然后点击对应的页面inspect就可以进行调试了（注意：此方法需要科学上网）

结尾

最后我个人觉得如果项目有配置vconsole、eruda包的话可以不用charles，有兴趣的同学可以动手试试啦，好记性不如烂笔头。