charles调试指南一二

在windows下可以使用fiddler作为调试代理工具，那么在mac下可以用什么呢？这里推荐使用Charles。Charles可以理解为mac上的’fiddler’。下面就介绍一下如何使用这样类似的代理工具，下面是以charles为例，可能设置的位置不同，但是需要的步骤都是相似的，可类比。

一般使用调试代理工具，是调试一些js文件，抓包，查看http请求与返回相关的信息。

准备工作

首先保证需要调试的设备(电脑或是手机)与Charles处于同一网段中，比如都连上了noway的无线网。
- mac支持多网卡同时工作，插网线和无线网都可以同时连接。
设置Charles的代理端口号，默认是8888(fiddler也一样)

在charles开启mac proxy
需要抓包的软件关闭其他代理
比如浏览器，看看是不是用了其他代理，需要选择系统代理。否则会抓不到用浏览器浏览时的包。
浏览器清缓存
假设上面几个步骤都成功了，但是依然看不到加载的资源，需要看看是不是浏览器还是从浏览器缓存中读取的这些资源。
- 如果是，那么就在charles获取到的请求资源中看不到文件信息。
- 那么需要强制刷新，或是清除浏览器缓存后再刷新页面。这时就可以看到加载的资源了。
- mac下command+r,是刷新网页。command+shift+r是强制刷新（但往往起不了效果）。可以使用chrome的插件click&clean来清除缓存。

手机设置代理
- 设置电脑上的网络，保证第一个是以太网的
- 连上与mac同一个无线网后，设置mac中wifi的ip(和以太网的ip不一样)，和端口号8888
这时如果前面的步骤都没问题，就会在charles界面上出现一个弹出框，选择allow即可。
这样我们就可以像调试pc页面一样，对移动端页面进行脚本调试了。
另外呢，连上这样的代理之后，手机相当于是电脑的另一个屏幕了。就是说，只要电脑能访问的页面，在手机上也都可以访问了。可以通过chrome的二维码插件，直接扫码访问，或者通过任意方式，能让手机获取到需要访问的地址即可。

在虚拟机开启代理工具后，比如fiddler，在本机上的浏览器的代理地址设置成虚拟机中的代理地址即可。这样在虚拟机里就可以抓本机上的包了。其实就是相当于两台电脑之间的代理设置。

适用与pc和移动

有时我们需要对页面中的脚本进行调试，如果页面是线上的，或者由于环境的限制，不能直接修改已有的脚本看到效果，该怎么办？

那么使用map大法好，map分为map remote和map local两种。都是替换已抓到的文件，不同的是前者是用线上地址的文件替换，后者使用本地文件替换。本地文件替换也是我们debug时最常用的。

(并不鼓励[doge脸])

用Chrome devTools调试Android手机各种app中的web页面

手机要满足Android系统为4.4或更高版本，低版本不支持这种方式。(也不是所有的手机都支持，比如有的华为就不支持)
确保App已经开启了webview的debug调试模式。
用usb数据线连接好手机与电脑。
将手机中的设置 - 开发人员工具 - USB调试功能打开。
打开chrome://inspect/#devices，即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上Discover USB devices
在app中访问一个web页面,对应的webview就可以出现在devices中，单击inspect即可调试。

用safari调试iPhone中safari里的web页面

由于iPhone安全性的限制，我们只能通过safari调试iPhone在safari中的页面，调试不了别的地方的webview。