移动端内webview页面调试技巧

背景

随着移动端原生app内嵌webview前端页面的场景增多，对于前端开发掌握端内快速调试webview的方式十分必要。此类的文章挺多的，但每次隔一段时间不调试，摸到真机器时还是有点不熟悉，每次都要重新搜索步骤，因此记录此文章供自己查阅方便。

主要有以下两种场景调试：

• 场景1: 调试代码逻辑部分，将端内请求映射到本地服务；
• 场景2: 调试ui兼容，使用safari（ios）和chrome（android）真机调试；

调试方法

使用charles将移动端请求映射到本地服务

1. 电脑安装charles: mac上首先需要安装charles，并进行基础配置，搜一下网上有很多，贴一个参考链接
2. 手机网络代理到电脑端口:
   • 
3. 下载charles证书到手机
   • ios安装证书
     • safari访问chls.pro/ssl
       • 
     • 安装描述文件
       • 
     • 信任证书配置（设置-通用-关于本机）
       • 
   • android安装证书
     • Charles，选择help-SSL Proxying→Save Charles Certificate保存证书并导入到手机具体目录中
     • 导入后直接点击安装证书，若提示无法打开则【手机设置-更多设置-系统安全-从存储设备安装-选择charles.pem，点击高级，安装证书】
     • 有的安卓机器pem文件无效，可改文件后缀为crt
4. 配置charles-tools-mapRemote将远端请求地址配置映射到本地服务
   • 
5. 从app端内的请求访问webview即可映射到本地
   • 直接修改本地的代码后重新进入web页面，即可更新为最新本地代码

真机调试webview ui

在上述charles步骤完成后，可以成功从真机上访问本地最新代码，但当ui有兼容问题时仍然看不到具体真机的webview上应用的样式，不能在devtool上实时修改，可通过以下方式真机调试ui：

• ios真机调试
  • 数据线连接mac和iphone/ipad，手机提示是否信任该电脑，选择信任
  • iphone设置-safari浏览器-高级-打开javaScript选项和网页检查器
  • 打开电脑safari浏览器-【开发-xxx's iphone-点击用于开发】
  • 手机上访问网页后，从电脑端safari-【开发-xxx's iphone-选择对应页面】，即可打开devtool，看到对应样式 & 直接修改css
  • 备注：
    • 配合charles代理的话，可直接在本地修改源码，更新测试服代码验证最终效果
    • 如果手机和电脑连接，不出现“是否信任”提示框，而是充电栏图标旁显示“无法充电”，则是该设备连接电脑电压有问题（为了调试兼容问题，我换了一个相同系统版本的设备进行调试）
• android真机调试
  • 打开安卓手机开发者模式：进入【设置-关于手机-（不同手机不一样）开发者模式-打开USB 调试】
  • 数据线连接mac和手机
  • 电脑打开chrome-访问chrome://inspect-点击discover usb devices-即可调试网页，可参考远程调试 Android 设备网页