Charles抓包的在前端调试中的两个应用

【在开始之前，先甩一个链接H5移动调试全攻略，把H5的调试技巧介绍的比较全面】

但今天重点是把里面的Charles抓包工具拿出来，捋一捋两个常用的Charles调试应用，特别是调试线上问题的便利之处

一、调试移动端的配置

Charles抓包首先需要配置手机代理，在手机上操作步骤如下：选择（电脑和手机）正在连的WiFi --> 进代理设置 --> 手动 --> 输入电脑ip和端口号（端口号在Charles中有默认值，在proxy -- > proxy settings下）

手机配置好后，Charles会让你确认，确认后Charles即可捕获手机上的所有请求（Charles左侧显示）

但：你会发现捕获的所有https请求下都显示unknown，这是因为Charles和手机都要安装SSL证书

1. 手机安装SSL证书，步骤如下：手机浏览器进网址：chls.pro/ssl，回车下载安装证书；
2. Charles安装SSL证书，步骤如下：菜单栏进Help-->SSL/Proxying -->Install Root Charles Certificate，点击安装

 

至此，电脑和手机的https请求就可以正常捕获了

二、线上环境跑本地代码（或者说本地文件替换线上文件）

在Charles左侧structure中找到要替换的文件，如static和/（一般是build后的文件夹dist/static文件替换static，dist/index.html替换/（Charles中显示的是/）），右键选择Map Local，会打开一个弹窗，映射本地文件

这样再也不担心线上问题不好调试了

只需映射一次。如果用的是webpack，每次改完本地代码就要在本地重新构建build一次，线上环境刷新后跑的就是本地代码

（记得不需要映射本地代码时，把MapLocal关掉）

注意：如果有时在Charles上找不到static，可能是浏览器缓存的问题，ctrl+F5刷新下